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.

Compartir Enlace

El widget de Twitter para mostrar listas

Qué son o cómo usar las listas de Twitter se lo dejo a los expertos en el tema; si son útiles o no, dependerá de cada uno.

De todos modos, Twitter ha incorporado un widget para esta nueva opción y la podemos ver junto con las que ya extistían en la sección Goodies y entrando en List Widget nos encontraremos con un método bastante sencillo de personalizarlo.

• Settings nos permitirá indicar el usuario (nosotros o cualquier otro) y seleccionar la lista a mostrar. Allí también pondremos un título y subtítulo.
• Preferences nos sirve para establecer algunos detalles tales como el tiempo de actualización, al cantidad de tweets, si mostraremos los avatares, etc.
• Appearance es lo que nos permite determinar los diferentes colores tanto del fondo como de los textos.
• Dimensions nos da la posibilidad de establecer el tamaño (ancho y alto).

En cada paso iremos previsualizando el resultado y, una vez que definimos todo a nuestro gusto, Finish & Grab Code nos mostrará el código que debemos insertar en nuestro blog. En el caso de Blogger, podemos hacerlo directamente ya que dispone de un enlace directo que lo agregará a un elemento HTML.

El código es bastante evidente así que, llegado el caso, podemos editarlo manualmente.

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
  new TWTR.Widget({
    version: 2,
    type: 'list',
    rpp: 30,
    interval: 6000,
    title: 'Lista de servicios de ',
    subject: 'GOOGLE',
    width: 300,
    height: 300,
    theme: {
      shell: {
        background: '#334455',
        color: '#ddeeff'
      },
      tweets: {
        background: '#eeeeff',
        color: '#444444',
        links: '#8c3621'
      }
    },
    features: {
      scrollbar: true,
      loop: false,
      live: true,
      hashtags: true,
      timestamp: true,
      avatars: true,
      behavior: 'all'
    }
  }).render().setList('vagabundia', 'google').start();
</script>

Compartir Enlace

Trill: Una forma diferente de agregar Twitter al blog

mamanunes lo propuso en Twitter e insistió así que no tuve más remedio que ir y verlo

Trill, es un proyecto de Cameron McEfee y no es otra cosa que un pequeño pajarito que se asienta al final de nuestra página y permanece allí, siempre visible, esperando que se haga click sobre él para mostrar nuestro último tweet de manera divertida y muy original.

Los archivos necesarios para usarlo se pueden descargar desde la página del autor en formato ZIP pero, para hacerlo más sencillo de utilizar en Blogger, este otro contiene los dos archivos necesarios ya traducidos al español y con las imágenes alojadas en ImageShack.

Para usarlo sin problemas, lo mejor es agregar el contenido del archivo trill.css en la plantilla, lo abrimos con el block de notas y antes de </head> escribimos lo siguiente:

<style type='text/css'> 
  /* Y AQUÍ PEGAMOS EL CONTENIDO DEL ARCHIVO TRILL.CSS */
</style> 

Eso, no sólo nos evitará problemas con el alojamiento externo sino que de ese modo, podremos modificar algún detalle para adaptarlo a nuestra plantilla.

Luego, al script en si mismo es mejor agregarlo al final de la plantilla para evitar que un error en Twitter colapase el blog o haga que demore en cargarse. Entonces, antes de </body> ponemos esto:

<script type='text/javascript'>var userName = "nombre_usuario";</script>
<script type='text/javascript'>
//<![CDATA[
  /* Y AQUÍ PEGAMOS EL CONTENIDO DEL ARCHIVO TRILL.JS */
//]]>
</script>

Por supuesto, si se quiere alojar en un servidor externo no hay problema, en lugar de eso último colocamos:

<script type='text/javascript'>var userName = "nombre_usuario";</script>
<script type='text/javascript' src='URL_trill.js'></script>

Recordando que en ambos casos, debemos cambiar nombre_usuario por nuestro nombre.

Algunas personalizaciones son posibles, en lugar de ser mostrado al final de la página puede ser ubicado en un sitio específico modificando el script pero, más que nada, los cambios los podemos hacer en el CSS. Por ejemplo, div#trill-shell nos permite modificar las propiedades bottom y right para reubicarlo y el resto de las clases contiene las propiedades de las fuentes de los textos.

En este blog de pruebas se lo puede ver aplicado a una plantilla normal y es perfectamente compatible con cualquier otro script de Twitter.

Compartir Enlace

UpdateThat: Actualiza Twitter desde tu blog

Este artículo de TodoTwitter no lo había visto, es de hace un mes pero, no importa, vale igual.

Allí nos cuentan cómo usar un widget provisto por UpdateThat que permite a los visitantes de nuesto sitio, enviar actualizaciones directamente a sus cuentas de Facebook, Twitter y MySpace.

El acceso a esas cuentas se hace via Gigya Socialize API Center así que el login es seguro y, por supuesto, siempre es posible quitar esas autorizaciones desde nuestras cuentas.

El widget es un script sencillo y se ejecuta bastante rápido, basta copiar esto donde se nos ocurra mostrarlo:

<script>
  var gs_sw_width = 290;
  var gs_sw_status = " ... el texto a mostrar por defecto ... ";
  var gs_sw_bgColor = "#0098F3";
  var gs_sw_foreColor = "#AAFF2A";
  var gs_sw_borderColor = "#F7F7F7";
</script>
<script src="http://cdn.gigya.com/js/StatusWidget.js"></script>

No es mucho lo que puede configurarse ya que terminará siendo un IFRAME pero, podemos establecer algunos datos elementales:

gs_sw_width es el ancho del widget (por defecto 290 pixeles)
gs_sw_status es el texto que aparecerá por defecto en el cuadro de ingresos
gs_sw_bgColor es el color de fondo del widget
gs_sw_foreColor es el color del texto "Update your status:"
gs_sw_borderColor es el color del borde del widget

Para usarlo, basta escribir el texto y luego hacer click en el botón del servicio que queremos usar. Se abrirá una ventana pop-up de ese servicio pidiendo la autorización correspondiente:

 Compartir Enlace