Muestra a tus seguidores de Twitter en el blog

Como Twitter no para de crecer y de causar sensación, más aún con la última danza de millones y sobre su posible compra por parte de Facebook y Google. Bueno, pero no es eso lo que quiero hablarles hoy.

Hoy vamos a aprender a poner un widget como este que mostrará los seguidores que tenemos en Twitter en nuestro sitio web. Verás como los avatares van cambiando frecuentemente. Además, cada avatar te lleva a su respectivo perfil en Twitter.

547 SEGUIDORES!

Ahora aprendamos a hacerlo. Nos vamos a:

Diseño > Elementos de la página > Añadir un gadget > HTML/javascript donde pegamos 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:#B40404; /* 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>
Para que muestre tu cuenta sólo debes cambiar usuario con tu nombre y guardar los cambias. Con eso ya tendrás funcionando este interesante widget.