Widget contador de redes sociais, postagens e comentários para Blogger

Fiz mais esse widget para vocês divulgarem e embelezarem seus blogs. Algo simples, porém bem trabalhado com alguns efeitos via CSS3.

O widget mostra o ícone e o número de assinantes feed, seguidores do Twitter, fãs do Facebook, quantidade de postagens e comentários.

Conheça outros widgets:

O widget funciona 100% apenas no Blogger. Veja o mesmo widget para WordPress clicando aqui.

Como instalar:

1º- Faça login no Blogger.
– No antigo Blogger: Entre em “Layout” -> “Elementos da página”, clique em “Adicionar um Gadget” -> “HTML/JavaScript”
– No novo painel: Entre em “Layout”, clique em “Adicionar um Gadget”, escolha a opção “HTML∕JavaScript”;

2º – Ao abrir uma janela cole o seguinte código:

<style>.redesss img {-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;margin-bottom:3px;padding: 0 5px;}
.redesss img:hover {opacity:0.65;-moz-opacity: 0.65;filter: alpha(opacity=65);}
.redesss b {line-height: 16px;}</style>
<div class=\"redesss\" style=\"font-size:9px;font-weight: bold;text-align:center;font-family: Arial, Helvetica, sans-serif;\">
<div style=\"width: 51px;float:left;margin-right:10px;\">
<a href=\"http://feeds.feedburner.com/NOME_FEED\"><img src=\"http://codigosblog.net/servidor/gadget_social/rss.png\"/></a>
<b style=\"font-size: 12px;\"><script language=\'javascript\' type=\'text/javascript\' src=\'http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=NOME_FEED\'></script></b><br/>Assinantes
</div>
<div style=\"width: 51px;float:left;margin-right:10px;\">
<a href=\"http://facebook.com/NOME_FACEBOOK\"><img src=\"http://codigosblog.net/servidor/gadget_social/facebook.png\"/></a>
<b style=\"font-size: 12px;\"><script type=\"text/javascript\" src=\"http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_FACEBOOK\"></script></b> <br/>Fãs
</div>
<div style=\"width:51px;float:left;margin-right:10px;\">
<a href=\"http://twitter.com/NOME_TWITTER\"><img src=\"http://codigosblog.net/servidor/gadget_social/twitter.png\"/></a>
<b style=\"font-size: 12px;\"><script type=\'text/javascript\' src=\"http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=NOME_TWITTER\"></script></b> <br/>Seguidores
</div>
<div style=\"width:51px;float:left;margin-right:10px;\">
<img src=\"http://codigosblog.net/servidor/gadget_social/artigos.png\"/>
<b style=\"font-size: 12px;\"><script type=\"text/javascript\">  function showpostcount(json) {  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));  }</script><script src=\"/feeds/posts/default?alt=json-in-script&callback=showpostcount\"></script></b> <br/>Artigos
</div>
<div style=\"width: 51px;float:left;\">
<img src=\"http://codigosblog.net/servidor/gadget_social/comment.png\"/>
<b style=\"font-size: 12px;\"><script type=\"text/javascript\">  function showpostcount(json) {  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));  }</script><script src=\"/feeds/comments/default?alt=json-in-script&callback=showpostcount\"></script> </b> <br/>Comentários
</div>
<div style=\"clear:both;\"></div>
</div>

3° - Faça as seguintes modificações:
NOME_FEED - pelo nome do feed do seu blog.
Exemplo: http://feeds.feedburner.com/codigosblog (no caso o NOME_FEED é: codigosblog)

ID_FACEBOOK - pelo id único da sua fan page. Para pegar entre na página, acesse o link:

http://graph.facebook.com/NOME_DA_PAGINA

Substitua o NOME_DA_PÁGINA pelo nome da página do seu blog, exemplo: http://graph.facebook.com/codigosblog
Pegue o ID na primeira linha da página aberta.

Obs.: Se sua página não tem link personalizado, é mais simples, basta pegar o ID no próprio link da página. Exemplo: https://www.facebook.com/pages/BenQ_Brasil/387923397887863

Obs.2:  Preste bem atenção para pegar o trecho certo! Você deve pegar o ID, não o nome da página!

NOME_FACEBOOK - Aqui sim você coloca o link completo da sua fan page. 

NOME_TWITTER pelo nome de usuário do seu Twitter.
Exemplo: http://twitter.com/pauloestevao (no caso o NOME_DE_USUARIO é: pauloestevao)

4° - Salve e pronto!
Se você entende um pouco de HTML e CSS, faça quantas modificações quiser.
Faça tudo com atenção. Qualquer errinho atrapalha o funcionamento do widget.

Vocês podem notar que não coloquei créditos. Não esqueci e sim porque acho mais limpo o widget sem créditos. Seu blog fica mais bonito assim! =]
Eu peço apenas que coloque nosso link ou banner em qualquer parte do seu blog. Apenas como uma forma de agradecimento. Todavia, você não é obrigatório, apenas faço a solicitação.

Deixe seu link abaixo mostrando como ficou o widget em sua página! ;D

Atualizado! 18/11/12
OBS.: Se seu contador feed não sai do 0, ative o \"Awareness API\" no FeedBurner. Dica enviada por Edson F.

Leia também:

Abraços