Crear un gadget de Facebook usando Json (1)

Muchas veces hablamos de los feeds de un sitio web ¿que son? En realidad, nada especial, son, como todo lo que vemos en internet, archivos de alguna clase, una serie de "números" ordenados de alguna forma que los navegadores interpretan y nos muestran de acuerdo a ciertas reglas universales; el resultado, será una imagen, un video, un texto o ... un feed.

Ese "orden" en que está escrito, define su contenido. Un feed es un archivo de tipo XML, es decir, un texto con etiquetas especiales que es generado por el servidor (Blogger, YouTube, Twitter o cualquier otro) y que contiene los datos de nuestro blog o de un sitio determinado; bien podría decirse que es un "resumen" del contenido de un sitio que nos permite acceder a esa información y visualizarla directamente en el navegador o, lo que es más común, utilizando algún software especial.

Si colocamos la URL de un feed en la mayoría de los navegadores, estos lo interpretarán y mostrarán su contenido como si fuera una página web minimizada. Chrome, por el contrario, mostrará su código, es decir, el texto del archivo cosa que también podemos ver en todos los otros, si les solicitamos ver el código fuente de la pagina.

Si hacemos eso, veremos una serie de etiquetas que dependerán del formato de ese archivo de feeds ya que hay varios sistemas (Atom, RSS2) algunos más simples y otros mucho más complejos pero, lo básico es siempre similar. Cada entrada se encuentra contenida entre las etiquetas <item> </item> o <entry> </entry> dentro de la cual hay otras con el título, la fecha, el autor, etc.

<entry>
  <title> xxxxxxx </title>
  <link> xxxxxxx </link>
  <published> xxxxxxx </published>
  <content> xxxxxxx </content>
</entry>

Todo es teoria ya que, en realidad, si bien hay una cierta normalización de esos datos, cada sistema puede (y lo hace) agregar etiquetas o atributos especiales; por eso es que muchos de ellos incluyen documentación extra donde nos dicen cuáles son los datos y cómo debemos interpretarlos. Para eso, para interpretarlos, se usan diferentes lenguajes; en Blogger, las cosas no son tan fáciles ya que sólo podemos usar JavaScript que tiene sus limitaciones y es ahí donde entra a jugar el misterioso Json que es una palabrita que vemos constantemente y a través de la cual se arman la gran mayoría de los gadgets que utilizamos.

En este caso, podríamos decir que Json que no es otra cosa que un ese mismo archivo de feeds, "re-armado" con un formato diferente adaptado, justamente, para que podamos leerlo con JavaScript. Cuando solicitamos que se cargue un archivo de feeds en formato Json, lo que obenemos es una serie de variables ordenadas con el contenido y leerlas es fácil, el problema está en "saber" cuales son esas variables ya que pueden ser muy variadas.

Una herramienta que ayuda en este asunto es el llamado Google Ajax Feed API ya que nos simplifica la tarea, interpretando los datos de los distintos feeds y enviándonos datos que tienen siempre la misma estructura por lo tanto, podemos leer cualquier feed y mostrarlo como se nos de la gana.

Vamos a ver un ejemplo concreto, intentaremos mostrar nuestra página de Facebook ya que esta, dispone de un feed ¿cuál es? algo como esto:

https://www.facebook.com/feeds/page.php?format=atom10&id=XXXXXXXXXX

donde XXXXXXXXXX es el ID de nuestra página que es el que nos muestra el navegador cuando entramos en ella:

https://www.facebook.com/pages/Vagabundia/215401628483231
https://www.facebook.com/pages/Gem-BLOG/395197195477

¿No tiene un ID y sólo tiene un nombre? busquen el emlace a Notificaciones que se ve en la parte superior y copien el enlace; el ID son los números que siguen a id=:

http://www.facebook.com/Infinitos.Magazine
http://www.facebook.com/notifications?id=151205601565278

Vamos al grano. Necesitamos el script que tiene dos partes, la llamada al API de Google y una función que interpretará y mostrará los datos en un DIV con cierto ID. La función la ponemos en cualquier parte, por ejemplo, antes de </head>:

<,script type='text/javascript'>,
//<,![CDATA[
function feedFacebook(json) {
  var entry, mensaje, enlace, elResumen;
  var salida = "";
  for (var i = 0; i < json.responseData.feed.entries.length; i++) {
    entry = json.responseData.feed.entries[i];
    var mensaje = entry.title;
    var enlace = entry.link;
    var elResumen = entry.contentSnippet;
    salida += "<p>" ;
    salida += mensaje + "<br/>";
    salida += enlace + "<br/>";
    salida += elResumen + "<br/>";
    salida += "</p>";
  }
  document.getElementById('divFACEpage').innerHTML=salida;
}
//]]>,
<,/script>,

Luego, donde queramos que se muestre el resultado, un DIV vacío:

<div id="divFACEpage"></div>

Y debajo, el script que llama al API de Google:

<,script type='text/javascript'>,
//<,![CDATA[
  var URLFEED = "https://www.facebook.com/feeds/page.php?format=atom10&id=XXXXXXXXXX";
  var NUMFEED = 5;
  var archivofeeds = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num="+NUMFEED+"&output=json&q="+encodeURIComponent(URLFEED)+"&callback=feedFacebook";
  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivofeeds);
  document.getElementsByTagName('head')[0].appendChild(nuevo);
//]]>,
<,/script>,

¿Qué hace esta última? cargar el script con el API de Google indicándole la dirección del feed (URLFEED), la cantidad de entradas que queremos leer (NUMFEED) y el nombre de la función que interpretará esos datos (callback=feedFacebook)

Justamente, es esta función lo que hará la diferencia ya que, los datos serán siempre los mismos y lo que luego variará es la forma en que los mostremos. La función es un bucle que va leyendo item por item guardándolos en una variable a la que llamamos entry; como esos datos son un array, accedemos a ellos con el nombre de la variable, un punto y el nombre del dato en si mismo. El API nos dará los siguiente datos:

entry.title es el título del item (el título de una entrada de un blog o, en este caso, el mensaje que hayamos agregado) y corresponde al contenido de la etiqueta <title>
entry.link es la dirección URL de ese item y corresponde al contenido de la etiqueta <link>
entry.content es el contenido HTML de la entrada, etiquetas <content> <summary> o <description>
entry.contentSnippet es un resumen de ese mismo contenido, en formato de texto plano, es decir, sin etiquetas HTML
entry.publishedDate es la fecha en un formato similar a este "20 May 2012 10:20:30 -0300"
entry.author es el nombre del autor y en este ejemplo no existe
entry.description es un texto adicional o subtítulo que tampoco existe
entry.categories es la lista de etiquetas que tampoco existe

En este ejemplo, simplemente guardamos algunos de esos datos en otras variables y los mostramos así nomás, uno debajo del otro; el mensaje, la URL y el resumen:

Obviamente, nada especial pero, en realidad, eso es todo lo que necesitamos; sabiendo cuales son los datos, podemos armar nuestros propios gadgets, diseñando el formato en que quisiéramos mostrarlos.