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