Ok, el anterior artículo no estuvo mal; vimos una introducción conceptual a las piezas clave para la construcción de aplicaciones en Facebook. ¡Pero no llegamos a hacer nada! En este post vamos a construir algo sencillo, jugando con el SDK en JavaScript. Vamos a probar a mostrar algunos de los social plugins, usaremos Open Graph, y presentaremos dos nuevas tecnologías: XFBML y Facebook Insights. ¡Al lío!

Paso 1 – Alojamiento para la aplicación

Es responsabilidad del desarrollador buscar un alojamiento para su aplicación. Esto no suele ser un problema, ya que sirve cualquiera al que tengas acceso FTP. Sin embargo, desde el 1 de octubre de 2011 Facebook obliga a que las aplicaciones estén disponibles tanto por HTTP como por HTTPS.

Por lo pronto vamos a crear una carpeta llamada “/facebook” en el directorio raíz de la web, que será desde donde se acceda a nuestra aplicación.

Alojamiento gratuíto

Desde el 15 de septiembre de 2011, Facebook ha llegado a un acuerdo con la compañía Heroku para ofrecer gratis un alojamiento reducido pero funcional para todo el que lo solicite. Queda fuera del alcance de esta guía explicar cómo utilizar este servicio. Más información.

Paso 2 – Configurando la aplicación

Ahora, accedemos a developers.facebook.com, y de ahí vamos a la pestaña Aplicaciones. Seleccionamos la nuestra, y en el apartado de configuración pinchamos en “Edit settings“. En la parte inferior, tal como vimos en el anterior artículo, nos dan cuatro opciones para crear nuestra aplicación. Vamos a seleccionar Website e introducimos la URL completa con la que se accederá a nuestra aplicación. En mi caso, introduzco http://chusete.es/facebook.

Pulsamos en Guardar cambios, y ya está. Ésta ha sido fácil :)

Paso 3 – Creando el esqueleto

Ahora, en la carpeta /facebook de nuestro alojamiento web, vamos a crear un fichero llamado index.html con la estructura básica de un documento HTML. Además, añadiremos el código JavaScript que vimos en el anterior artículo que había que insertar para usar el SDK. Quedaría así el esqueleto:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Demo Facebook</title>
</head>
<body>
    <h1>Demo Facebook</h1>

    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/es_ES/all.js"></script>
    <script type="text/javascript">
        FB.init({
            appId  : '256797284360192',
            status : true, // comprobar estado de login
            cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
            xfbml  : true, // renderizar código XFBML
            channelURL : 'http://chusete.es/facebook/channel.html', // fichero channel.html
            oauth  : true // habilita OAuth 2.0
        });
    </script>
</body>
</html>

Acerca de channelURL

Si te fijas, verás que en la línea 18 hay una URL que apunta a channelURL. Este fichero tan sólo tendrá este contenido:

<script src="http://connect.facebook.net/es_ES/all.js"></script>

Para saber más acerca de por qué es recomendable crear el fichero channel.html, consulta la documentación de la función FB.init.

Llegados a este punto, ya tenemos listo el esqueleto sobre el que construir una pequeña aplicación de demo. Ver resultado del paso 3.

Paso 4 – Añadiendo Social Plugins (XFBML)

Ya vimos que hay, ni más ni menos, que 10 social plugins. Vamos a insertar algunos a nuestra aplicación. Pero antes un poco de teoría. Hace tiempo, Facebook creó su propio lenguaje de marcado para poder insertar social plugins en nuestras aplicaciones. Hablamos del FBML (Facebook Markup Language). Para que pudierar interactuar con JavaScript, crearon FBJS; un dialecto de JavaScript para usarlo en conjunto con FBML dentro del espacio de Facebook. Sin embargo, desde el 11 de marzo de 2011, todo este conjunto de tecnologías ha quedado fuera de uso. ¿Y qué hay en su lugar? Pues un sistema unificado para todas las aplicaciones, ya sean pestañas, aplicaciones en canvas, externas, etc., basado en tecnologías estándar: HTML, CSS y JavaScript. Mucho mejor, ¿verdad?

Para sustituir a FBML crearon XFBML, que es un sistema que, mediante etiquetas HTML estándar, permite definir Social Plugins. Por ejemplo, el botón “Me gusta” es algo tan sencillo como:

<div data-send="false" data-width="450" data-show-faces="false"></div>

¿Cómo se hace para que ese código HTML se renderice como el Social Plugin “Me gusta”? Hay dos opciones:

  1. Si en el código de inicialización del SDK JavaScript (el método FB.init que hemos invocado en index.html) tenemos a true el campo xfbml, entonces se renderizarán todas las etiquetas XFBML automáticamente.
  2. En caso contrario, podremos renderizarlas invocando a FB.XFBML.parse.

