Usar JSON para mostrar Twitter

¿Un poco más sobre JSON? Es una pregunta retórica porque acá vamos con un poco más sobre JSON. En realidad, no sólo porque es una forma bastante cómoda de leer contenidos de la web sino porque en Blogger es uno de los pocos métodos que podemos implementar a la hora de acceder a ciertos datos.

No todas las webs poseen esa posibilidad pero, por lo general, los servicios más importantes permiten que usemos este sistema. Uno de ellos es Twitter y eso, lo hacemos accediendo a su API que es la misma que utilizan todos los widgets.

Cuando accedemos a la URL de ese API, lo que nos devuelve es una serie de datos ¿Qué datos? Una forma fácil de verlos es utilizar una de las heramientas de Json Format; allí en el cuadro Load JSON Data from URL podemos colocar la dirección que queremos verificar y al hacer click en Process, nos mostrará el resultado es decir, los datos a los que podemos acceder.

En este caso, pondremos esta URL:

http://api.twitter.com/1/users/show.json?screen_name=nombreusuario

donde reemplazaremos nombreusuario por el nombre de nuestra cuenta en Twitter así que, en mi caso, en el cuadro Formatted JSON Data se mostrará algo así:

{ "contributors_enabled" : false,
  "created_at" : "Wed Sep 10 05:57:39 +0000 2008",
  "description" : "Lo bueno de Twitter es que sirve para hablar solo ... y que no te tomen por loco ...",
  "favourites_count" : 14,
  "follow_request_sent" : false,
  "followers_count" : 1213,
  .......
  "name" : "vagabundia",
  "notifications" : false,
  .......
  "profile_image_url" : "http://a0.twimg.com/profile_images/59754928/Avatar90x90_normal.png",
  .......
  "screen_name" : "vagabundia",
  "show_all_inline_media" : false,
  "status" : { "contributors" : null,
    "coordinates" : null,
    "created_at" : "Wed Nov 03 03:00:12 +0000 2010",
    .......
    "text" : "BLOGGER:  tubePlayer: Nueva versión del reproductor http://goo.gl/fb/4FEeL",
    "truncated" : false
  },
  "statuses_count" : 3097,
  .......
  "url" : "http://vagabundia.blogspot.com/",
  "utc_offset" : -10800,
  "verified" : false
}

¿Muy raro? En realidad, no tanto si es que hemos entendido cómo funciona este coso. La primera palabra de cada línea es el nombre del dato y lo que está después de los dos puntos, es el dato en si mismo así que, "screen_name" : "vagabundia" significa que el nombre de mi cuenta está guardado en un dato llamado screen_name así que, podría llerlo con JavaScript; ese ytodos lod demás.

Vamos a verlo paso a paso; necesito llamar a ese API desde el blog así que pongo algo así antes de </body>, al final de mi plantilla para que se ejecute sin molestar al resto:

<script src="http://api.twitter.com/1/users/show.json?screen_name=nombreusuario&amp;alt=json-in-script&amp;callback=leerTwitter"></script>

Como en los ejemplos anteriores, coloco en callback, el nombre de la función que voy a utilizar para interpretar o manipular los datos leidos así que, antes de </head> (o antes de ese script), colocaré mi función:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  // aquí es donde leeré los datos y haré algo con ellos
}
//]]>
</script>

¿Cómo sé cuáles son los datos? Es lo que nos mostró la herramienta así que, en esa función, la variable json contiene todo eso y accedemos a cada uno de ellos de este modo:

json.description contendrá la descripción de la cuenta
json.followers_count la cantidad de seguidores
json.screen_name es el nombre de lacuenta
json.statuses_count la cantidad de tweets enviados

Esos son faciles pero hay otros que tienen "subdatos", para leer esos, basta agregar un punto y seguir leyendo a sí que:

json.status.text contendrá el texto del último tweet que hayamos enviado

Sabiendo esto, entonces, puedo llenar al función para hacer algo y mostrar esos datos; por ejemplo:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  var salida ="";
  salida += "<h5><img src='" + json.profile_image_url + "' />" + json.screen_name + "</h5>";
  salida += "<small>" + json.description + "</small><p>" + json.status.text + "</p>";
  document.getElementById("mitwitter").innerHTML = salida;
}
//]]>
</script>

o esta otra que mostrará la cantidad de seguidores:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  var salida ="";
  salida += json.followers_count + "<small>seguidores</small>";
  document.getElementById("misseguidores").innerHTML = salida;
}
//]]>
</script>

En ambos casos, lo que necesitamos es un DIV o etiqueta con un ID así que alli donde querramos mostrarlo, pondremos:

<div id="mitwitter"></div>

o bien:

<div id="misseguidores"></div>

En resumen, el orden es siempre el mismo; primero la función, luego el DIV con el ID exclusivo donde se mostrarán los datos y por último, el script que carga el API.