Agregar la nueva fan box de twitter a tu blog o web

En la mayoria de los sitios nos encontramos con la fan box de facebook,los seguidores de google etc... estas cajas nos muestran el numero de seguidores que tenemos y la imagen que tenemos como avatar,bueno hoy les traigo esta expectacular nueva fan box de twitter para que la agreges a tu blog o sitio web la cual la encontre en moretechtips pero no tiene nada de estilo lo cual yo ya se los agrege y es casi completamente editable, podemos cambiar color, numeros de seguidores e amigos a mostrar tamaño y mucho mas...tambien cuando un visitante quiere seguirte solo le dan click a boton seguir y les va a abrir una pagina independiente y no se iran del sitio .ya hace tiempo esta  la de moopz  pero no es editable  bueno es muy buena tambien ya que twitter no cuenta con ninguna.

Para agregarla a nuestro blog es muy simple solo van a diseño >> añadir un gadget >> HTML/Javascript

Y pegan el codigo que les brindo a continuacion:

<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:'tubetrucos'
,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a>  <span style="font-weight:bold;">&nbsp;Tube trucos</span> en Twitter<h2> <a target="_blank" href="https://twitter.com/TubeTrucos/">&nbsp;<img alt="Seguir en twitter" style=" width: 62px; height: 22px;" src="http://dl.dropbox.com/u/25944020/botonseguir.gif" title="Seguir en twitter" /></a>&nbsp; _fo_</h2>'

,friends:0
,user_animate:'opacity'
,user_change:500
,user_swap:90000
,users:30
,users_max:30
,loop:1
,user_image:36
});
});
</script>





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

<style>
div.twitter-friends{}
div.tf-header{
border:silver 1px solid;
overflow:hidden;height:52px;
margin:0 0 2px 0;
background-color:#000000; /* Color de fondo del título */
}
div.tf-header img{
margin:2px;
float:left;
width:36px;
height:45px;
border:0;
}
div.tf-header h2{
line-height:32px;
font-weight:bolder;
display:block;
margin:2px;
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:#000000; /* 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>

Ya puesto el codigo en su lugar correspondiente dentro del codigo lo que les marque de color rojo lo van a cambiar por su ID de twitter ejemplo el mio es tubetrucos
,friends:0   Este es si quieres mostrar los amigos primero cambialo por el 1
,user_animate:'opacity' este es de la forma que quieres mostrar a los seguidores 'opacity', 'height', 'width', 'fontSize', 'lineHeight'
,user_change:500 ala velocidad que quieras mostrar los seguidores mas numeros es mas lento
,user_swap:90000 una ves mostrado el tiempo que quieres que se cargue otraves
,users:30 seguidores a mostrar
,users_max:30 maximo de seguidores a mostrar
en los estilos dice para que cosa es cada una una ves hecho los cambios correspondientes  le dan click a guardar y es todo ya van a tener  la nueva fan box de twitter en tu blog o web.



Si decean poner la que fue hecha por moopz a continuacion les dejo el codigo el cual es javascript tambien y lo van a añadir igual que el anterior :

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("usuario-Twitter");</script></div>
</div>

<style>
.FB_SERVER_IFRAME {
width: 290px !important; /* Ancho */
height: 250px !important; /* Alto */
}
</style>

Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Tweet

Compartir esta entrada :

Quizás también le interese:

Sí disfrutas de estas entradas solo has click aquí, o suscribete para recibir mas entradas como estas.

Subscribirse por RSS Feed

Su informacion nunca sera compartida.