Buenas buenas!… Bueno pues aqui­ esta el primer tutorial de muelalab para desarrollar aplicaciones en facebook en el cual les mostrare como crear y configurar una aplicacion en facebook. Bueno pero antes que nada.. que es Facebook, bueno pues dudo que alguien no lo sepa, facebook es una Red Social con mas de 350millones!!!! De usuarios en el mundo! Asi­ que si no estas en facebook, no estas! xD!! (Registrate rapido )…

Y bueno con esa cifra usuarios las aplicaciones en facebook son parte importante para entretener a los usuarios Facebook nos permite desarrollar nuestras propias aplicaciones con FBML (Facebook Markup Language), Lenguaje de marcas, para los que saben un poquito de HTML esto se refiere a los TAG FMBL nos permite construir aplicaciones completamente integradas en el entorno de Facebook. Con lo que podremos hacer algunas acciones como acceder al perfil de los usuarios, mostrar sus fotos, publicar en sus muros y mucho mas! Aunque como es un lenguaje marcas tendremos que apoyarnos un poco en php xd

Bueno… Al final de estos tutoriales tendremos nuestra aplicacion funcionando! Pero ahora nos toca la parte aburrida que es configurar la aplicacion… que es necesario! asi que no se lo salten xD, empecemos pues

Oooooooh! Se me olvidaba! Jaja por primera vez en mi vida decidi hacer un Video tutorial!… Y bueno les dejo el video y tambien el tutorial escrito (al final del escrito inclui­ un ejemplo que en el video no esta Chekenlo!).. Me parece que el video tutorial es mas facil de seguir asi­ que espero sus comentarios sobre si les gusto o no, si quieren mas.etc.. Por lo menos ya no se pueden quejar de que escribo feo! Ahora de que hablo feo xD!

Configuracion Facebook.
Con su cuenta de Facebook abierta, ingresaremos a la siguiente URL http://www.facebook.com/developers/

Esto nos llevara a la aplicacion de Facebook Desarrolladores, si es la primera ves que entran nos mostrara una ventana donde daremos clic en Permitir
Entraremos a una pagina en la parte superior derecha encontremos el texto Set Up New Application o Configurar Nueva Aplicacion (URL: http://www.facebook.com/developers/createapp.php), damos clic.

Alla­ nos pedira el nombre de la aplicacion. Escribimos y damos crear aplicacion. Accederemos a la pagina de configuracion. Alli­ encontraremos nuestro API KEY Y SECRET KEY que son esenciales para usar la aplicacion (MAS ADELANTE LOS USAREMOS). Solo algunas cosas cambiaremos, empezaremos en BASICO, donde cambiaremos el icono y el logo, el tamaño maximo es de 16×16 y 75x75px respectivamente. Para esto damos clic en Cambiar Logo nos abrira una nueva ventana donde nos pedira que elijamos la imagen. Aqui­ es importante que la imagen no la subamos directamente del PC, si no que la imagen la subamos a un servidor externo (como subirimagenes.com) o en su propio host. Y de ahi­ carguen la imagen.

Continuaremos editando los campos dedescripcion y lenguaje (los demas campos los pueden dejar en blanco).
Ahora pasamos a la pestaña CANVAS, esta es la importante
Canvas Page URL: Sera la URL para acceder a la aplicacion. Que sera de la forma http://apps.facebook.com/(TuNombre)
Canvas Callback URL: Aqui­ colocaremos la URL de donde facebook cargara la aplicacion (archivos, etc). En mi caso sería: http://www.muelalab.com/facebook/

Ahora un poco mas abajo cambiaremos la opcion de Render Method que esta predefinida en IFrame, la cambiaremos a FBML, Esto tambien en muy importante!

Listo! Terminamos de configurar la aplicacion!… Damos clic en Guardar Cambios Este paso aunque no programamos nada! Es uno de los mas importantes! Sin esto simplemente no funcionaria XD! Pero no los voy a dejar asi xD vamos a hacer una pequeña prueba..

El Tipico Hola Mundo – A Mi Manera (sin hola mundo xd)
Antes que nada ahi­ que descargar la libreria para conectarse a la API, DESCARGA AQUI
La Descargan y descomprimen, dentro de la carpeta descomprimida, abra otra carpeta llamada php, todos los archivos de esta carpeta los suben a su host en la Direccion que habi­amos especificado en el Canvas (http://www.muelalab.com/facebook/) Por Ultimo creamos un archivo index.php y escribimos:

<?php
require_once 'facebook.php';
$appapikey = '[TU APIKEY]';
$appsecret = '[TU SECRETKEY]';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
echo "<br>Bienvenido, <fb:name uid=\"$user_id\" useyou=\"false\" /><br><br>";
echo "<fb:profile-pic uid=\"$user_id\" />";
?>

Linea 2: Se llama al archivo ‘facebook.php’ que es para poder utilizar la API de facebook.
Linea 3 y 4: Aqui­ debes colocar tu apikey y secret key que encuentras en la configuración de tu aplicación.
Linea 6: Se hace login a facebook yse guarda en la variable $user_id.
Linea 7: Usamos el tag FBML name para mostrar el nombre de un usuario, mas especi­ficamente el usuario con el uid=$user_id, (uid=User ID) sea el que haya logeado.
Linea 8: Usamos el tag Profile-Pic, para mostrar eso la imagen del perfil del usuario con el uid=$user_id.Eso ser­a todo!, subimso el archivo index.php a el directorio del Canvas, y probamos la aplicacion entrando a la URL que especificamos en Canvas Page URL.. Si todo está bien nos mostrara nuestro nombre y nuestra imagen de perfil!!!..

Ya nos iniciamos en esto.. Pero en proximo Tutorial comenzaremos programar una aplicacion un poco mas compleja !… estense atentos a muelalab.com!! Sigan visitandonos!! Y ya saben cualquier duda, comentario, exigencia xD o lo que sea haganmelo saber!!!

Gracias y suerte ^^!