Hace una una semana pasé unos días de desasperación intentándo comprender cómo usar FbConnect, esa API de facebook que te permite que los usuarios «se identifiquen» en tu web con su usuario y contraseña de Facebook. La verdad es que las APIs de Facebook son una herramienta fantástica que te dan muchas posibilidades, pero por contra en mi opinión la documentación no es muy buena y faltan ejemplos claros y sencillos.
Con el fin de que alguien pueda ahorrase unas horas de investigación voy a explicar aquí solo algunas de la funcionalidades que he usado ya que la herramienta de Facebook es bastante extensa.
Primero explicaré las funcionalidades que yo quería cubrir con FBConnect. Se trata de que el usuario pueda enviar una opinión (formulario) asociada a su usuario facebook y que si él lo desea esa opinión se publique automáticamente en su muro de Facebook. En tal caso cada vez que se muestre la opinión junto a esta aparecerá la foto del usuario (foto de Facebook).
Primer paso: Iniciar tu aplicación en Facebook.
Solo tienes que entrar en http://www.facebook.com/developers/createapp.php y dar de alta tu aplicación. Esto puede resultar confuso, porque lo que queremos es integrar nuestra web con Facebook, no crear una aplicación dentro del mismo, pero bueno, hay que hacerlo.
Sigue los pasos que te indican y sobre todo apuntate las claves que te proporcionen (APIKey y SecretKey)
También es importante que si tienes varios subdominios en tu web solo indiques el dominio base (Ej: miweb.com), por lo demás esto no tiene más misterio.
Segundo paso: Preparar tu web
Lo primero es crear un fichero de comunicación entre tu web y Facebook. No es fácil averiguar a priori para que va a servir esto, pero la idea básica es que vas a poner un fichero html en tu web el cual va a ser llamado por Facebook para hacer sabe dios qué cosas (Se intuye que meter cookies en el cliente con tu dominio). El fichero debe llamarse xd_receiver.htm y puedes colgarlo de cualquier directorio, por ejemplo, en /facebook/xd_receiver.htm. El contenido del fichero debe ser como el que sigue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html>
Como ves lo único que hace es incluir un JS que es el que hace esas cosas raras de las que antes hablábamos.
Ojo: Yo no he encontrado la forma de que esto me funcione en un entorno local en el que el fichero xd_receiber.htm se ofrezca realmente. Supongo que es algo lógico, pero si alguien sabe la manera de hacerlo bienvenido sea.
Lo siguiente sería incluir un nuevo XML schema (xmlns:fb=»http://www.facebook.com/2008/fbml) en la cabecera de tus documentos html. Por ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
¿Para qué sirve esto? Pues para posteriormente poder usar en tu código unas etiquetas muy majas que te proporciona facebook como por ejemplo <fb:login-button></fb:login-button> que te muestra el boton de azul de «Conectarte con facebook» o <fb:profile-pic> para mostrar la foto de perfil de un usuario. Si te preguntas cómo es posible que funcione eso, pues resulta que posteriormente cuando inicias la API JavaScript provoca que se parseen esos tags y se sustituyan por lo que corresponde (la imagen o lo que sea). Realmente no es obligatorio indicar ese XML schema si no vas a usar esos tags, y es que hay otras formas de obtener, por ejemplo, la foto de un usuario, pero este método es el más común.
Y por último debes iniciar la API JavaScript en aquellas páginas en las que desees usar cualquier funcionalidad Facebook (Aunque sea para usar los tags mágicos <fb:xxx>) indicando tu APIKey y el path donde se encuentra el fichero xd_receiver.htm.
<script type="text/javascript">
FB.init("TU-NUMERO-DE-API", "/facebook/xd_receiver.htm");
</script>
Tercer paso: Mostrar información del usuario en el formulario.
Como ya he dicho la funcionalidad que queremos conseguir es que el usuario envie un formulario asociando el mismo a su perfil de facebook. Para ello disponemos de un espacio donde vamos a mostrar la información del estado actual del usuario. Si está logado mostraremos su nombre e imagen dándole la opción de deslogarse. Si no lo está mostraremos el botón que le permita logarse en Facebook.
Para pintar el botón de facebook que te permite logarte solo tienes que usar el tag:
<fb:login-button onlogin="putUserInfo()"></fb:login-button>
Donde la putUserInfo será la función JavaScript que se encargará de dibujar la información del usuario una vez se haya logado en Facebook. Si prefieres poner otra imagen o simplemente un enlace puedes hacerlo simplemento añadiédole al evento onclick la función
FB.Connect.requireSession(putUserInfo);
Si el usuario ya está logado no le vamos a mostrar el botón de login, si no que directamente vamos a dibujar la información de su perfil en Facebook. Para ello vamos a modificar la linea dónde hemos iniciado la API del siguiente modo:
FB.init("TU-NUMERO-DE-API", "/facebook/xd_receiver.htm",{"ifUserConnected":putUserInfo});
De este modo, tanto si el usuario termina de logarse, como si ya está logado en el momento de terminar la carga de la página se ejecutará la función putUserInfo.
La funcion putUserInfo debe ser la encargada de dibujar donde corresponda (sustituyendo al botón de login) la infomación del usuario ya logado. Existen varias alternativas para realizar esta función, pero yo me decidí por realizar una petición AJAX a mi servidor en la que se devuelve el src de la imagen y el nombre del usuario logado. Los detalles de implemantación de la función los dejo de tu mano, porque no son relevantes, pero vamos a ver como usar el API php de facebook para obtener la información del usuario. Previamente debes haber descargado el API PHP de facebook en el siguiente link: http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz
//Instanciar la clase facebook (dependiendo de dónde la hayas descomprimido)
require_once('TU-PATH/facebook-platform/php/facebook.php');
$conector=new Facebook('TU-API-KEY','TU-SECRET-KEY');
//Obtener el identificador facebook del usuario que esté logado es tan fácil como
$idUsuarioLogado=$conector->user;
//Obtener nombre, apellido e imagen del usuario
$usersInfo=$conector->api_client->users_getInfo($idUsuarioLogado, 'last_name, first_name, pic_square_with_logo');
$user=$usersInfo[0];
//Formo la información que voy a devolver
$ret=array();
$ret['facebookId']=$fbid;
$ret['nombre']=$user['first_name'];
$ret['apellidos']=$user['last_name'];
$ret['imagen']=$user['pic_square_with_logo'];
//Escribo el resultado de la petición AJAX. Como yo uso JSON, pues eso:
echo json_encode($ret);
Por último a la hora de guardar la información del formulario cuando tu servidor lo recibes recuerda asociarlo al id del usuario de facebook. Para obtener el id del usuario ya sabes que solo tienes que hacer:
$IdFacebook=$conector->user;
Paso 4: Subir información al muro del usuario
Suponemos que en el momento de recibir el formulario que ha enviado el usuario deseamos publicar el contenido en su muro de Facebook. En ese punto es importante destacar que el usuario debe dar un permido especial a tu aplicación para que publique información en su muro. Para ello te recomiendo que en el mismo formulario incluyas un checkbox dónde le pidas permiso con una frase adecuada como «Permitir subir este comentario a mi muro de facebook» y le asocies (onchange) la función del API que le solicitará el permiso adecuado en una ventanita. Si el usuario ya ha dado ese permiso anteriormente la ventanita no se mostrará:
//Comprobar si ya tenemos permiso del usuario o no. Si no los tenemos se los pedimos
FB.Facebook.apiClient.users_hasAppPermission('publish_stream', function(result){
if (!result){ FB.Connect.showPermissionDialog("publish_stream"); }
} );
Para subir la el contenido al muro del usuario puedes usar la función del API php «stream_Publish»:
$conector->api_client->stream_publish($mensaje, $attachment, $action_links);
Paso 5: mostrar información del usuario
Suponiendo que has almacenado el idFacebook de cada usuario junto con la información que publicó es muy fácil mostrar información de ese usuario. Por ejemplo para mostrar su imagen o su nombre
<fb:profile-pic uid="IDENTIFICADOR-DEL-USUARIO" size="square" linked="false" facebook-logo="true"> <fb:profile-name uid="IDENTIFICADOR-DEL-USUARIO">Recuerda que para que la imagén se muestre debes iniciar la API JavaScript al final del documento.
Con esto creo que puedes hacerte una idea del funcionamiento de FBConnect, pero si aun así puedo ayudar en algo no dudes en hacer cualquier comentario en esta entrada.
Abrazos para todos.
Sufrimientos del programador 
Muy interesante!
Nos lo guardamos 🙂
Por cierto, ¿puedes decirnos cuánto tiempo te llevó este desarrollo?
Comentarios por Marta Esteve — octubre 28, 2009 @ 8:18 am
Hola Marta!!
Pues este desarrollo me llevo bastante tiempo de investigación ya que no es fácil encontrar ejemplos claros para la funcionalidad que quieras dar. Una vez aclarados los conceptos no supone mucho esfuerzo, un dia de trabajo como mucho.
También hay que tener en cuenta que yo solo cubro una funcionalidad muy concreta que es la de publicar un comentario con tu usuario de facebook, no lo planteamos como un sustituto total de un login en la web…lo cual creo que conllevaría mas complicaciones. Pero bueno, lo que he puesto en la entrada puede ser un buen punto de partida para entender un poco cómo funciona el invento de fbConnect.
Un abrazo rentalios!!
Comentarios por cgcerro — octubre 28, 2009 @ 8:33 am
No te había seguido aún en el blog! Me gusta el contenido. 🙂
Es cierto que la parte de iniciar la aplicación en FB puede acabar siendo un poco pesado, sobre todo cuando manejas varios entornos.
Mat y yo en un proyecto con RoR tiramos del plugin facebooker, pero con integración completa de login, y la verdad es que el desarrollo fue muy rápido.
Comentarios por iñigo medina — noviembre 20, 2009 @ 8:31 am
hola quisiera que me ayude me tengo que hacer con el mismi sepillo de dientes o es apare
Todo super pero despues de los dias cuando puedes bolver a
usarlo
Comentarios por Implante dentales En cuba — abril 20, 2013 @ 5:20 am
Fckin awesome things here. I am very glad to see your article. Thanks a lot and i’m looking forward to contact you. Will you please drop me a mail? efaedaegdbke
Comentarios por Johnf673 — julio 26, 2014 @ 5:26 pm