La verdad es que desde la aparición de Facebook Graph Api me he quedado un poco atrasado en cuanto a lo que te ofrece y deja de ofrecer Facebook a día de hoy. Por eso he querido dar un repaso de nuevo desde 0 al desarrollo de aplicaciones y elementos de Facebook. Este post es por un lado una forma de obligarme a entender todos los detalles y por otro una pequeña guía para empezar desde 0 a entrar en este mundillo.

Paso 1, dar de alta una pagina o una aplicación

En Facebook básicamente podemos crear páginas de Facebook (de tiendas, negocios, lugares, personalidades, conceptos, etc.) o programar nuestras propias aplicaciones de Facebook que puedan usar los ususuarios.

Páginas: Para dar de alta una página en facebook tiene que estar siempre asociada a un usuario de Facebook «real». La forma más sencilla de hacerlo es salir de tu sesión y en vez de logarte en Facebook entrar para crear una página.

Las páginas en cuanto a desarrollo nos ofrecen simplemente la creación de varias pestañas en FBML, que son html corriente pero en las que podemos usar el código FBML de Facebook.

Aplicaciones: Para dar de alta una aplicación debes hacer que tu usuario de Facebook añada la aplicación Facebook Developers y a partir de ahí ya podemos crear distintas aplicaciones.

En cuanto a desarrollo cada aplicación nos ofrece 3 modos distintos en los que funcionar y luego -aparte- la creación de pestañas de la aplicación. Algunos son complementarios (pueden usarse a la vez).

1- Aplicación en «Canvas»: Son la mayor parte de las aplicaciones que conocemos. Estas aplicaciones quedan totalmente integradas en Facebook de forma que es el propio Facebook el que muestra la página.

2- Aplicaciones en «Iframe»: Este es un pequeño truco para aquellos que necesitan que su aplicación se vea en Facebook pero no necesitan interactuar directamente con su sistema. Creando una aplicación de este tipo lo que creamos es un IFrame hacia nuestra página de destino y a partir de ahí nos olvidamos de Facebook.

3- Aplicaciones mediante la Facebook Graph Api SDK Javascript: Este es el sistema javascript que ha venido a sustituir a Facebook Connect y que nos permite disponer de la integración con Facebook y el tipo de funciones que nos dan en Canvas pero en cualquier web que deseemos.

2+3 – Muchos desarrolladores deciden usar la opción 2 y la 3 a la vez mostrando una pagina que nada tiene que ver con Facebook con un Iframe y luego añadiendo las funcionalidades de Facebook con el SDK de javascript.

– Además, ya sea por iframe o por canvas, para cada aplicación disponemos de la posibilidad de crear una pestaña de Facebook que añadir a cualquier página y que tiene parte de ambas cosas: por un lado la carga de nuestro servidor por lo que no es simplemente FBML (podemos programarla por detrás con nuestro lenguaje de servidor), por otro no dispone de datos de usuario con lo que la integración es menor que con cualquier aplicación (aunque similar a cualquier pestaña).

¿Página + Aplicación? Depende de lo que vayamos a hacer es bastante probable que necesitemos usar ambas cosas a la vez. Veamos un escenario típico: debo llevar una página de Facebook de una marca y creo también una aplicación relacionada con su temática. Lo suyo es que acabe dando de alta una pestaña de la aplicación y en la página y desde ella los usuarios de la página puedan acceder a la aplicación. Lo bueno de hacerlo de esta forma es que las pestañas de tu página de facebook pasan a otro nivel, donde puedes controlarlas desde tu servidor mucho más que simplemente con FBML.

Paso 2, Configuraciones de todo esto

Configurar una página de facebook no tiene mucho misterio. Quizás quieras echar un ojo a la Guia para community managers en Facebook para ver como orientarla.

Un vez creada una página podemos acceder a la misma y a «Editar Página». Ahí podremos añadir pestañas FBML añadiendo la aplicación «FBML Estático» a tu página y configurandola.

En cuanto a las aplicaciones tienen un poco más de miga. Al visualizar el panel de nuestra aplicación vemos un menú a la derecha en el que encontramos el elemento «Editar configuración». Ahí es donde escogemos el comportamiento base de nuestra aplicación. Veamos los elementos a configurar más importantes (aunque es mejor intentar entenderlos todos):

Básico > Nombre de la aplicación: Aquí escogemos nuestro nombre de aplicación, para el que disponemos de 20 carácteres.

Básico > Descripción: Esta parte nos puede ayudar en el SEO de Facebook; las búsquedas de aplicaciones que hagan los usuarios mostrarán y se basarán en esta parte.

Básico > Icono y Logotipo: Importantes, ya que Facebook los usa para varias cosas y tu aplicación no estará completa sin ellos.

Básico > Agregar página a Favoritos: Si deseas que cuando un usuario use su link hacia tu página no entre directamente en su home, sino en otra parte, indícala aquí.

