Cómo usar Facebook Connect en nuestras webs

Nota
Facebook Connect se lanzó en 2008 y desde entonces ha evolucionado y cambiado de nombre varias veces. Actualmente, se conoce como Facebook Login y forma parte de la plataforma de Facebook para desarrolladores y, aunque sigue ofreciendo las mismas funcionalidades, ahora cuenta con más opciones de personalización y seguridad. Ten en cuenta que este artículo está basado, en gran parte, en la API de Facebook antigua. Igualmente, si estás buscando información general sobre este tema, te recomiendo que leas los siguientes artículos:
Desarrollando con Facebook, un tutorial de inicio en Facebook
Ejemplo de Facebook Graph API con Javascript SDK, pero aun más sencillo

Bueno, después de haberme peleado con la API de Facebook para aplicaciones ahora le tocaba el turno a Facebook Connect. Se trata de la evolución de la propia API de Facebook dándole más posibilidades, en particular ampliando la API hasta el punto de permitirte usarla en tus propios sitios web. En este post daremos un repaso sobre las posibilidades de Facebook Connect y los conectos clave ya que como siempre, la documentación oficial es muy completa pero cuesta hacerse una idea de forma rápida.

Índice de contenidos

¿Qué es Facebook Connect?

En realidad se trata de la unión de la API ya existente de Facebook con una nueva API en javascript. Esta nueva API nos permite realizar las acciones de las que anteriormente se encargaba el propio facebook al mostrar nuestra aplicación. Son más pero lo que nos sobretodo nos interesa es saber que nos va permitir hacer 3 cosas:

  • Iniciar sesión en Facebook Connect, una sesión de facebook iniciada en nuestro propio site. La api javascript de facebook se encargará de generar la ventana modal en nuestro site para que el usuario de permisos a nuestra web para interactuar con su usuario de Facebook.
  • Métodos de la API desde javascript. Podemos lanzar algunos de los métodos más comunes de las apis de servidor (PHP, ASP, Java, C#, etc…) mediante esta nueva API javascript.
  • Trabajar con el lenguaje FBML (FaceBook Markup Language) en nuestro site. Esta es la parte fácil de integrar en el site, por la cual sin dejar de usar javascript meternos en lenguaje de servidor podremos mostrar al usuario sus datos de facebook mediante etiquetas específicas de facebook: Su nombre, su foto, las fotos de sus amigos.
  • Trabajar con el lenguaje XFBML, una extensión de estas etiquetas que en vez de generar datos simples nos permitirán incluir en la web widgets completos de Facebook sobre nuestro site.
  • Lanzar los métodos de las Apis de Servidor desde nuestro propio site, aprovechando que la sesión de usuario se inicia con javascript y comparte las mismas Cookies.
  • Acceder a los datos del usuario que se ha conectado con facebook desde el servidor y por lo tanto ganar la posibilidad de registrar directamente esos datos en nuestra web. Esta es la parte más deseada de Facebook connect ya que permite con dos clicks tomar nuevos registros de usuarios en nuestras webs con datos de perfil ya completados.

Todo esto, que no es poco, a la hora de la verdad no es demasiado inmediato con lo que van a ser necesarias unas cuantas horas de pruebas hasta conseguir realmente integrar facebook connect en nuestro site… pero, poco a poco y buena letra…

Parte Técnica 1: ¿Cómo integrar la API javascript en nuestro site?

Facebook usa una rebuscada técnica (que no vamos a explicar) para poder conseguir ajax crossdomain desde nuestro site hacia el de facebook. Lo primero que tenemos que hacer para aplicarla es buscar un sitio que no nos moleste mucho dentro de nuestro dominio y crear un archivo html con el nombre «xd_receiver.htm». Dentro, este html tiene que incluir el siguiente código.

<!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" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body>
</html>

Dejamos este archivo creado y no volvemos a preocuparnos por él.

Ahora le toca a la página de verdad, en la que estamos integrando Facebook Connect, los cambios.

Primero

Incluiremos en la cabecera de la página (en Facebook recomiendan dentro del body, pero no tiene ningún sentido que sea así) la siguiente etiqueta de script:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_ES" type="text/javascript"></script>

Esta es la encargada de cargar la API. Como se puede ver, tras el «.php/» se nos permite indicar el idioma de la interficie. Algo útil, sobre todo para las etiquetas del lenguaje XFBML.

Segundo

Para indicar la «traducción» de las etiquetas FBML y XFBML al contenido real de Facebook deberemos hacer 2 cosas. A. Crear nuestro archivo html con un atributo especial: «xmln:fb» y B. lanzar tras haberlas creado (o mejor aún en el onload de la página) el método FB.init(). Este método recibe 2 parámetros que debemos definir como variables globales en el documento: apikey (la api que nos da facebook al crear nuestra aplicación) y channelpath que es la ruta relativa desde el documento que estamos viendo hasta donde hemos creado el documento «xd_receiver.htm».

Este ejemplo muestra cómo crear el típico botón de facebook connect para invitar al usuario a logarse. El ejemplo ya incluye la cabecera de la etiqueta html con el atributo «xmlns:fb» indicado en la misma.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Title, description y demás... -->
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_ES" type="text/javascript"></script>
</head>
<body>
<p>Conectate a facebook:</p>
<p><fb:login-button></fb:login-button></p>

<script type="text/javascript">
var api_key = '54d4eb8cf2a7ddb90f8986fb';
// path relativo, inexplicablemente no se admiten absolutos...
var channel_path = 'facebookConnect/xd_receiver.htm';
FB.init(api_key, channel_path);
</script>
</body>
</html>

Pueden buscarse las etiquetas disponibles en las secciones FBML y XFBML de la wiki para desarrolladores de facebook. Cabe destacar que la documentación para FBML se hizo con etiquetas cerradas pero para usarlas con la api javascript es necesario colocar la etiqueta de apertura y de cierre. Así para mostrar el nombre del usuario «12345678» no debemo usar >fb:name uid=»12345″ /< sino >fb:name uid=»12345″<>/fb:name<

Por último

En la parte de la API Javascript nos queda como usar las clases de la API. Para esto Facebook nos ha procurado un sistema en el que abundan las funciones con callbacks lo que va a hacer difíciles estos desarrollos para aquellos que no estén acostumbrados a ellas.

var api_key = '54d4eb8cf2a7ddb90f8986fb';
var channel_path = 'facebookConnect/xd_receiver.htm';

// esta función espera hasta que se han cargado todas las librerías
// solo entonces permite iniciar el código que tiene dentro...
FB_RequireFeatures(["Api"], function(){

// Iniciamos la conexión con Facebook.
FB.Facebook.init(api_key, channel_path);

// Esta función se asegura que la conexión
// ha terminado de iniciarse. Solo entonces
// ejecuta el codigo que tiene dentro...
FB.ensureInit(function() {
// Ejemplo uno, pedimos al usuario que nos de
// permisos para enviarle mails mediante facebook
FB.Connect.showPermissionDialog("email");

// Ejemplo 2, rescatamos id de amigos de este
// usuario y mostramos un alert con ellos...
FB.Facebook.apiClient.requireLogin(function(exception){
var userId = FB.Facebook.apiClient.get_session().uid
FB.Facebook.apiClient.friends_get(new Array(), function(friendIds, exception){
alert(friendIds);
});
});
});

Se puede consultar la API de funciones disponibles en este enlace.

Parte Técnica 2: ¿Cómo trabajar en el servidor con esta API?

Lo primero para poder trabajar en el servidor con la API de Facebook es bajar librerías de cliente de la API de Facebook para el lenguaje en el que programemos.

A partir de ahí, podemos trabajar como cuando desarrollábamos aplicaciones para Facebook con el añadido de que tenemos que controlar antes de cualquier acción que el usuario esté logado con Facebook Connect en nuestro site. Seguidamente un ejemplo para rescatar los datos básicos del usuario cuando este está logado.

<?php
include_once("facebook.php");
$apikey = "54d4eb8cf2a7ddb90f898";
$secret = "123456789123456789123456789";
$fb = new Facebook($apikey, $secret);

// comprobamos que el usuario esté logado
if ($fb->get_loggedin_user())
{
$user_id = $fb->require_login();
$user_info=$fb->api_client->users_getInfo($user_id, 'uid, first_name, last_name, name, locale, affiliations, pic_square, profile_url');
// sacamos a pantalla un dump de los datos de este usuario...
var_dump($user_info);
}
?>

Las funciones de las APIs de servidor están disponibles en el siguiente enlace aunque cada una de las librerías dispone de métodos bastante cómodos para realizar la mayor parte de las llamadas a la api.

Esto es todo lo que hay. Ahora solo queda investigar y desarrollar en nuestras webs un apartado social que saque provecho de todas estas nuevas posibilidades.

Iñaki Huerta
CEO de IKAUE

Director de IKAUE. Analista Digital y SEO hace más de 15 años. Internet Lover, Creador de Hilillos y DataHacker.

También te puede interesar

¡Suscríbete!

RECIBE NUESTRA NEWSLETTER

Registrar nueva cuenta

IKAUE MARKETING ONLINE, S.L. es la Responsable del Tratamiento de tus datos, con la finalidad de gestionar tu registro y remitirte nuestra Newsletter con las últimas novedades y/o promociones. Tienes derecho de acceso, rectificación, supresión, limitación, oposición al tratamiento y portabilidad. Puedes ejercitar tus derechos [email protected]. Más información en la Política de privacidad.