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.

6 comentarios:

Gem@  

Está muy bien, y permite acceder a los enlaces que se muestran, pero es con jQuery :(

Responder
JMiur  

Si, es con JQuery :D Pero, puede usarse un IFRAME, en este caso, se vería bastante bien.

Responder
José GDF  

Es similar al widget que uso de Juitter, pero parece que tiene bastantes más opciones. En el widget que utilizo solo puedo poner mi nombre de usuario y salen mis status y las menciones a mi cuenta y ya está, y también actualiza en tiempo real.

Me lo anoto para, quizá, sustituir a Juitter.

Responder
JMiur  

Vy a ver ese que dices, José. Siempre es bueno tener alternativas :)

Responder
José GDF  

En el blog de Pizcos fue donde descubrí Juitter, JMiur. Pero insisto, este parece más completo, ya lo probaré a ver.

Responder
JMiur  

Me fijaré, José. Debo haberlo pasado por alto :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR