Monitter: Mostrar resultados dinámicos de Twitter

SodaFans me preguntaba acerca de un widget que utiliza JQuery para mostrar tweets de manera dinámica. Ni idea del tema pero, por suerte, apareció todoTwitter al rescate así que veamos como funciona.

Se trata de Monitter y lo que permite es "monitorear" Twitter y mostrar cualquier tipo de conversación, basándose en la búsqueda de ciertas palabras clave.

Lo primero, por supuesto, es tener incluido JQuery en nuestra plantilla, así que lo agregamos utilizando las AJAX Libraries API de Google. Antes de </head> colocamos esto:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

Inmediatamente después de eso, habría que colocar el script de Monitter. Para eso, descargamos el ZIP donde nos encontarremos con el archivo monitter.min.js. Copiaremos su contenido e inmediatamente después, lo pegamos entre estas etiquetas:

<script type='text/javascript'>
//<![CDATA[
  ....... aquí colocamos el contenido del archivo .......
//]]>
</script>

El último detalle antes de usarlo es el CSS, lo colocamos debajo y es lo que nos permitirá personalizar la salida; los valores elementales son estos:

<style type="text/css">
.monitter { /* este es el rectángulo general */
  background-color: #000;
  border: 4px solid #666;
  color: #AAA;
  font-size: 12px;
  height: 300px; /* es la altura del rectángulo */
  margin: 0 auto; /* centrado */
  overflow-y: scroll; // para no cortar el contenido */
  width: 500px; /* es el ancho del rectángulo */
}
.tweet { /* cada uno de los tweets mostrados */
  display: block;
  background-color: #333;
  clear: both;
  overflow: hidden;
  padding: 5px;
  margin: 5px;
}
.tweet img { /*la imagen con el avatar */
  border: 2px solid #222;
  float: left;
}
.tweet p.text { /* el texto de cada tweet */
  line-height: normal;
  margin: 0;
  padding: 0 0 0 60px;
}
.tweet p.text a { /* los enlaces entro de los tweets */ }
.tweet p.text b { /* la  fecha */ }
.tweet p.text b a { /* el nombre del usuario */ }
}
</style>

Para mostrar el widget, sólo es necesario escribir un enlace con esta sintaxis:

<div class="monitter" id="tweets" title="CLAVES" lang="es"></div>

donde lang="es" mostrará resultados en español pero puede usarse cualquier otro idioma.

El punto importante es definir las claves que se colocan en el parámetro title; son esas las que definirán que cosas mostrar y la lista completa de operadores la podemos encontrar en la Ayuda de Twitter. Algunos ejemplos:

title="hogar" mostrará aquellos que incluyan la palabra "hogar"
title="blog scripts" mostrará aquellos que incluyan las palabras "blog" y "scripts"
title="blog OR scripts" mostrará aquellos que incluyan las palabras "blog" o bien "scripts", cualquiera de ellas
title="blog -scripts" mostrará aquellos que incluyan las palabras "blog" pero no la palabra "scripts"
title="#blogger" mostrará aquellos que contengan el hashtag #blogger
title="from:nombreUsuario" mostrará los enviados por el usuario definido
title="to:nombreUsuario" mostrará los enviados al usuario definido
title="@nombreUsuario" mostrará las referencias al usuario definido

Lo más interesante del widget es lo que define su nombre, "monitorea" ciertas búsquedas y por lo tanto, los resultados cambian de manera dinámica.