Una vez estaba en la cocina preparándome un café cuando de repente me bajó la inspiración y decidí hacer una aplicación Facebook. La investigación fue ardua, hice las pruebas de concepto respectivas y logré mi cometido. Sin embargo, por cosas de tiempo no  terminé la aplicación para variar y quedó stand by hasta el próximo semestre.

Hace unos días, me pidieron ayuda para hacer lo mismo usando lenguaje FBML y recordé lo que ya había realizado. Pero como la memoria es frágil decidí utilizar a nuestro amigo Google para resolver algunas dudas que tenía. Para mi sorpresa, no encontré lo que necesitaba, así que por lo tanto decidí hacer un Tutorial en lenguaje humano para que todos los desarrolladores entendamos como es que debemos hacer una aplicación para Facebook compatible con la versión actual. Así que, manos a la obra!

Como funciona una aplicacion Facebook?

Facebook soporta dos formatos de aplicaciones externas, aplicaciones creadas usando FBML y las que usan el no estandar iframe. Para este tutorial nos enfocaremos en la creación de aplicaciones usando FBML, ya que es una opción importante cuando se necesita usar las gráficas y herramientas de Facebook nativas.

Antes de seguir les recomiendo leer el Tutorial que Facebook dispone como introducción para que entiendan con mayor claridad, luego de eso, sigan con la este tutorial.

Ingredientes

• Tener conocimientos de HTML, CSS y de PHP
• Contar con un hosting y dominio para subir la aplicación
• Librerias cliente PHP de Facebook – Que puedes descargar aquí
• Ser parte de Facebook Developers – Si no eres parte, debes ingresar en App Developers
• Un objetivo de aplicación, por ejemplo: “Una aplicación para mostrar mi último mensaje de twitter!”

Creando la aplicacion

Como ya contamos con todos estos nuestros ingredientes podemos comenzar con la creación de la aplicación.

Lo primero en el menú es Configurar una nueva aplicación, esto lo podemos hacer en la App de Developers de Facebook  haciendo click en el botón “+ Configurar una nueva aplicación” o, si estás más atento, haciendo click en el link anterior.
Acá entraré en detalle para guiarlos mejor:

• Escribimos el nombre de nuestra aplicación y aceptamos los términos y condiciones.
  
• La siguiente pantalla nos entrega información relacionada con nuestra aplicación y que ocuparemos para el desarrollo: Application ID, API Key, Secret. Estos valores son los que nos identifican con Facebook como aplicación y que nos permite interactuar con Facebook y los usuarios. Estos datos son sumamente importantes y nunca deben ser revelados, bueno, el nombre sí.
  
• A la izquierda tenemos un menú de configuración donde nos enfocaremos en los siguientes puntos: “Auth (Autencación)”, “Profiles (Perfiles)“, “Advanced (Avanzado)” y “Canvas (Lienzo)“.
• En “Auth (Autencación)” seleccionamos “Disponible para usuarios” y en Post-Authorize Callback URL escribimos la URL de retorno, es decir, “http://apps.facebook.com/ultimotwitterupdate/“
• En “Profiles (Perfiles)” debemos escribir el Tab Name y el Tab URL.
  En el Tab Name debemos escribir un nombre de no más de 16 caracteres (“Ultimo Update“) y en el Tab URL debemos definir la URL donde se encuentra la vista de nuestra aplicación para los perfiles (“tab“).
  El Profile Box es la forma en que se mostrara en las cajas del perfil por defecto, por ejemplo “Narrow“.
• La seccion de “Advanced (Avanzado)” nos sirve para dejar nuestra aplicación en “Sandbox Mode” y así solo los desarrolladores podrán verla. Debemos activar esta opción antes de seguir.
• En la sección “Canvas (Lienzo)” se define la URL que contiene el despliegue (layout) de la aplicación y de donde Facebook debe obtenerlo para mostrarlo. Para configurarlo vamos a escribir “ultimotwitterupdate” en la URL de la página y http://www.midominio.com/ultimotwitterupdate/ en Canvas Callback URL. Para ver los cambios realizados debemos desarrollar en forma local y subir mediante FTP.
  Luego, en la sección donde dice “Render Method (Método de renderización)” debemos seleccionar FBML, los otros datos quedan por defecto.
• Guardamos los cambios.

A ensuciarse las manos

Ahora es cuando viene la parte mas entretenida de la historia, el desarrollo de la aplicación.

Pero, un momento…no tengo idea de que debe hacer la aplicación! Mejor investigo todo lo necesario en base al objetivo planteado y luego, defino la conclusión.

El proceso anteriormente nombrado dio como resultado dos objetivos más específicos:

• “Debo usar la API de Twitter para traer el último mensaje de un usuario en formato JSON”
  Pero, y cómo? Del siguiente modo, usamos la API de Twitter para llegar a la información de algún usuario:
  http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USUARIO_TWITTER&count=1
• “El usuario Facebook elige el nombre de usuario y se almacena en una base de datos (SQLite)”.
  Listo! Ahora que tengo claro lo que debo hacer voy a dedicarme al layout en Facebook, porque si quiero realizar la aplicación primero debo saber verla funcionando.

Para esto, tenemos que conocer un poco más de FBML, así que les dejo la misión de leer sobre este lenguaje en el Wiki de Facebook.

Preparar bien la mesa

Antes de partir con el sitio debemos configurar un archivo que permita la comunicación entre Facebook y la aplicación. Dicho archivo se llama “xd_receiver.htm” y es un archivo que va en la raiz del sitio. Su contenido es el siguiente:

<!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>

Si quieren leer más sobre esto pueden hacerlo en el Wiki de Facebook: Cross-Domain Communication Channel

“Aunque no venia preparado”

Ahora viene lo importante. Yo sé que ustedes esperan que explique todo el código de conexión y de configuración para la App Facebook, pero les quiero contar que me adelanté y les traje una especie de framework que les facilitará muchas de las tareas. Este framework se creó en base a otras aplicaciones que tenía desarrolladas y que me hicieron pensar en la real ayuda de este tutorial, su nombre es “Fracework” y lo pueden revisar en: http://code.google.com/p/fracework/

Esta suerte de framework, permite configurar la aplicación y crear las vistas. Probablemente cuando lo vean no va a ser lo que esperan a nivel de código, pero estoy seguro que les va a ser muy útil.

El contenido de Fracework tiene la siguiente estructura de archivos:

• client/ : Libreria cliente PHP de Facebook
• config/ : Archivo de configuraciones de la aplicación
• includes/ : Conexión con facebook, instancia de clase clientes
• modules/ : Modulos de la aplicación
• views/ : Vistas de la aplicación
• index.php : Archivo que muestra las distintas vistas
• xd_receiver.htm : Cross-Domain Communication Channel

Para utilizarlo solo deben descomprimir el archivo en la carpeta de la aplicación y comenzar a desarrollar.

Configuracion

En la carpeta “config“, de nuestra aplicación, nos encontramos con el archivo de configuraciones de la aplicación “facebook.php“, acá editamos los datos de nuestra aplicación y guardamos:

<?php
/**
* Facebook App client
* @author @alvaroveliz
**/

$fb_apikey        = '...'; // Configurar API KEY
$fb_secret        = '...'; // Secret Key
$app_callbackurl  = 'http://www.midominio.com/ultimotwitterupdate/'; // APP Canvas URL
$canvas_url       = 'http://apps.facebook.com/ultimotwitterupdate/'; // Canvas URL

?>

Recuerdan que les comente en la creación de la aplicación sobre los datos “importantes”, bueno, acá es donde se deben configurar.

Hello World

En la carpeta “views” encontramos 3 archivos:

• default.php: Vista general de la aplicación
• profile.php: Vista de caja caja en el perfil
• global.php: Vista de tab  (cuadro) en el perfil (narrow y wide)
• Las vistas personalizadas se agregan en la carpeta “views” y se ven usando el parámetro “section”. Por ejemplo “index.php?section=help” mostrará la vista help.php

Ahora, para hacer la prueba de “Hello world”, editamos el archivo default.php y agregamos “<h1>Hello facebook app</h1>” como dice el código:

<fb:fbml version="1.0">
<h1>Hello facebook app</h1>
</fb:fbml>

Subimos al servidor nuestra aplicación y vamos a la dirección http://apps.facebook.com/ultimotwitterupdate/, en esta dirección vamos a ver nuestra aplicación creada, pero antes debemos agregarla a nuestro perfil.

Luego de agregarla, la aplicación nos mostrará el siguiente resultado:

Agregando el boton para perfil

Como ya tenemos nuestra aplicación andando, podemos agregar un código FBML que nos permitirá llegar más lejos aún. Por ejemplo, con la siguiente linea podremos agregar un botón que permitirá agregar nuestra aplicación como caja en el perfil.

Editamos el archivo de vistas “default.php” y agregamos:

<fb:add-section-button section="profile" />

Esto nos da el siguiente resultado:

“Guayerfreims”

Ahora que tenemos andando la aplicación, nos vamos a enfocar en nuestro ejemplo.

El layout de nuestro ejemplo debe preguntar cual es el nick del usuario en twitter, para que traiga dinámicamente el último update, luego deberá mostrarlo. (Como consideración, el usuario no debe tener sus updates protegidos)

Está sería la disposición del despliegue:

El modelo de datos

Luego que hicimos nuestros layouts en papel, nos debemos enfocar en el modelo de datos. En nuestra base de datos debemos guardar la información que nos permita relacionar usuario de facebook y usuario twitter, esta podría ser la mejor opción: “id de usuario de facebook”, “nombre usuario de twitter”, “mensaje ultimo update”, “fecha y hora de ultima consulta”.

La única tabla que necesito la nombraremos como “last_updates“:

• id:integer(11), PK
• facebook_user:integer(11)
• twitter_username:varchar(30)
• last_update:varchar(140)
• last_query:datetime

La instrucción SQL sería del siguiente modo:

CREATE  TABLE "last_updates" ("id" INTEGER PRIMARY KEY  NOT NULL , "facebook_user" INTEGER NOT NULL , "twitter_username" VARCHAR(30) NOT NULL , "last_update" VARCHAR(140) NOT NULL , "last_query" DATETIME NOT NULL )

El código da App

De acuerdo a los “wireframes” el código de la vista por defecto será del siguiente modo:

Vista default.php

<fb:fbml version="1.0">

	<fb:dashboard>
		<fb:help href="index.php?section=help">Ayuda</fb:help>
	</fb:dashboard>

	Ingrese el nick del usuario (el usuario no debe tener los updates protegidos)
	<br />
	<form name="save_user" method="post" action="">
		<input type="text" id="twitter_user" name="twitter_user" size="20" /> <input type="submit" value="Definir usuario" />
	</form>

	<div id="update-quote">
	</div>

	<br />
	<fb:add-section-button section="profile" />

</fb:fbml>

Vista global.php

<fb:narrow>

	<div id="update-quote">
		Narrow View
	</div>

</fb:narrow>

<fb:wide>

	<div id="update-quote">
		Wide View
	</div>

<fb:wide>

Vista profile.php

<div id="update-quote">
</div>

Con un poco de estilos podríamos llegar a nuestro objetivo con mayor efectividad, pero por el momento solo haré el ejemplo con una aplicación casi por defecto.

El módulo “app.php”

Para habilitar los módulos que vamos creando, se debe editar el archivo “config/app.php” y agregar al arreglo el nombre de la app, por ejemplo:

$modules = array(
'app', // Modulo de Aplicacion
);

Este módulo se encarga de realizar todas las conexiones con Twitter y la base de datos para almacenar la información.A grandes rasgos se compone de funciones como:

• get_twitter_data : Que obtiene la información de Twitter usando cURL
• set_user_data : Que guarda la información del usuario que agrego la aplicación
• get_user_data : Que obtiene la información de un usuario
• update_user_data  : Que actualiza la información del usuario utilizando la información de Twitter.

A probar la aplicación

Luego, que está todo listo, subo a producción y hago las pruebas necesarias para evitar errores. No está demás decir que a medida que realizo el diseño y el desarrollo siempre se deben hacer updates, porque es como estar trabajando a ciegas.

Para probar la aplicación ingresen a: http://apps.facebook.com/ultimotwitterupdate/

Deje reposar 5 minutos y sirva

Luego de todo este desarrollo podemos sacar como conclusión que Facebook es una de las Redes Sociales más potentes por la facilidad en que se pueden desarrollar aplicaciones y la capacidad de integración que se puede obtener.

Si bien el desarrollo no es muy cómodo, es muy simple la forma en que se pueden agregar elementos propios de Facebook, esto lo hace una herramienta ágil.

Finalmente, les dejo la misión de leer mucho sobre lo nuevo que se viene para el desarrollo de aplicaciones en Facebook y además de que le pierdan el miedo a crear aplicaciones nuevas.

