Twitter friends widget para jQuery

Twitter friends widget es un script para jQuery que muestra los avatares de los seguidores de manera rotativa, con un efecto de animación y eentualmente, sus tweets.

El script, lo podemos descargar desde Google Code o lo enlazamos directamente:

<script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>

Luego, llamamos a la función, lo más simple es de este modo:

<script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){
    $('#friends').twitterFriends({
      username:'NOMBRE_USUARIO'
  });
//]]>
</script>

donde sólo debemos cambiar NOMBRE_USUARIO por el nuestro.

Por último, donde querramos mostrar el widget, simplemente colocamos un DIV así:

<div id="friends"></div>

Y eso es todo.

Por supuesto, hay una serie de opciones que podemos incorporar y la lista completa está disponible acá. Por ejemplo:

friends define si mostraremos a nuestros seguidores (0) o a quienes nosotros seguimos (1)
users indica la cantidad de imágenes (20 por defecto)
user_image indica el tamaño de las imágenes (48 por defecto)
user_animate define el tipo de animación ('width', 'height', 'opacity')
info con un texto vacio permite eliminar el enlace al widget

Todos ellos, los agregamos separándolos por comas:

$('#friends').twitterFriends({ 
  info:"",
  user_animate:'width',
  users:50,
  user_image:32,
  username:'NOMBRE_USUARIO'
});

Un poco de CSS permite personalizar el widget:

div.tf-users { /* este es el rectángulo donde se mostrará */
  overflow: hidden;
  /* podemos establecer su ancho y alto */
}
div.tf-users a { /* las imágenes de los avatares */
  display: block;
  float: left;
}
div.tf-users img { ....... }

/* cada uno  de los tweets */
div.tf-tweet { ....... }
div.tf-tweet li { ....... }

/* el autor */
div.tf-tweet span.tf-avatar { ....... }
div.tf-tweet strong a { ....... }

/* el contenido de los tweets */
div.tf-tweet span.tf-body { ....... }
div.tf-tweet span.tf-content { ....... }
div.tf-tweet span.tf-meta { ....... }
div.tf-tweet span.tf-meta a { ....... }
div.tf-tweet span.tf-meta a:hover { ....... }
div.tf-tweet a.tf-date { ....... }
div.tf-tweet a.tf-source { ....... }
div.tf-tweet a.tf-link { ....... }
div.tf-tweet a.tf-at { ....... }
div.tf-tweet a.tf-hashtag { ....... }

/* información exta */
div.tf-info { ....... }
div.tf-info a { ....... }