Menu com ícones e contadores de artigos, feed, Twitter e comentários para Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

numeros2 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.

Quer ser um(a) Blogueiro(a) de Elite? Acesse AGORA: http://blogueiro.pro
Informativo: Quem já instalou esse gadget e estiver com problemas no contador do Twitter ou Feed, favor refazer o passo 3 abaixo, pois há modificações importantes na função.
Para quem vai usar o Gadget pela primeira vez, siga todo o processo descrito abaixo.

 

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:

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

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 Dinheirohttp://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.

ativar-contador-feed-feedburner-blog

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.

layout-gadget-blogger

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.

gadget-html-javascript

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:

83 Comentários

  1. Cara, muito bom, como sempre, correndo atrás né Marcos, parabéns, aprendemos coisas novas todos os dias, e blogueiros batalhadores como você tem pouco, ótimo trabalho!

    Responder

  2. Muito bom esse novo gadget. econimiza muito espaço no sidebar, pois junta os contadores de arquivo e comentários com ícones de inscrição RSS/Feed.

    Vou anunciar seu blog aos meus amigos.

    Responder

  3. Ótima dica, marcos! já implementei no meu blog e está funcionando perfeitamente.
    parabéns pelo trabalho muito bem feito que voce faz todos os dias aqui no Ferramentas blog!

    Responder

  4. Marcos,
    Você esqueceu de avisar que para usar o widget o proprietário do blog deve liberar o sistema de contagem de assinantes diretamente no FeedBurner. Como eu ensinei no Códigos Blog. Sem isso o contador não funciona, pois o FeedBurner só libera com autorização.

    abraços

    Responder

  5. Muito bom esse menu. Os números ficam em destaque e mais relacionados. Já instalei no meu blog e deu tudo certo.

    Obrigado por correr atrás do código e por postá-lo para nós!

    Responder

  6. Olá, voltei ao post para avisar que o contador de seguidores do Twitter não está aparecendo. Será problema do Twitter ou do código mesmo? Percebi que não é apenas no meu blog, aqui também não está aparecendo, pelo menos neste momento.

    Tomara que seja só um problema do Twitter e o número volte a aparecer logo.

    Responder

  7. Olá Marcos, fico contente que tenha gostado da ideia que colocámos no ar na Escola Dinheiro. Sinceramente não esperava uma cópia integral do conceito, mas acredito que isso não é problemático. O importante é pudermos todos beneficiar das vantagens propostas pelos contadores.

    Ao contrário do que está escrito no artigo, eu não recorri a plugins para recriar a tabela de contadores automáticos. É mesmo código PHP inserido na sidebar do blog, e também uma ideia original que não copiei de ninguém. Se já existia algo parecido, sinceramente, nem reparei.

    Abração e boa sorte com o FerramentasBlog!

    Paulo Faustino

    Responder

  8. @Paulo Faustino,

    Desculpa pelo engano. Eu imaginei que fosse um plugin, pois já vi parecidos com esse. Mas o seu realmente é original e desse tipo é o único que já vi.

    Como boa parte de meus visitantes são do Blogger, achei q seria interessante desenvolver um modelo pra essa plataforma.
    Se você quiser, disponibilizo o espaço do meu blog para divulgar seu modelo para WordPress.

    Responder

  9. Olá! Muito bom, já coloquei no footer do meu blog.
    Mas queria saber uma coisa: tentei colocar na sidebar, só que a minha é menor que a largura do widget. Olhei o código e tentei diminuir alguns width, mas não percebi mudanças. Dá pra mudar o tamanho só por dentro do código, ou isso faz parte do java script e não dá pra mexer?

    Muita obrigada,
    Bia Almeida

    Responder

  10. Olá, Marcos! Foi mal, acabei contrariando a política do blog com meu comentário anterior.

    Gostaria de saber se já existe uma opção para usar em WordPress, pois com o código do post, só apareceram os seguidores do Twitter.

    Desculpe mais uma vez a gafe e parabéns pelos conteúdos.

    Abs,
    Fabio Trigo

    Responder

  11. Muito bom esse tutorial!

    Eu sempre ficava tentando fazer algo parecido, mais não conseguia de jeito nenhum. Muito obrigado cara!

    Responder

  12. oopa … grande site!!
    o melhor da categoria na minha opinião, parabéns!
    estou com problema em mue blog com este widget!
    o contador de assinates do feed nao aparece!!
    jah conferi varias vezes e está td aparentemente correto!!
    fico grato se poder me ajudar…
    abraços

    Responder

  13. Adorei o contador.
    Mas tive um probleminha.
    Passei a utilizar o Disqus como formulário de comentários em meu blog. Mas apenas em novos posts.
    E percebi que o contador identifica apenas os comentários antigos.
    Existe uma maneira de fazer com que ele conte os antigos e os novos (do disqus)?

    Responder

  14. @Guilherme,

    Infelizmente não é possível contar os comentários recebidos pelo Disqus. Esse sistema conta apenas os comentários do formulário padrão do Blogger.

    Responder

  15. Deu tudo certo aqui adorei o widget, só tenho um probleminha, a cor de fundo do meu sidebar e igaul a cor onde ta escretio Comentarios e Seguidores Artigos e etc…
    Como muda de cor?
    Aguardo, abraços !

    Responder

  16. Olá Marcos Lemos!!

    Widget muito bom, já fiz algumas alterações nele para ficar com um visual diferenciado no meu blog, muito obrigado por disponibilizar para todos nós!!

    Abraços!!

    Responder

  17. Muito Obrigado Marcos, tava procurando um widget assim, primeiro usei o do Usuario Compulsivo, o widget de comentários, mas este tem mais desgign, e tem mais opções, OBRIGADO!

    Rurydr, PORTUGAL

    Responder

  18. Olá Marcos, tudo bem??? Esses dias estava melhorando o layout do meu blog e quando me deparo que a numeração dos meus comentários diminuiu de 169 para 53. Agora não quer voltar. Pq deu esse problema no meu blog????

    Responder

  19. @PisoVelho,

    Isso não é privilégio seu. É um erro do Blogger temporário e só temos que esperar os engenheiros da Google corrigirem.

    Responder

  20. Olá Marcos,

    Hoje fiz a festa aqui no seu blog. Instalei várias ferramentas publicadas em suas ostagens. Esta aqui foi a última e por isso nela eu deixo o recado:

    "Parabéns pelo seu trabalho, sério, limpo, perfeito, explicativo, intrutivo…

    Valeu por tudo.
    Redkako do
    Saiba + Aqui !!!
    http://saibamaqui.blogspot.com/

    Responder

  21. Adicionei o Gadget no meu blog e ficou muito bom. 🙂 Eu estava doida atrás do que você tinha, muito interessante. 😀
    Muito boa a explicação também.
    Abraços!

    Responder

  22. Olá Marcos!
    Antes de tudo, preciso lhe contar que o [Ferramentas Blog] está sendo responsável pela minha "alfabetização" na blogosfera! Obrigada!

    Estou tendo alguns problemas para adicionar este widget, mas vi que outras pessoas estão tendo os mesmos problemas que eu:
    – contador de seguidores do twitter não aparece
    – número de comentários está aquém do real
    – não aparece o número de assinantes no feed

    Bem, é isso. Mais uma vez, muito obrigada!

    Responder

  23. @Camilli,

    Verifique cada parte da mudança no código que vc colou e se não esqueceu nada ou se não apagou algo indevido.

    O contador de comentários está irreal por um erro do Blogger, devido mudanças deles e só temos mesmo que esperar que o problema seja corrigido.

    Responder

  24. Obrigada pela resposta, Marcos. Será que existe algum problema no script do draft blogger? O número de assinantes do feed realmente não aparece, embora eu tenha seguido os steps deste post.
    🙁

    Responder

  25. Olá Marcos.
    Eu também estou tendo alguns problemas no widget, o contador do twitter não aparece, percebi que até no Ferramentas Blog não aparece, o código todo está correto, somente o número de followers não aparece. 🙁

    Responder

  26. Gente,

    O servidor do contador do Twitter está fora do ar (21 de março de 2010). Não se preocupem que voltará a qualquer momento.
    Não precisa mexer nem mudar nada no código.

    Responder

  27. Muito bom, Marcos. Pensei que fosse erro de código. Voltei aqui só pra ver isto, corrigi o "problema" do twitter. Mas, pelo que vi, é temporário. Também notei agora que no widget há o nome da EscolaDinheiro (antig. "Fique-rico", estou certo?). Sempre ótimas parcerias você consegue. Ótimo pra você, melhor ainda para nós!!!

    Responder

  28. Eu recopiei o código pra atualizar os erros que tinha no contador de seguidores do twitter, mas o problema do meu contador de comentários continua do mesmo jeito…
    Alguém sabe me dizer se acontece o mesmo e como posso mudar isso?

    Obrigada!

    Responder

  29. Olá, primeiro parabens pelo blog e por este gadget, é otimo.
    O meu tinha sumido a quantidade de seguidores do twitter mais já refiz o 3° passo e está tudo ok novamente, muito obrigado.

    Responder

  30. @Vyctor,

    A URL é o endereço de uma página, site, blog ou de Feed, por exemplo.
    Já o nome de seu Feed é o nome que você escolheu e que vai compor a URL de seu Feed.

    Responder

  31. ötimo! Só que no meu não funcionou o número de assinantes de feed e eu tenho a conta ativada e fiz tudo como vc. indicou. Porque será que não deu certo?
    Abraços,
    Janeisa

    Responder

  32. Valeu Marcos, eu havia colocado a URL do feedburner diferente do nome, fiz a correção e deu tudo certo.
    Um super abraço!
    Janeisa

    Responder

  33. Parabéns!! Adorei a ferrementa e já coloquei no meu blog!
    Obrigada pelas informações e dicas, são sempre úteis!

    Responder

  34. Marcos, noite que o contador de comentários está incoerente.
    Mesmo com novos comentários o contador não se altera.

    Por favor, você pode verificar?

    Obrigada!!

    Bjos!

    Responder

  35. @Ana Gabriela,
    Esse erro do contador de comentários é do Blogger que não está funcionando bem. O jeito é esperar que o sistema volte ao normal.

    Responder

  36. Muito legal a ferramenta, mas tive que remove-la do meu blog. Por algum motivo ela conflita com o script de google de tradução do blog. Faz com que o blog fique muito lento pra carregar e mostra a DIV no local errado. É uma pena.

    Responder

  37. Muito bom Marcos!

    Muito obrigado, pois o Ferramentas Bolg tem me ajudado muito na construção do meu blog!

    Até mais.

    Responder

  38. Marcos,
    estou utilizando seu widget no GF Soluções (wordpress), adaptei o contador de artigos e comentários para o wordpress, em breve vou escrever sobre o assunto, muito obrigado por disponibilizar o código,
    um abraço e sucesso!

    Responder

  39. graças a pessoas que fazem o que vc faz podemos melhorar a aparencia e funcionalidade de nossa páginas.valeu!

    Responder

  40. Por favor te pesso mais uma vez para ajudar arrumar o meu problema no meu blog!
    Eu instalei o código passo a passo como você falou e eu também liberei o sistema de contagem de assinantes diretamente no FeedBurner. Mais mesmo assim não aparece o número de assinantes no código como resolvo isso?
    Me ajuda!!!

    Responder

  41. Tecno Mundos,

    No momento o contador aparece zerado por erro no FeedBurner e o máximo que podemos fazer é esperar que eles solucionem o Bug.
    É só esperar que vai funcionar perfeitamente.

    Responder

  42. Tecno Mundos,
    Verifique se vc seguiu o procedimento de ativação do contado no FeedBurne, como está descrito no tutorial. Sem isso os números não aparecerão.

    Responder

  43. Olha só, eu refiz todo o processo de colocação desse código n omeu blog, (o contador esta ativado no FeedBurne) e mesmo assim o número de assinantes não aparece porque isso ocorre?
    Se quiser eu envio para seu w-mail todo o código (com a minhas modificações) para você avaliar se têm algum erro.

    Responder

  44. Tecno Mundos,
    Não tenho como saber se você fez tudo certo.
    O melhor é vc verificar detalhes, como o endereço do seu Feed e se seu cadastro no FeedBurner não tem nenhum erro. Até mesmo teste se o contador padrão do FeedBurner funcionará em seu blog. Se o contador padrão funcionar então esse aqui funciona.

    Responder

  45. Voltei aqui só para avisar que consegui resolver meu problema . Obrigado pela sua juda! A e eu deixei os créditos no código.

    Responder

  46. O número de assinantes do Feed não aparece e quando insiro seu código no blog ele demora a carregar a página! Não sei se é com todo mundo isso, mas ele parece que fica lendo o link onde vc hospedou o código em php e demora pra aparecer a página do blog!

    Responder

  47. @Amigo acima,
    Algumas vezes o serviço do contador fica fora do ar.
    Isso é divido à busca e disponibilidade dos dados no próprio FeedBurner. Quando há algum problema lá, ficamos sem os dados.
    Isso é temporário e já deve voltar ao normal.

    Responder

  48. Pingback: Inserir botão Google Buzz no Blogger | [ Ferramentas Blog ]

  49. Pingback: Como criar menu com ícone de Redes Sociais e outras opções | [ Ferramentas Blog ]

  50. Ficou show de bola, mas no meu também não aparecem os inscritos no Feed. Acredito que realmente seja problema no FeedBurner. No meu também ficou super largo, mas já estou mexendo nisso.

    Responder

  51. Marcos acabei de desenvolver meu primeiro Widget baseado no do Dicas Blogger e Códigos Blog

    Fiz algumas modificações

    Coloquei uma “Like Box” + Botão de seguir + Newlestter juntamente com o contador de Seguidores e Leitores.

    E estou fazendo versões da primeira (que ficou meio “brega” mais legal) queria que você desse sua opinião, em breve postarei

    Obrigado

    OBS¹: O problema no contador de feeds acontece por causa do
    “http://feeds.feedburner.com/FerramentasBlog”
    que seria melhor colocar
    “http://www.nomedoseublog.com/feeds/posts/default” ou o proprio endereço do Feed (http://feeds.feedburner.com/blogspot/ejZmrC por exemplo)

    Obs²: Deve ter acontecido algum erro e está escrito “Comentários recebidos”

    OBS³: Por Favor me fala o que achou do meu widget!(estou postando)

    Responder

  52. Pingback: Como adicionar um contadores de subscritores, seguidores e fãs

  53. Pingback: Coisas que o seu blog NÃO precisa ter e as vantagens em removê-las | [ Ferramentas Blog ]

  54. Oi Marcos, já usava este contador seu no blogger, mas mudei para wordpress. Vc tem a versão para esta plataforma?
    Estou com um problema no feed, quando clica aparece em html sem layout.
    Vc ou alguém pode me ajudar nestas 2 situações?
    Parabéns pelo FB.
    Abs.

    Responder

    • Sérgio,

      Vamos publicar em breve um plugin de contadores.
      Sobre seu problema, recomendo procurar aqui mesmo no blog. Temos um tutorial para resolver alguns problemas de Feeds no WP.

      Responder

  55. olá Marcos primeiramente obrigado pelas dicas, e deixa eu te falar, nesse gadget eu posso tirar os créditos,é porque onde eu quero colocar o gadget,os créditos ficam em cima do gadget que está abaixo e assim bagunça meu template, ahh e aproveitando te enviei um comentario recentemente pedindo ajuda sobre um erro no template,mais já conseguir resolver,mais mesmo assim vlww,parabéns

    Responder

  56. Olá.
    Ficaria excelente se tivesse um contador de fãs do facebook, como aparece na tua versão aqui no teu blog.
    Podes enviar o código com este contador incluido?
    Abraço!

    Responder

  57. Já havia utilizado este widget em meu blog há mais tempo, mas percebi agora que a contador de assinantes do feed parou de exibir o número.
    Conferi o código novamente, não há nada diferente.
    O que será?

    Responder

  58. Marcos, Obrigado por esse contador, e parabéns pelo blog/site. É muito bom, visito aqui diariamente, ou semanamente. Mas não deixo de acompanhar! Você é um gênio da internet, disso pode ter certeza! Mais sucesso com o F/B. Abraços! se puder fazer uma visitinha ao meu blog, e dizer o que acha, eu agradeço: [links suprimidos]

    Responder

  59. Pingback: TAREFAS A REALIZAR NO SEU BLOG HOJE PARA PREPARÁ-LO PARA O SUCESSO (PARTE 2) | Mude a sua mente na internet

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.