Tenía ganas de escribir algo de javascript pero nunca había surgido la ocasión, y surgió, una duda de un amigo que necesitaba tener un timeline de twitter en su web para luego mostrarlo de una manera animada, así que pensé que sería una idea interesante investigar la API de twitter y cómo consumirlo vía Javascript para poder dejar una salida limpia e independiente de plugins.

API de Twitter

Lo primero es obtener información de la API de búsqueda de Twitter, para poder buscar los datos que queremos, para ello vamos aqui, donde podemos ver las diferentes maneras de realizar una petición al servicio. En este caso pediremos que el resultado se nos devuelva en formato JSON («Javascript Object Notation»), un formato ligero para intercambio de datos que nos va a venir muy bien para la ocasión.

Nota: asumimos ligero para la máquina, para lectura humana se puede hacer «duro» como puedes ver en http://search.twitter.com/search.json?q=%40rlbisbe

Recibiendo los datos con jQuery

Para este ejemplo me he apoyado en una librería/biblioteca muy conocida que es jQuery, para recibir los datos de una manera sencilla. Creamos una web en blanco y agregamos la referencia a jQuery y al fichero que emplearemos:

<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="tweets.js" type="text/javascript"></script>

Lo primero es decirle a jQuery cuándo cargar el enlace, para lo cual una buena práctica consiste en esperar a que la web cargue, es decir

$(document).ready(function() {...});

Seguidamente definimos una variable que contendrá el nick del usuario que queremos consultar, y llamamos a la función que procesará esta información, junto con la url de la api de twitter que hemos obtenido antes, revisando la documentación. En este caso nos limitamos a los 5 ultimos tweets:

var twitter_user = 'rlbisbe'
$.getJSON( 'http://search.twitter.com/search.json?callback=?&rpp=5&q=from:' + twitter_user, function(data){...});

Esta function(data) que hemos agregado al final es lo que se conoce como un callback, es decir, una función que será ejecutada una vez que el proceso termine (recordemos que javascript se caracteriza por ser asíncrono, es decir, que las funciones no se ejecutan de manera secuencial).

De este objeto data, podemos sacar muchas cosas interesantes, y además, podemos recorrer todos los elementos que hemos obtenido, que son objetos, con propiedades accesibles:

$.each(data.results, function(i, tweet) {
    if(tweet.text !== undefined) { //Comprobamos que la salida no sea vacía
        //Creamos un nuevo objeto de tipo fecha para obtener sus datos
        var date_tweet = new Date(tweet.created_at);
        var tweet_html;
        tweet_html    = '<div>'
        //Agregamos el texto y un enlace
        tweet_html    += '<p><b>' + tweet.text + '</b></p><a href="http://www.twitter.com/';
        tweet_html    += twitter_user + '/status/' + tweet.id_str + '">';
        //Agregamos la fecha
        tweet_html    += date_tweet.getDate() + '/' + date_tweet.getMonth() + '/' + date_tweet.getFullYear() + '<\/a>';
        tweet_html    += '<\/div>';
        //Añadimos el texto al contenedor que tenemos
        $('.tweets').append(tweet_html);
    }
});

Finalmente queda, dentro de nuestro HTML, agregar el código que contendrá todos los elementos que hemos generado, y que tendrá esta forma:

<div class="tweets"></div>

El resultado es el siguiente:

Simple, conciso, y con la gracia de que «lo has hecho tú» :) Quedaría arreglar las fechas, pero para eso os remito a un artículo que os enseñará como personalizarla a vuestro gusto.

El ejemplo completo y funcionando se encuentra disponible para su descarga aquí

Enlaces de interés:

• 10 maneras de trabajar con fechas en JavaScript