Widget contador de tus seguidores en las Redes Sociales

En esta entrada os voy a mostrar la forma de colocar un widget que nos informa del número de suscriptores que tenemos en cada una de nuestras redes sociales, los lectores de FeedBurner, los seguidores de Google+, los fans de Facebook y los seguidores de Twitter con un movimiento oscilante al colocar el ratón sobre cada icono.


El de Feedburner como el de Google+ son manuales, hay que introducirlos a mano, pero tanto el deFacebook como el de Twitter son automáticos.

Cómo instalar: 

1.- Entrar en panel de administración - Diseño - Añadir un gadget HTML/Javascript y pega el siguiente código:

<style>
.contador a {display:block;height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(https://lh4.googleusercontent.com/-sPGRSZXh1Mg/UWk1bkeTriI/AAAAAAAALJI/PMhqzZcY_NA/s454/contador.png ) no-repeat;
-webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all;cursor:pointer;}
.contador a.googleplus {background-position: 0px -58px;}
.contador a.googleplus:hover {background-position: 0px 0px;}
.contador a.twitter {background-position: 0px -290px;}
.contador a.twitter:hover {background-position: 0px -232px;}
.contador a.facebook {background-position: 0px -406px;}
.contador a.facebook:hover {background-position: 0px -348px;}
.contador a.rss {background-position: 0px -174px;}
.contador a.rss:hover {background-position: 0px -116px;}
</style>
<div class='contador'>
<div class="redesss" style="font-size:10px;font-weight: bold;text-align:center;font-family: Arial, Helvetica, sans-serif;">
<div style="width: 48px;float:left;margin-right:5px;">
<a class='rss' href="URL-FEED-FEEDBURNER" rel='external nofollow' target='_blank'></a>
<b style="font-size: 12px;">Número de lectores del feed</b> <br/>Lectores
</div>
<div style="width:48px;float:left;margin-right:5px;">
<a class='googleplus' href="URL-PERFIL-o-PÁGINA-GOOGLE+" rel='external nofollow' target='_blank'></a>
<b style="font-size: 12px;">Número-de-seguidores-Google+</b> <br/>Seguidores
</div>
<div style="width:48px;float:left;margin-right:5px;">
<a class='facebook' href="URL-DE-PÁGINA-FACEBOOK" rel='external nofollow' target='_blank'></a>
<b style="font-size: 12px;"><script type="text/javascript" src="http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=XXXXXXXXXXXX"></script></b> <br/>Fans
</div>
<div style="width:48px;float:left;margin-right:5px;">
<a class='twitter' href="URL-DE-TWITTER" rel='external nofollow' target='_blank' ></a>
<b style="font-size: 12px;"><script type='text/javascript' src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=NOMBREDETWITTER"></script></b> <br/>Seguidores
</div>

2.- Realice los siguientes cambios:
Lo marcado en negrita por las URL de vuestras Redes Sociales y por los lectores y seguidores de ellos.
Lo marcado en rojo por vuestro nombre de Twitter
Lo marcado en azul por vuestro ID de la página de Facebook.
¿Como saber la ID de tu página? 
Copia la siguiente dirección en la barra de navegación y añade al final el nombre de tu página: 

http://graph.facebook.com/xxxxxxx

3.- Guardar y Listo.- Imprimir artículo