Muchas gracias por su tiempo, espero que este plato haya sido de su agrado.

Hace mucho tiempo que circulo por foros de internet, el que más visito es Tarreo y como usa Invision Power Board, no puedo poner una firma con imágenes dinámicas. Es por esto que tuve que acudir a una solución, hacer una imágen dinámica que pudiera ser vista en cualquier foro invision protegido.

Para lograr este objetivo necesitaremos los siguientes ingredientes:

• Tener cuenta Twitter (publica, con protección de twitts no sirve)
• Saber PHP
• Conocer la librería GD (para PHP)
• SimplePie
• Servidor para hostear la imagen (con soporte curl)
• Conocer de .htaccess

La idea es utilizar SimplePie para que se lea el RSS de mi cuenta para que con PHP + GD se genere una imagen dinámica, luego con el .htaccess se redireccionan todos los archivos .jpg a.php (esta es la joda para tinelli)

Preparación:

1. Descargar el amigable SimplePie de su sitio web (vamos a utilizar el archivo simplepie.inc.php solamente)
2. Creamos el archivo twitter.php (con vim, gedit, eclipse, textmate o lo que se les ocurra) con el siguiente código:

   <?php
   require 'simplepie.inc.php';
   // Configuraciones
   $feed_url    = "http://twitter.com/statuses/user_timeline/MI_RSS_DEL_TIMELINE.rss";
   $feed        = new SimplePie($feed_url);
   // Configuraciones de la imagen
   $im          = imagecreatetruecolor(320, 60);
   $text_color  = imagecolorallocate($im, 0, 0, 0);
   $tw_color    = imagecolorallocate($im, 56, 204, 255);
   $bg_color    = imagecolorallocate($im, 255, 255, 255);
   // Despliegue
   imagefilledrectangle($im, 1, 1, 318, 58, $bg_color);
   imagestring($im, 2, 5, 5, 'Twitter', $tw_color);
   // Me traigo el ultimo tweet
   foreach ($feed->get_items(0, 1) as $item)
   {
      $twitt = $item->get_title();
   }
   // Lo corto y le hago wordwrap
   $twitt = wordwrap($twitt, 58, '\n');
   $twitt_texts = explode('\n', $twitt);
   foreach ($twitt_texts as $i =>; $t)
   {
      imagestring($im, 1, 55, 14*($i+1), $t, $text_color);
   }
   // Muestro la imagen
   header('Content-type: image/jpeg');
   imagejpeg($im, NULL, 100);
   imagedestroy($im);
   ?>

3. Luego, debemos redireccionar los request a archivos JPG a PHP utilizando un .htaccess

   RewriteEngine On
   RewriteRule ^(.*\.jpg(/.*)?)$ twitter.php [L,QSA]

4. Ahora lo subes a tu servidor y lo revisas, deberia ser algo como:
   

Deje cocinar a fuego lento.
Sirva acompañado con galletas de salvado.

Claramente podemos aplicarnos mucho más en el código, pero esto salio de improviso y fue relativamente rápido.

<?php
require 'simplepie.inc.php';
// Configuraciones
$feed_url    = "http://twitter.com/statuses/user_timeline/MI_RSS_DEL_TIMELINE.rss";
$feed        = new SimplePie($feed_url);
// Configuraciones de la imagen
$im          = imagecreatetruecolor(320, 60);
$text_color  = imagecolorallocate($im, 0, 0, 0);
$tw_color    = imagecolorallocate($im, 56, 204, 255);
$bg_color    = imagecolorallocate($im, 255, 255, 255);
// Despliegue
imagefilledrectangle($im, 1, 1, 318, 58, $bg_color);
imagestring($im, 2, 5, 5, 'Twitter', $tw_color);
// Me traigo el ultimo tweet
foreach ($feed->get_items(0, 1) as $item)
{
   $twitt = $item->get_title();
}
// Lo corto y le hago wordwrap
$twitt = wordwrap($twitt, 58, '\n');
$twitt_texts = explode('\n', $twitt);
foreach ($twitt_texts as $i =>; $t)
{
   imagestring($im, 1, 55, 14*($i+1), $t, $text_color);
}
// Muestro la imagen
header('Content-type: image/jpeg');
imagejpeg($im, NULL, 100);
imagedestroy($im);
?>