Después de hacer algunas pruebas con la api javacript de facebook connect el resultado es que hay ciertas cosas incómodas que siempre se hacen igual. Por ese motivo, y para no perder el tiempo en futuros desarrollos he dejado listo un script que se encarga de realizar estas funciones y hace que la integración de la api sea mucho mas sencilla. El script hace uso de alguna función de jquery con lo que es necesario cargalor después de invocar la galería aunque no es propiamente un plugin de jquery.

Básicamente lo que hacemos es:

• Incluir la llamada a la api javascript por lo que ya no es necesario añadirla
• Incluir las variables de configuración en el script para no tener que repetirlas: apikey, channelpath y locale.
• Gestionar la dirección hacia channelpath que en la api obliga a indicarla con relativa a la página vista, lo que es muy incómodo. Aquí se indica como ruta absoluta desde raiz y el script averigua la relativa usando window.location.href
• Pasa a variable la llamada FB.init() para que el uso de etiquetas FBML se pueda definir en la configuración.
• Incluye el código básico de iniciación de la API con sus callbacks y prepara una función: $.facebook.ready() que nos permite ir creando códigos que se ejecuten cuando todos los callbacks hayan terminado y solo si hay un usario logado. Así tenemos un entorno en el que cambiar el DOM o generar eventos solo cuando el usurio está logado con facebook y la api ha cargado correctamente.
• Dentro de estas funciones definidas en $.facebook.ready() se incluye la propia api dentro del objeto $.fb para mayor comodidad.

• Descargar facebook connect jquery plugin

Un ejemplo de como se simplifica el ejemplo de la entrada anterior de este blog con este script:

Conéctate a facebook:

• Descargar facebook connect jquery plugin

Ejemplos de uso de jquery y facebook mediante este script.

Boton de log-out del usuario

Por lo general, al usar Facebook connect tenemos a los usuarios con sesiones iniciadas en dos partes: 1. En Facebook y 2. En nuestro servidor. Normalmente querremos ofrecerles un botón o link para que puedan salir de su sesión. Ofrecerles una ruta (por ejemplo «/logout») con la que salir de la sesión en nuestro servidor no es tarea difícil pero tenemos que vigilar que eso provoque también el cese de la sesión de Facebook o podemos tener problemas…

Para ello nada más fácil que asignar el evento de logout de facebook en el onlick del mimo botón o link que va a usar el usuario para dirigirse a la url para cerrar sesión. Para ello este sencillo script sería suficiente.

$.facebook.ready(function() {
	$("a#logout").click(function(){
		var destiny = $(this).attr("href");
		FB.Connect.logout(function () {
			window.location = destiny;
		});
		return false
	});
});

Pedir permisos para cambiarle su status al usuario

Otra situación normal es la de que queramos publicar una acción que el usuario está haciendo en nuestra página en su status de facebook (tal vez incluso con un link hacia nuestra página para que lo vean todos sus amigos). Para esto vamos a tener que conseguir que el usuario nos de permisos, algo que hay que hacer con cuidado ya que no van a aceptar cualqueir popup que les salga en cualquier momento.

En este caso vamos a imaginar que en nuestro form le hemos puesto un checkbox al usuario donde dice algo asi como : «Publicar este mensaje también en Facebook». Vamos a crear un script con el que cuando envie el formulario si aun sigue marcado ese checkbox le pidamos permisos para publicarlo.

$.facebook.ready(function() {
  var userId = $.fb.get_session().uid
  $("form#comment").submit(function(){
    if ( $("input[name=commentInFacebook]:checked")[0] )
    {
      FB.Connect.showPermissionDialog("status_update",function( accept ){
      if (accept)
      { // Si aceptó...
        alert("Perfecto, vuelva a clickar en el botón de enviar mensaje para publicarlo.");
         $("input[name=commentInFacebook]").remove();
      }
      else
      { // Si no aceptó
        alert("Lo sentimos, pero no podemos publicar su mensaje en Facebook si no acepta los permisos. Puede volver a enviarlo aceptándolos cuando aparezca el cuadro o desmarcando la casilla.")			
      }
     }); 
     return false;
    }
    else
    { // Si la casilla no estaba marcada (o no existia)
      return true;
    }
  });
});

• Descargar facebook connect jquery plugin