Introducción a la programación en Facebook

¿De modo que te han pedido que hagas una aplicación para Facebook y no sabes por dónde empezar? ¿Has llegado a la documentación oficial y te pierdes entre tanto Open Graph, SDK, plugins, dialogs y Graph API? Don’t panic! En este artículo vamos a ver paso a paso cómo empezar a programar en el nuevo sistema de Facebook. ¡Al lío!

Tipos de aplicaciones

En el apartado Getting Started de la documentación oficial vemos que nos dan tres opciones:

1. Páginas web. Para crear una aplicación que se ejecute en tu página web fuera de Facebook.
2. Aplicaciones móviles. Para crear apps para las principales infraestructuras móviles.
3. Aplicaciones en Facebook. Este decir, para crear una aplicación que se insertará dentro de la web de Facebook, en un canvas.

En cualquiera de los tres casos, las tecnologías que utilizaremos serían básicamente las mismas.

Más adelante revisaremos algunas de las tecnologías que nos ofrece Facebook para integrar nuestra aplicación con su infraestructura.

Además, en la página de inicio ofrecen un apartado de ejemplos donde podrás probar y descargar distintas demos, como el de una aplicación en página web, o una aplicación dentro de un canvas en Facebook. También puedes acceder a vídeos con charlas y guías.

Dando de alta una aplicación

Para entender mejor todos los apartados, y para poder realizar algunos ejemplos, vamos a crearnos una nueva aplicación. Para ello, vamos a seguir los siguientes pasos:

Accedemos a la página de desarrolladores de Facebook: https://developers.facebook.com/

Una vez ahí, seleccionamos “Aplicaciones” en el menú.

En tercer lugar, pulsamos sobre el botón .

Ahora indicamos un nombre y la local de la aplicación y pulsamos Continuar:

Completamos el captcha y pulsamos sobre Enviar:

Y con esto ya estaría dada de alta nuestra aplicación:

Fíjate en la caja superior. Verás dos campos: App ID y App Secret. Estos código los necesitarás para hacer funcionar tu aplicación. El primero es el código que identifica la app, y el segundo es un código de seguridad que utilizarás para la autenticación en el lado del servidor.

Por lo pronto, podemos cambiar los siguientes campos:

• Logo. Corresponde al logo de 75×75 px de la aplicación.
• Icono. Icono de 16×16 px de la aplicación
• App Secret. Este código no debemos compartirlo con nadie. Desde este apartado podremos reiniciarlo si lo deseáramos.
• App Display Name. Nombre con el que se mostrará la aplicación.
• App Namespace. Nombre del espacio de nombres de la aplicación, formado únicamente por caracteres en minúsculas, guiones medios y guiones bajos.
• Contact Email. Dirección de correo electrónico de contacto.
• App Domain. Dominio sobre el que se alojará la aplicación (por ejemplo www.example.com).
• Category y Sub-category. Categorías en las que catalogamos la aplicación.

Además, vemos que podemos definir 4 formas distintas de integrar la aplicación con Facebook:

1. Website. Para cuando queramos que en nuestra página puedan los usuarios hacer login con su cuenta de Facebook.
2. App on Facebook. Aplicación para incorporar en un canvas dentro de Facebook.
3. Mobile Native. Para crear una aplicación para móviles.
4. Page Tab. Permite crear una aplicación que se mostrará como una pestaña dentro de una Facebook Page.

Y estas son todas las opciones básicas que tenemos disponibles para configurar una aplicación de Facebook. Sin embargo, podemos acceder a la configuración avanzada desde el menú de la izquierda, pulsando sobre Configuration > Advanced:

En este apartado avanzado por ahora podremos establecer la descripción de nuestra aplicación, y el Sandbox Mode (habilitado indica que sólo los desarrolladores pueden acceder a la aplicación).

Rápido e indoloro, ya tenemos nuestra aplicación creada . Cada vez que queramos volver a la configuración de nuestra aplicación, tan solo tendremos que acceder a la página de desarrolladores de Facebook, apartado Aplicaciones, y seleccionamos la opción deseada.

Tecnologías disponibles

Bien, y ¿qué tecnologías nos ofrece Facebook para implementar una aplicación? Éstas son las principales:

1. Social plugins

Corresponde a pequeños plugins o widgets que se pueden incorporar muy fácilmente en cualquier página web ajena a Facebook. Accediendo a la página de cada uno de ellos verás un pequeño formulario que te genera el código necesario para que lo incorpores en tu página. Seguro que estás muy familiarizado con casi todos ellos:

Botón “Me gusta”.
Es el más famoso de todos los plugins. Permite a los usuarios compartir con un solo clic la página que están visitando

Botón “Enviar”.
Permite que los usuarios envíen a alguno/s de sus contactos la página que están visitando.

Comentarios.
Para añadir un sistema de comentarios a tu página web.

Feed de actividades.
Muestra una lista de las últimas actividades que han llevado a cabo tus contactos de Facebook.