Vale, ahora sólo nos queda saber cómo averiguar el código HTML que define cada Social Plugin. Accede a la página de Social Plugins, elige el que quieras usar, completa el formulario con los valores que desees (si es que el plugin te da esa opción), y finalmente pulsa sobre el botón Get Code. ¡Pero ojo! El código que te genera incluye tanto la inicialización del SDK, como el código HTML que define el plugin. Como nosotros ya tenemos el código del SDK, sólo tendremos que copiar el código HTML del plugin.

Por ejemplo, vamos a insertar un plugin Live Stream en nuestra demo. Al pulsar en Get Code obtenemos lo siguiente:

Copiamos sólo el código HTML:

<div data-event-app-id="282078738484719" data-width="400" data-height="500" data-always-post-to-friends="false"></div>

Con lo que ya tendríamos un chat en nuestra aplicación web, con el siguiente aspecto:

Ver resultado del paso 4.

Paso 5 – Botón “Me gusta” y Open Graph

Del mismo modo que hemos insertado un plugin Live Stream, ahora vamos a insertar el famoso botón “Me gusta”. Como vimos, para obtener el código XFBML debemos acceder a la página del plugin, completar el formulario, obtenemos su código, y lo copiamos. Siguiendo esos pasos obtendrás algo similar a esto (en función de cómo complementes el formulario):

<div data-send="false" data-width="450" data-show-faces="false"></div>

Con solo pegar ese código al documento HTML, ya tendremos el botón en nuestra página. ¡Pero un momento! Como vimos en la primera parte, existe una tecnología llamada Open Graph que convierte un documento web en todo un objeto social, referenciable y al que como administradores podemos seguirle el rastro. Pues bien, vamos a hacer esto. En la propia página del plugin del botón “Me gusta” tenemos un formulario que nos permite generar algunos códigos Open Graph -aunque generarlos a mano es algo trivial. En mi caso, lo he dejado así:

<meta property="og:title" content="Página demo de Facebook" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Ésta es la página de demo de la segunda parte de la introducción a programación en Facebook de chusete.es" />
<meta property="og:url" content="http://chusete.es/facebook/index.html" />
<meta property="og:image" content="http://chusete.es/facebook/logo.png" />
<meta property="og:site_name" content="chuso!" />
<meta property="fb:admins" content="1048522537" />

Ahora, cuando alguien comparta esta página en Facebook, ésa será la información que se mostrará por defecto. Por ejemplo, en este caso quedaría así:

Ver resultado final.

Paso 6 – Página para administradores e Insights

Pero hay más. Junto con la información Open Graph hemos insertado una etiqueta más, en la que el atributo property tiene como valor “fb:admins”. Ese campo contiene el id de nuestro usuario, de manera que así constaremos como el propietario de la página. ¿De qué nos sirve esto? Pues en resumen, para dos cosas. Fíjate en cómo queda el botón “Me gusta” cuando lo visualizas:


Interesante… Hay un link a “Página para administradores” y a “Estadísticas”. ¿Qué son?

Página para administradores

Cuando alguien pulse sobre el botón “Me gusta”, se creará un nuevo panel de administración con el que podrás comunicarte con tus “likers” (aquellos a los que les ha gustado tu publicación). Este panel estará disponible desde tu lista de Facebook Pages. Y lo más interesante: todo lo que publiques en el muro de esta página, aparecerá en las lista de novedades de los usuarios a los que les gustó tu publicación.

Insights

Y en segundo lugar, tendrás acceso a las estadísticas en Facebook Insights (¡otra más de las tecnologías de Facebook!). Básicamente, es un panel de análisis de tráfico web, similar a Google Analytics. Puedes acceder desde el enlace “Estadísticas” que acompaña al botón “Me gusta”, pero es preferible reclamar la propiedad de tu dominio ante Facebook, para de ese modo tener acceso completo a todo lo que ocurre con tu página. Para ello, accedemos a la página principal de Insights, y pulsamos sobre el botón . Mete el dominio de tu web, copia el código “meta” que te ha generado, y pégalo en la página principal del dominio:

Finalmente pulsa en Get Insights y ya habrá finalizado el proceso de alta en Facebook Insights. Ahora, cada vez que accedas al dashboard de Insights, podrás consultar qué historias de tu página se han compartido o han gustado en Facebook.

Para más información, consulta la documentación de Facebook Insights.

Resumen

En la primera parte dimos un repaso a las principales tecnologías que involucran el desarrollo de aplicaciones Facebook, y dimos de alta un nuevo perfil de aplicación.

Hoy, hemos visto cómo crear una aplicación en una web externa a Facebook vinculada a nuestro alojamiento. Hemos creado un documento HTML con el código de incialización del SDK JavaScript. Hemos conocido una tecnología de Facebook -XFBML- que nos permite crear plugins de una forma muy sencilla. Como ejemplo, hemos creado un plugin de tipo Live Stream, y otro con el botón “Me gusta”. También hemos añadido los códigos Open Graph y hemos visto su utilidad. Finalmente, hemos visto cómo interactuar con los usuarios a los que les gustan nuestras publicaciones, y cómo explorar las estadísticas de uso de nuestro sitio por los usuarios de Facebook.