Você pode ver aqui na nossa barra lateral que há um novo menu com ícones, que exibe a quantidade de assinantes do Feed, seguidores do Twitter, quantidade de artigos publicados no blog e quantidade de comentários recebidos nos artigos. Vi esse modelo para WordPress e resolvi criar um que fosse semelhante para usuários do Blogger. É um widget bem simples e com poucas modificações, funcionando em qualquer layout do Blogger. Veja como instalar em sua barra de gadgets.

 

Esse modelo é uma variação de outros contadores que encontrei disponíveis. Uma ajuda imprescindível foi do Paulo Estevão, do Códigos Blog, que criou um contador de Feeds em texto e me permitiu usar seu script:

• Contador de assinantes feed em forma de texto (Códigos Blog)

Também uso uma variação do contador de artigos e comentários que já publiquei e ensinei a usar aqui:

• Contador de artigos e comentários para Blogger

Faltava apenas o Script do contador do Twitter que, depois de pesquisar um pouco e com a ajuda do Rodrigo Max (um programador amigo meu de Divinópolis), conseguimos fazer funcionar.

Os ícones desse Gadget que montei e a idéia foram bolados pelo Paulo Faustino do Escola Dinheiro – http://www.escoladinheiro.com/. A principio imaginei se tratar de um plugin, mas todo o recurso foi desenvolvido e as imagens para WordPress foram desenvolvidos e são exclusivos do Paulo Faustino (@escoladinheiro).

Adicionando o menu de contadores.

Antes de começar é preciso ter uma conta ativa do Feedburner para queimar seu Feed e ativar o contador de assinantes do serviço.

Para ativar o contador, vá ao painel do FeedBurner, clique no menu “Publicize” ~> “FeedCount” e, no final, salve e ative – como ilustrado na imagem abaixo.

1. Abra o painel do Blogger e vá em “Layout” ~> “Elementos da página” e clique em “Adicionar um Gadget” na sidebar onde quer adicionar o menu.

2. Depois de clicar, vai abrir uma janela com as opções de gadgets disponíveis do Blogger. Procure pelo “HTML/Javascript” e adicione esse.

3. Na janela que abrir, haverá espaço para adicionar o código do menu. Então cole lá o seguinte trecho:

<script style="text/javascript">
function totalPosts(json) {
document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');
}
function totalComments(json) {
document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="262"><tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="260"><tbody>
<tr>
<td valign="top" width="65">
<p align="center"><a href="URL_DO_FEED"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Assinar Feed" border="0" alt="Assinar Feed" src="http://ferramentasblog.com.br/icone-feed.png" width="32" height="32" /></a> <font size="1" face="Microsoft Sans Serif">Assinantes</font><br />
<b><script type="text/javascript" src="http://ferramentasblog.com.br/twitter/twitter-feedburner.js"></script><script type="text/javascript"> xfeedburner("NOME_DO_FEED") </script></b>
</p>
</td>
<td valign="top" width="65">
<p align="center"><a href="http://twitter.com/SEU_USUÁRIO_TWITTER"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Seguir no Twitter" border="0" alt="Seguir no Twitter" src="http://ferramentasblog.com.br/icone-twitter-32.png" width="32" height="32" /></a> <font size
="1" face="Microsoft Sans Serif">Seguidores</font><br />
<b><script type='text/javascript' src='http://www.ferramentasblog.com.br/twitter/twitter-php.php?usuario=SEU_USUÁRIO_TWITTER'></script></b>
</p>
</td>
<td valign="top" width="65">
<p align="center"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Artigos Publicados" border="0" alt="Artigos publicados" src="http://ferramentasblog.com.br/icone-posts-32.png" width="32" height="32" /> <font size="1" face="Microsoft Sans Serif">Artigos</font><br />
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script></p>
</td>
<td valign="top" width="65">
<p align="center"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Comentários recebidos" border="0" alt="Comentários recebidos" src="http://ferramentasblog.com.br/icone-comment-32.png" width="32" height="32" /> <font size="1" face="Microsoft Sans Serif">Comentários</font><br /><script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script></p>
</td>
</tr>
</tbody></table>
<div align="right">
<span style="font-size: 70%">Widget <a target="_blank" href="http://www.ferramentasblog.com/">FerramentasBlog</a> e <a target="_blank" href="http://www.escoladinheiro.com/">EscolaDinheiro</a></span>
</div>
</td>
</tr>
</tbody></table>
</div>

4. Agora só modifique no código o que indicarmos:

- Onde está vermelho, adicione a URL de seu Feed. Se você usa o FeedBurner, por exemplo, será algo como:

http://feeds.feedburner.com/FerramentasBlog

O que aparece nesse endereço destacado em negrito, é o nome do Feed, que deverá ser colocado no código onde está destacado de vermelho também.

- Na parte destacada de rosa/lilás é para adicionar o seu usuário do Twitter, o seu nome no Twitter (sem a “@”).

5. Salve! Veja onde foi adicionado o gadget, arraste para onde deseja que fique os ícones na sua barra lateral e salve as modificações. Vá até seu blog e veja o resultado. Pedimos que não retire os créditos de criação do gadget.

Mais opções de contadores para seu blog:

• Contador de visitas para Blog – Outras opções
• Histats – Contador de visitas e Análises para seu Blog
• Contador de Seguidores do Twitter no Blog