Recomendaciones.
Muestra al usuario una lista personalizada de enlaces recomendados, en función de diferentes parámetros, como por ejemplo las preferencias de sus amigos.

Caja “me gusta”.
Similar al botón “Me gusta”, pero con más elementos. Por ejemplo, muestra las últimas actividades de la página, o una lista de personas a las que les gusta.

Botón “Login”.
Botón que permite iniciar sesión en la página utilizando la infraestructura de sesiones de Facebook.

Registro.
Formulario de registro a una página que se rellena automáticamente con tus datos de Facebook. De este modo, se ahorra tiempo a los usuarios.

Facepile.
Muestra una lista de imágenes de perfil de los usuarios a los que les ha gustado la página que se está visitando.

Live Stream.
Muestra un pequeño ‘chat’ vinculado a la página que se está visitando.

Como ves, a base de insertar este tipo de plugins, puedes crear una página web muy rica en funcionalidades en un tiempo récord. A modo de demostración, puedes consultar esta página, que forma parte del apartado de ejemplos de Facebook. Esta demo hace uso del botón “me gusta”, del feed de actividades, de las recomendaciones y de los comentarios.

2. Diálogos

Podemos definir los diálogos como ventanas emergentes que solicitan al usuario permiso para realizar alguna acción.

Podemos invocar los diálogos a mano, sin embargo en general suele ser mucho más cómo realizarlo mediante alguno de los SDK que Facebook nos ofrece. En concreto, para páginas web, utilizaremos el SDK JavaScript mediante el método FB.ui. En el apartado del SDK de JavaScript veremos cómo invocar estos diálogos.

Por lo pronto, vamos a ver cuáles son los distintos diálogos que nos ofrece Facebook:

Diálogo de Feed

Permite al usuario añadir a su muro, desde nuestra aplicación, una publicación.

Diálogo de amigos

Muestra un diálogo para añadir a un amigo.

Diálogo OAuth

Solicita al usuario unas determinadas autorizaciones, y concede permisos a la aplicación.

Diálogo de Pago

Permite al usuario adquirir nuevos créditos de Facebook.

Diálogo de petición

Diálogo que permite al usuario enviar una petición a uno o más amigos.

Diálogo de envío

Diálogo para que el usuario envíe un mensaje a algún amigo, a un grupo de amigos, o a una dirección de correo.

3. Autenticación y Permisos

A menudo necesitaremos que los usuarios nos autoricen a acceder a su información. Por ejemplo, cuando queramos que puedan iniciar sesión en nuestra web utilizando su cuenta de Facebook, o cuando desde nuestra aplicación queramos acceder a determinados campos de su perfil de usuario. Para solicitar esta autorización utilizaremos el Diálogo OAuth.

Cada vez que se utiliza el diálogo OAuth, podremos pasarle información al diálogo acerca de la los permisos de acceso que autorizará el usuario. Te recomiendo que revises la lista de todos los posibles permisos. Además, ten en cuenta que cuantos más permisos solicites a un usuario, menor será el número de personas que decidan autorizar a tu aplicación.

Existen dos métodos posibles de autenticación: Desde el servidor, o desde el cliente. Pero, para simplificar, podemos decir que son equivalentes el uno al otro.

4. Graph API

El nucleo de Facebook es un grafo social, donde cada persona, foto, evento o página tiene su ID único, y donde existen conexiones entre todos ellos (por ejemplo, amistades, etiquetas en fotos, contenidos compartidos, etc.).

Para acceder a las propiedades de cualquiera de estos objetos accederemos a la URL: https://graph.facebook.com/ID cambiando ID por el identificador del objeto que queramos consultar. Como resultado, nos devolverá un objeto JSON.

Por ejemplo, al comienzo de este artículo creamos una aplicación. Puedes coger el App ID de tu aplicación y acceder a su información. Te saldrá algo similar a esto:

{
   "id": "256797284360192",
   "name": "chusete demo",
   "description": "Aplicaciu00f3n de pruebas de Chusete",
   "category": "Utilities",
   "subcategory": "News",
   "link": "http://www.facebook.com/apps/application.php?id=256797284360192"
}

En el caso de los usuarios y de las páginas, cuando tengan un alias, se podrá usar como alternativa al ID.

Por supuesto, todas estas peticiones devuelven por defecto tan solo la información pública de ese objeto/persona. Para acceder a información privada, debemos contar con su autorización. Esta autorización se proporciona mediante el parámetro GET access_token.

5. Open Graph Protocol

Esto no es una tecnología del core de Facebook propiamente dicha, pero sí es algo sobre lo que se apoya. ¿De qué se trata? Voy a explicarlo mediante un ejemplo. Supón que creas una página web de restaurantes, donde cada uno tiene su propia URL. Un día un usuario comparte esta URL en Facebook. ¿Qué ocurrirá? Que Facebook elegirá la información y las imágenes que él considere relevante. Pero, ¿y si quisiéramos nosotros decirle a Facebook (y otras redes sociales) la información que debe mostrar? Para dar respuesta a eso surge el protocolo Open Graph.