Autenticación > Instalación posible para : Seleccionando Usuarios, estos podrán usar tu aplicación añadiéndola como pestaña o solo como link, seleccionando páginas, permites a las páginas que añadan también tu aplicación como pestaña (importante si vamos a usar una combinación de página + pestaña).

Autenticación > URLs de redireccionamiento tras autenticación: Estas urls, que deben estar en tu servidor, le sirven a Facebook para avisarte cada vez que alguien se da de alta o baja en tu aplicación. Facebook te hace un ping con distintos parametros por post a esta url para avisarte. Usando al menos la primera de ellas -Post-Authorize- nos ahorramos problemas de validación de nuestra página (por lo que es mejor usarla).

Perfiles > Nombre de la pestaña: Si queremos que nuestra aplicación pueda ser una pestaña de Facebook indiquemos aqui el nombre.

Perfiles > URL de pestaña: Si queremos que nuestra aplicación sea una pestaña de Facebook tenemos que rellenar este dato indicando la url de nuestro servidor de la que sacar la página.

Perfiles > Editor de perfil: Si queremos que nuestra aplicación se le ofrezca a los usuarios como un tipo de publicación nueva a realizar debemos indicar esta información.

Lienzo > Dirección web (URL) de la página de lienzo: Aquí indicamos el directorio Facebook de nuestra aplicación. Esta funcionará ligada a nuestra url real del servidor, de forma que al cargar directorios o archivos dentro de esta url, en realidad se solitarán a la misma ruta pero en nuestro servidor.

Lienzo > Canvas Callback URL: Aquí indicamos la url de nuestro servidor a la que debe solicitarnos las páginas.

El uso de estos dos parámetros es esencial para dar cuerto a nuestra aplicación. Si por ejemplo yo indico en dirección web «mi-aplicacion» y en Canvas Callback «http://midominio.com/appFacebook/» al cargar la aplicación facebook irá a buscar el contenido a «http://midominio.com/appFacebook/» y al cargar una pagina interna como podría ser «/mi-aplicacion/undirectorio/unproceso.php» facebook irá a buscarla a «http://midominio.com/appFacebook/mi-aplicacion/undirectorio/unproceso.php».

Esto también afecta a la pestaña, definida en «Perfiles > URL de pestaña» que también debe definirse partiendo de lo definido en «Canvas Callback».

Lienzo > Redirección de URL post-autorizada: Cuando un usuario acaba de aceptar tu aplicación se redirigirá a esta url (que también parte de «Canvas Callback»).

Lienzo > Método de renderización: Aquí es donde escogemos si nuesta aplicación y pestaña debe trabajar como canvas o como iframe. Siempre es más recomendado (y por lo general más sencillo) usar canvas.

Connect : Nos sirve para indicar como interaccionar con Facebook cuando creamos una aplicación de Facebook desde nuestra página (o mediante iFrame) con el SDK Javascript.

Paso 3, integrando nuestro sistema

Este paso no tiene sentido en páginas de Facebook solo en aplicaciones.

En aplicaciones existen dos formas de integrar facebook en nuestro sistema. Si nuestra aplicación está derrollada en Canvas querremos usar la Facebook Graph Api en nuestro servidor con el SDK apropiado:
Javascript SDK, PHP SDK, Python SDK, iphone SDK o Android SDK.

El uso de estos SDK, con la nueva Facebook Graph Api, se ha vuelto muy simple, de forma que la única referencia que vamos a necesitar es como se conforman los nodos de la Graph Api. Sí, tendremos que aprender a autenticarnos y a llamar a la función Api, pero se ha vuelto mucho más sencillo que antes.

Paso 4, visualización

La visualización de nuestras aplicaciones en un principio es por HTML, por lo que no vamos a tener demasiadas complicaciones. Si trabajamos con pestañas o con aplicaciones dentro de facebook tenemos que tener en cuenta el ancho de páginas antes de ponernos a diseñar nada pero por lo demás todo es suele ser en el desarrollo web, con una excepción: el FBML.

El FBML es una ayuda que nos da Facebook en la visualización y uso de nuestras pestañas y aplicaciones. Son etiquetas XML parecidas al XSL pero con la particula «fb:» delante de cada una. Facebook interpreta estas etiquetas, ya sea al cargar nuestra web mediante canvas o con la javascript SDK -pero no simplemente por cargar una página por iframe- y las transforma en lo que deberían ser.

Las etiquetas FBML se encuentran bien documentadas aquí. En otro artículo espero poder dar un repaso a las más vistosas y útiles, pero este artículo ya empieza a ser muy largo para tratarlas como se merecen.

—

Con estos pasos ya podremos disfrutar de toda la integración con Facebook que deseemos. Una vez entendido el sistema es bastante simple ponerse a trabajar y con la nueva api todo se vuelve más rápido, lógico y sencillo.