Bot?n de compartir de Twitter que muestra los avatares

Cargando..

A veces aunque tengamos en el blog el bot?n de compartir de Twitter parece no ser suficiente pues muchos no se animan a compartir la entrada aun cuando �sta sea interesante para el lector. As? que quiz? tengamos que recurrir a tentar la vanidad de nuestros lectores con este bot?n para compartir de Twitter que muestra los avatares de aquellos quienes han compartido la entrada.
Este animado y divertido bot?n es una idea desarrollada por More Tech Tips y est? basado en jQuery apoyado en la API de Topsy.

Se muestra s?lo al ingresar en la entrada y una vez que el lector retwittea el post su avatar aparecer? en en el bot?n junto con el de los dem?s lectores que lo han rettwiteado. Puedes hacer la prueba en esta misma entrada para verlo funcionando.

Para agregar este bot?n de compartir de Twitter entra en Dise?o | Edici?n de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;div.who-tweet-2&#39;).whoTweet({
nick:&#39;usuario&#39;
,url:&#39;&#39;
,tweet_tip:1
,animate:&#39;height&#39;
});
});
</script>

Cambia lo que est? en color rojo por tu nombre de usuario de Twitter y luego antes de
]]></b:skin> pega esto:

div.topsy_widget_data{overflow:hidden;}
div.topsy-big{
font-family:Arial,Tahoma,Helvetica,sans-serif!important;
font-size:11px!important;
float:none;
width:50px
}
a.topsy-big-total,a.topsy-big-total-badge{display:block;}
div.topsy-big a,div.topsy-big a:visited,div.topsy-big a:hover{
text-decoration:none;}
a.topsy-big-total,a.topsy-big-total-badge,a.topsy-big-total:visited,a.topsy-big-total-badge:visited{
color:#333!important
}
span.topsy-big-count{
display:block;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left bottom!important;
border:1px solid #E6E7E2!important;
text-align:center!important;
padding:5px 0!important;
-moz-border-radius:3px!important;
-webkit-border-radius:3px!important;
}
a.topsy-big-total:hover,a.topsy-big-total-badge:hover{color:#D70!important;}
span.topsy-big-num{
display:block;
line-height:15px!important;
font-size:15px!important;
font-weight:bold!important
}
a.topsy-big-total:hover span.topsy-big-num,a.topsy-big-total-badge:hover span.topsy-big-num,a.topsy-big-total:hover span.topsy-big-unit,a.topsy-big-total-badge:hover span.topsy-big-unit{color:#D70!important;}
a.topsy-big-total-badge span.topsy-big-count{
-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-right-radius:0;
border-bottom:none!important
}
span.topsy-big-unit{
font-size:10px!important;
line-height:10px!important;
display:block
}
span.topsy-big-badge{
display:block;
font-size:9px!important;
line-height:9px!important;
font-weight:bold!important;
background:#8F8F7C url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border:1px solid #8F8F7C!important;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
padding:2px 0!important;
text-align:center!important;
color:#FFF!important;
text-shadow:#75755a 1px 1px 0!important
}
a.topsy-big-total-badge:hover span.topsy-big-badge{
background-color:#ff8700!important;
border-color:#ff8700!important;
text-shadow:#C46900 1px 1px 0!important;
color:#FFF!important
}
span.topsy-big-lvl{
display:inline-block;
background:url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) no-repeat left center!important;
padding-left:9px!important;
margin-left:1px!important
}
a.topsy-big-retweet,a.topsy-big-retweet:visited{
display:block;
margin-top:2px!important;
text-align:center!important;
-moz-border-radius:3px!important;
-webkit-border-radius:3px!important;
font-size:11px!important;
line-height:16px!important;
padding:0!important;
background:#369 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#369!important;
text-shadow:#2A5580 1px 1px 0!important;
color:#FFF!important
}
a.topsy-big-retweet:hover{
background-color:#1B73CC!important;
border-color:#1B73CC!important;
color:#FFF!important
}
a.topsy-big-retweet:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
div.topsy-sm{
font-family:Arial,Tahoma,Helvetica,sans-serif!important;
font-size:11px!important;
float:none;
height:18px
}
div.topsy-sm a{
display:block;
float:left;
padding:0 3px!important;
line-height:16px!important;
border-style:solid!important;
border-width:1px!important;
-webkit-border-radius:3px!important;
-moz-border-radius:3px!important;
margin-right:1px!important
}
div.topsy-sm a,div.topsy-sm a:hover{text-decoration:none!important;}
a.topsy-sm-total,a.topsy-sm-total:visited{
font-weight:bold!important;
color:#333!important;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x bottom left!important;
border-color:#E6E7E2!important;
font-size:14px!important
}
a.topsy-sm-total:hover{
color:#D70!important;
background-color:#f2e8dc!important;
border-color:#f2e8dc!important
}
a.topsy-sm-total:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
a.topsy-sm-badge,a.topsy-sm-badge:visited{
text-shadow:#C46900 1px 1px 0!important;
color:#FFF!important;
background:#D70 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#D70!important;
font-size:9px!important;
font-weight:bold!important
}
a.topsy-sm-badge:hover{
text-shadow:#C46900 1px 1px 0!important;
background-color:#F78400!important;
border-color:#F78400!important;
color:#FFF!important
}
a.topsy-sm-badge:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
span.topsy-sm-lvl{
display:inline-block;
background:url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) no-repeat left center!important;
padding-left:9px!important;
margin-left:1px!important
}
a.topsy-sm-retweet,a.topsy-sm-retweet:visited{
margin-right:1px!important;
font-size:11px!important;
font-weight:normal!important;
color:#FFF!important;
background:#369 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#369!important;
text-shadow:#2A5580 1px 1px 0!important
}
a.topsy-sm-retweet:hover{
background-color:#358de5!important;
border-color:#358de5!important;
color:#FFF!important;
text-shadow:#369 1px 1px 0!important
}
a.topsy-sm-retweet:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
span.topsy-big-count-wtb{
position:relative;
display:block;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left bottom!important;
border:1px solid #E6E7E2;
text-align:center;
padding:0;
-moz-border-radius:3px;
-webkit-border-radius:3px
}
a.topsy-big-total-badge-wtb{
position:absolute;
z-index:10;
bottom:0px;
left:1px;
background:white;
opacity:0.8;
filter:alpha(opacity=80);
width:44px;
border:gray 1px solid
}
a.topsy-big-total-badge-wtb,a.topsy-big-total-badge-wtb:visited{
color:#333
}
a.topsy-big-total-badge-wtb:hover{color:#D70;}
span.wtb{
display:block;
width:47px;
height:47px;
overflow:hidden
}
span.wtb img{padding:0 !important;}
span.wtb a{
display:block;
float:left;
}

Por ?ltimo marca la casilla Expandir plantillas de artilugios y busca esta l?nea:

<div class='post-body entry-content'>

Justo debajo de ella agrega este c?digo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='who-tweet-2' style='float: right; padding:5px;'>Cargando..</div>
</b:if>

Y listo, con eso ya tendr?s tu bot?n de Twitter que mostrar? los avatares de quienes comparten la entrada.

Ahora s?lo hay que tomar en cuenta que el bot?n s?lo aparecer? en las entradas, no en la portada del blog.
Adem?s, en algunas ocasiones puede tardar un poco en aparecer el avatar de quienes twittean la entrada, eso depende b?sicamente de la API de Topsy as? que no hay que desesperarse si en ocasiones tarda un poco m?s en aparecer el avatar.