FanBox para Twitter que muestra los seguidores con efecto deslizante

AVISO
La API de Twitter cambió y ahora requiere autenticación para obtener los datos de los seguidores, por tal motivo éste y los demás fanbox para Twitter han dejado de funcionar. Si me entero de una solución u otra alternativa lo publicaré de inmediato.

Aunque hace unos meses vimos cómo agregar un fanbox de Twitter usando un script bastante sencillo y útil, ahora veremos cómo hacer lo mismo, es decir, veremos cómo mostrar los seguidores de Twitter pero usando jQuery, el cual le añade un efecto deslizante a las imágenes de los seguidores de Twitter haciendo que el gadget se vea mucho más atractivo.

Para no complicarnos con el procedimiento vamos a agregar todo dentro de un gadget para así ahorrarnos un poco de tiempo.
Sólo entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, ahí pega este código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#friends').twitterFriends({
debug:1
,username:'usuario'
,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a><h2>_fo_ SEGUIDORES!</h2>'
,friends:0
,user_animate:'width'
,users:40
,users_max:100
,loop:1
,user_image:36
});
});
</script>

<div style="width:100%">
<div id="friends"></div>
</div>

<style>
div.twitter-friends{}
div.tf-header{
border:silver 1px solid;
overflow:hidden;
margin:0 0 1px 0;
background-color:#0B243B; /* Color de fondo del título */
}
div.tf-header img{
margin:1px;
float:left;
width:36px;
height:36px;
border:0;
}
div.tf-header h2{
line-height:32px;
font-weight:bolder;
display:block;
margin:3px;
padding-left:5px;
float:left;
font-size:14px;
letter-spacing:.1em ;
color:#FFF; /* Color del texto */
}
div.tf-users{
height:180px; /* Alto del gadget */
border:silver 1px solid;
overflow:hidden;
background-color:#eaeaea; /* Color de fondo del gadget */
}
div.tf-users a{
display:block;
float:left;
}
div.tf-users img{ }
div.tf-info{
text-align:right;
display:none;
}
</style>

Ahora veamos la cuestión de personalizar el gadget.

usuario es tu nombre de usuario de Twitter sin el @
friends:0 con el valor en 0 muestra a tus seguidores, con el valor en 1 muestra a quienes tú sigues.
user_animate:'width' es el efecto con el que aparecen los avatares; los efectos que se pueden usar son width, height, opacity
users:40 es el número de seguidores a mostrar en cada aparición.
users_max:100 es el máximo total de seguidores a mostrar.
loop:1 indica si se vuelven a mostrar los seguidores, para que sólo se muestren una vez se cambia a 0
user_image:36 es el ancho y alto de los avatares

El gadget ocupará el 100% del contenedor donde se coloque, si se le quiere dar un ancho específico se cambia el 100% que está en negrita por un valor en pixeles, por ejemplo 290px

Ten en cuenta que dependiendo del ancho y alto del gadget es el número de seguidores que debes mostrar, y de igual debes cambiar la medida de los avatares para que se ajuste al ancho de tu gadget.

En color verde he puesto las anotaciones sobre los colores y otras áreas que se pueden personalizar.

Aunque se puede manipular el número de seguidores que se mostrarán, el gadget sólo muestra los últimos 100 que te siguen en Twitter. O sea que puedes cambiar ese dato por un número menor a 100 pero no mayor a él.

Y recuerda que, funciona con jQuery así que si tienes Scriptaculous, Prototype o Mootools no funcionará.

Y también que, si ya tienes la versión 1.4.2 de jQuery entonces no será necesario agregar la primera línea del código.

NOTA: Los avatares tienen el enlace al perfil de Twitter de los seguidores, en mi ejemplo no funciona porque lo he puesto en un iframe.

Vía | More Tech Tips