En otras palabras: Hace que nuestras páginas web se conviertan en objetos “del mundo real” con el que pueden interactuar las redes sociales. Películas, restaurantes, celebridades, etc.

En el caso concreto de Facebook, además, cuando un usuario haga clic en el plugin del botón “Me gusta” de una de tus páginas, será equivalente a que hiciera clic en “Me gusta” de alguna de las Facebook Pages, por lo que podrás enviarle actualizaciones a su Feed. Mola, ¿no?

Su funcionamiento no podría ser más sencillo. Open Graph Protocol está basado en RDFa, por lo que mediante etiquetas meta puedes añadir semántica a tus páginas. Además, para una correcta integración con Facebook, debes añadir el plugin del botón “Me gusta”.

Para más información, revisa la página oficial de Open Graph Protocol: http://ogp.me/

6. Otras tecnologías

Además de todas las tecnologías que hemos visto, existen otras de tipo avanzado que, por lo general, no será necesario usarlas. En concreto estaríamos hablando de:

• FQL. Facebook Query Language, o Lenguaje de consultas de Facebook. Similar a SQL, sirve para consultar los datos que ofrece Graph API.
• API de internacionalización. Mediante esta API puedes aprovechar la infraestructura de internacionalización de Facebook para tu aplicación.
• API de créditos. Para que los usuarios puedan realizar pagos de créditos de Facebook para utilizar en tu aplicación.
• API de publicidad. Permite crear y gestionar mediante código tus campañas publicitarias.
• API de Chat. Para aquellos desarrolladores que quieran integrar el chat de Facebook en sus aplicaciones, mediante el protocolo estándar Jabber/XMPP.

APIs obsoletas. Además, existen determinadas APIs que han quedado obsoletas y a las que pronto Facebook dejará de dar soporte, como la API REST, el lenguaje de marcado FBML, o la API JavaScript.

SDKs

Por último, vamos a repasar los distintos kits de desarrollo que nos regala Facebook. Cabe destacar que no es imprescindible utilizarlos, ya que podremos realizar la autenticación, invocación de diálogos, o las llamadas a la API a mano. Pero, como podrás imaginar, resulta mucho más sencillo utilizar una herramienta ya probada que lo haga por nosotros.

Existen cuatro SDKs:

1. JavaScript SDK.
2. PHP SDK.
3. iOS SDK (iPhone & iPad).
4. Android SDK.

Aquí vamos a hablar de los dos primeros.

1. JavaScript SDK

Permite realizar llamadas a la Graph API, crear diálogos, renderizar los Social Plugins, además de otras muchas cosas. Para usar el SDK, debemos  intrducir el siguiente código a nuestra aplicación:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'ID DE TU APP',
    status : true, // comprobar estado de login
    cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
    xfbml  : true, // ejecutar código XFBML
    channelURL : 'http://WWW.MIDOMINIO.COM/channel.html', // fichero channel.html
    oauth  : true // habilita OAuth 2.0
  });
</script>

Y en el fichero channel.html añades el siguiente contenido:

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

Y ya lo tienes. Tu página está preparada para ejecutar código del SDK JavaScript de Facebook.

2. PHP SDK

El SDK oficial para PHP de Facebook es un proyecto open source que se encuentra alojado en GitHub:  https://github.com/facebook/php-sdk/.

Si bien existe un ejemplo básico, pero completo, sobre su uso, vamos a resumir aquí las principales operaciones:

Código de inicialización:

require 'php-sdk/src/facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'TU_APP_ID',
  'secret' => 'TU_APP_SECRET',
));

// Obtener ID de usuario
$user = $facebook->getUser();

Llamada a la API (Graph API):

if ($user) {
  try {
    // Procedemos sabiendo que tenemos un usuario que ha iniciado sesión y concedido permisos.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}

Obtener URLs de inicio de sesión y de salida:

if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl();
}

Resumen

Este ha sido un post bastante extenso, al que le seguirán otros con distintos casos de uso. Por lo pronto, hemos visto que es posible implementar distintos tipos de aplicaciones para Facebook: para el móvil, para una página web, y empotradas en Facebook. Hemos revisado paso a paso el proceso de alta de una nueva aplicación, donde establecemos los parámetros básicos, el nombre, logo, descripción, etc. También hemos revisado todas las tecnologías que nos ofrece Facebook para desarrollar aplicaciones en su ecosistema: Social Plugins, Diálogos, Autenticación y permisos, Graph API y Open Graph. Por último, hemos repasado las distintas bibliotecas que nos da Facebook para facilitar el desarrollo de aplicaciones en JavaScript, PHP, iOS y Android, centrándonos en las dos primeras.

Ahora que conocemos bien todo marco de trabajo sobre el que se apoyan las aplicaciones en Facebook, estamos listos para comenzar. En el siguiente post realizaremos una pequeña aplicación que sirva como demo de todos estos conceptos.