Con motivo del Partido del No Trabajo hice una pequeña pagina de broma donde gracias a la API de búsqueda de Twitter se muestra aleatoriamente un twitt que haga referencia al partido (hashtag #PNT). Una ves terminado decidí aprovechar un poco de lo realizado para hacer una mini guia para realizar un visor de twitts aleatorios sobre algún tema en especifico.

Debido a que la API de twitter no te informa la cantidad de twitts sobre un tema en particular tenemos que hacer un poco de trampa, y en ves de buscar un twitt aleatorio buscamos un twitt aleatorio entre los últimos N twits respecto al tema. Con esta aclaración en mente iniciamos con el Markup de la pagina.

1
2
3
4
5
6
7
8
9
10
11
12
13

<p>
    Show me a random twitt about 
    <input type="text" id="topic" /> 
    using the last 
    <input type="text" id="twittsQty" /> 
    twitts. 
    <span id="go">GO!</span>
</p>
<p>
    <img src="" id="userImage" alt="" /> 
    <span id="user"></span>
    : <span id="text"></span>
</p>

El input con id “topic” sera donde el usuario especificara el tema a buscar, como “#PNT”, y además ocupamos saber de entre cuantos twitts vamos a buscar, esto lo obtendremos del input con id “twittsQty”. Por ultimo el span con id “go” hará la funcion de un botón. Al presionar el span con id “go” obtendremos el twitt aleatorio y pondremos su contenido en el segundo p, img con id “userImage” contendra el avatar del autor, el span “user” tendrá su nombre de usuario y el span “text” contendrá el contenido del twitt.

Lo siguiente es ver como obtener el twitt, si buscamos en la documentación de twitter descubriremos que ocupamos llamar a “http://search.twitter.com/search.json?q=BUSQUEDA&show_user=true&rpp=1&page=PAGINA&callback=?” donde BUSQUEDA es el tema a buscar y PAGINA el numero aleatorio generado, ¿por que PAGINA es el numero aleatorio?, como se puede ver rpp tiene un valor de “1″, por lo que twitter tomara en cuenta un twitt por pagina, de esta forma el valor de PAGINA nos daré el Nesimo twitt. Con eso solo debemos de tener en mente que la BUSQUEDA debe de estar escapada. El código seria entonces:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(document).ready (function ()
{
    $("#go").click (function ()
    {
        var twitterPage = 1 + Math.floor (Math.random () * $("#twittsQty").val ());
        var twitterQuery = encodeURIComponent ($("#topic").val ());
        var requestUrl = "http://search.twitter.com/search.json?q=@query&show_user=true&rpp=1&page=@page&callback=?".
            replace (/@query/g, twitterQuery).
            replace (/@page/g, twitterPage);
        $.getJSON (requestUrl, function (data)
        {
            var twitt = data.results [0];
            $("#userImage").attr ("src", twitt.profile_image_url);
            $("#user").text (twitt.from_user);
            $("#text").html (twitt.text);
 
        });
    });
});

Ahora agregamos un poco de estilo:

1
2
3
4
5
6
7
8
9
10
11

#go
{
	color: Blue;
	text-decoration: underline;
	cursor: pointer;
}
#userImage
{
	width: 52px;
	height: 52px;
}

Y nos quedamos con lo siguiente:

Show me a random twitt about

:

Tamien pueden ver el resultado aquí o en la Web del Partido del No Trabajo (PNT)