Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1471608410
Vida do cache: 1472904410
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Comentários Feed Postagens Redes Sociais Twitter Widgets

Widget contador Feed + Twitter + Comentários + Postagens

Atualizado! 02/08/2011 - Funcionando!

Aos trancos e barrancos com ajuda do Blogueiros na Web, todos (ou a maioria) sabem que consegui desenvolver um contador de assinantes Feed e um contador de seguidores do Twitter. Então com isso, criei um widget bem bacana, estilo esse que uso no Códigos Blog, ou melhor, criei 4 widgets com o mesmo princípio, porém com aparências diferentes.

Como da outra vez, vou deixar a codificação em aberto para todos terem a liberdade de modificar como quiser. A única restrição é a seguinte: Não retire os créditos! Tenho controle de quem está usando o widget e seria muito constrangedor descobrir algum PLAGIADOR.

É bom lembrar que para contar os comentários e postagens estou utilizando o script que o Usuário Compulsivo disponibilizou. Então essa parte é de total autoria dele. Vale à pena conhecer as suas dicas.

Vamos ao trabalho:

- Faça login no Blogger, entre em “Layout” -> “Elementos da página”, clique em “Adicionar um Gadget” -> “HTML/Java Script

- Ao abrir uma janela cole o seguinte código abaixo de acordo com a sua escolha:

<div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;">
    <div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
        <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/feed-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/NOME_DO_FEED" target="_blank"><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=NOME_DO_FEED'></script> Assinantes</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
    </div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/twitter_icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/SEU_USUÁRIO_TWITTER"   target="_blank"><script type='text/javascript'   src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=SEU_USUÁRIO_TWITTER"></script> Seguidores</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
    </div>
<div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/post-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><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> Postagens </div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">acompanhe</p>
    </div>
<div name="comentarios" style="margin-top: 5px; margin-left: 10px; float: left; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/comment-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><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> Comentários</div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">comente também</p>
    </div>
    <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'></script></small></span>
</div>


<div style="width: 160px; background: #fff; padding: 0; margin: 0; border: 0;">
    <div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
        <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/feed-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/NOME_DO_FEED" target="_blank"><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=NOME_DO_FEED'></script> Assinantes</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
    </div>
        <div name="twitter" style="float: left; margin: 5px 0 0 0; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/twitter_icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/SEU_USUÁRIO_TWITTER"   target="_blank"><script type='text/javascript'   src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=SEU_USUÁRIO_TWITTER"></script> Seguidores</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
    </div>
        <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'></script></small></span>
</div>

<div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;">
    <div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
        <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/feed-icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/NOME_DO_FEED" target="_blank"><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=NOME_DO_FEED'></script> Assinantes</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
    </div>
        <div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/twitter_icon.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/SEU_USUÁRIO_TWITTER"   target="_blank"><script type='text/javascript'   src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=SEU_USUÁRIO_TWITTER"></script> Seguidores</a></div>
        <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
    </div>
        <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'></script></small></span>
</div>

<div style="margin: 0; padding: 0;">
<ul style="margin: 0; padding: 0; list-style: none;">
<li style="background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/mini_twitter.gif) no-repeat; padding: 0 0 0 22px; margin: 0;"><script type='text/javascript'   src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=SEU_USUÁRIO_TWITTER"></script> Seguidores</li>
<li style="background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/mini_feed.gif) no-repeat; padding: 0 0 0 22px; margin: 2px 0 0 0;"><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=NOME_DO_FEED'></script> Assinantes</li>
<li style="background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/mini_post.png) no-repeat; padding: 0 0 0 22px; margin: 2px 0 0 0;"><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> Postagens</li>
<li style="background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/mini_comment.gif) no-repeat; padding: 0 0 0 22px; margin: 2px 0 0 0;"><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> Comentários</li>
</ul>
<span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'></script></small></span>
</div>

  • Faça as seguintes modificações (independente do estilo que você escolheu):

NOME_DO_FEED -> Substitua pelo nome do feed do seu blog.
Exemplo: http://feeds.feedburner.com/codigosblog (no caso o NOME_DO_FEED é: codigosblog)

SEU_USUÁRIO_TWITTER -> Substitua pelo nome de usuário do seu Twitter.
Exemplo: http://twitter.com/pauloestevao (no caso o SEU_USUÁRIO_TWITTER é: pauloestevao)

Obs.: Coloque o nome de usuário do Twitter todo em letras minúsculas, ou seu widget não vai funcionar perfeitamente.

- Depois que modificar é só salvar. Não tem problema algum em modificar o widget, basta não retirar os créditos.

- Para o contador de assinantes feed funcionar, você deve liberar a funcionalidade diretamente no FeedBurner.
Entre no site www.feedburner.com , faça seu login, acesse a conta desejada.
Acesse a aba: “Publicize” (Publicar) e clique em “FeedCount” (FeedCount) localizado no menu lateral. Após isso clique em “Activate” (Ativar).

Pronto! O contador está ativado.

Atenção: Problemas com o número de comentários? -> Comentários sumiram do Blogger!

Leia também:



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

159 Comentários

  1. Marcia disse:

    rs…eh agora vendo a publicação nem eu entenderia…espero conseguir agora.

    optei pelo último modelo:

    Twitter
    Assinantes
    Postagem
    Comentários

    que até a semana passada funcionava normalmente…agora não está registrando a quantidade os dois primeiros ítens (twitter/assinantes) e não consigo identificar o que estaria ocasionando o erro.

  2. http://vaticano-on-line.blogspot.com/ disse:

    Excelente Site. O 'contador de assinantes Feed' D+ Um Tutorial de verdade!

  3. Carlos disse:

    follow me also at http://alegresnamissao.blogspot.com/ thanks God Bless

  4. Dr. Andre disse:

    Meus contadores pararam de funcionar há 1 semana… alguma dica?

  5. César Aquino Bezerra disse:

    Obrigado pelo widget!
    Espero que não dê erros em meu blog!

  6. Blog do Vestibular disse:

    Prezado amigo,

    O número de assinantes do Twitter e do Feed não estão aparecendo.
    Há alguma correção a ser feita no widget?

    Endereço do blog:
    http://www.vestibularprovaenem.com

    Obrigado.
    Fabrício.

  7. Deividy Alves disse:

    gostei muito desse post
    gostaria que me seguissem em meu blog
    http://deividyalves.blogspot.com

  8. Blog do Wolfarth disse:

    Gostei muito deste widget, estou usando o último.
    Obrigado por compartilhar!

  9. Alcione Torres disse:

    O widget está com algum problema. Há algum tempo não aparece mais a contagem de leitores de feed e seguidores no Twitter.

  10. C.E.T.N - J&A disse:

    Interessante memsmo só que apliquei e não funcionou muito bem porque o meu templates não aceitou.
    Siga #http://www.cetnja.blogspot.com

  11. V¡ии¡¢¡µs ツ disse:

    muito bom gadget mas naum conseguir obter sucesso pois ele é diferente da cor de fundo do meu blog ai eu deixei pra lá! mas e bem legal! parabens!

    aceita parceria com links acesse

    Site da NET | Portal de Novidades

  12. Leandro disse:

    Muito legal seu blog, coloquei no meu, porém tem aquele probleminha de contagem do twitter e feeds.
    você acha que é vatagem colocar mesmo sabendo que está com problema.
    Existe só com contadores de postagem e comentários.
    Valeu, abraços!
    Meu blog é http://www.leandro-menteaberta.blogspot.com

  13. Ale Batista disse:

    É o meu também está com problema no contador do twitter e feeds. Eu usei o primeiro, gostaria de saber duas coisas como faço para coloar um embaixo do outro, e não dois um ao lado do outro. E outra, em como colocar o fundo transparente?
    Grata
    http;//alebatist.blogspot.com

  14. João Vítor disse:

    Olá Paulo.

    Tem como você adicionar além do twitter, o facebook?

    Obrigado pelo excelente artigo.
    Me ajudou muito.

  15. Enio Rudney disse:

    Vlw cara, boa dica, gostei. deu certo aki bm.

    O meu é

    http://www.humordesal.com.br/

  16. Seu Zica disse:

    Obrigado pelo widget foi uma mão na roda.

    O meu é

    http://vaidazica.blogspot.com/

  17. birasblog disse:

    Os widgetes são muito legais vou colocar um no meu blog,parabens!

  18. Dan disse:

    Acabei de colocar em meu blog muito bacana. parabéns pelo trabalho!

  19. Danilo - Mundo 9 disse:

    Parabéns e obrigado, muito útil seu trabalho.

  20. Regina Bomfim CRP 05/19319 disse:

    Seu blog é ótimo e agradeço. Ajudou muito. Você é um dos meu favoritos. Tudo de bom!!

  21. Edson F. disse:

    Paulo, tudo bem?
    Tem alguma ideia do porquê os assinantes estão zerados. Algum problema com o Feedburner? Há uns 4 dias que não há alteração no número de assinantes.

  22. Regina Bomfim CRP 05/19319 disse:

    Como não tenho muito conhecimento, está dando erro no nome do feed. Tem uma pessoa que tem o mesmo nome que eu e está caindo no blog da pessoa. Pensei que tivesse resolvido, mas ainda não consegui. Se alguém puder ajudar… Obrigada

  23. Jocemar burei disse:

    Olá, dispensei o meu webmaster e agora estou com dificuldades de consertar um erro que há no endereço do RSS de um blog meu. O erro está no link de destino, onde que eu altero essas informações? Meu blog é no wordpres e na pasta index.php não consegui encontrar esse código para alteração. Como faço isso, por favor, alguem poderia me ajudar? Grata. Solaine: http://www.exameseconcursos.com.br

  24. Monnyii disse:

    A contagem dos feeds não está funcionando, e eu já ativei, estava funcionando tudo certinho, mas hoje não está mais.
    Pode resolver?
    Bjuxx

  25. Luciene de Paula disse:

    Muito legal ja coloquei no meu blog,mudei o background ,o lado que o link aparece e o tamanho mas mantive os créditos !

    http://aprendizdecabeleireira.blogspot.com/

  26. Paulo Estevão disse:

    @Regina,
    se o feed está no nome de outro blog, não tem o que fazer. Use o feed do seu blog. Se ainda não tem, crie um.

    abraços

  27. Nilton Silveira disse:

    Paulo, boa noite!
    Eu instalei o seu widget de assinantes feed e twitter. o do twitter está funcionando e marcando os seguidores, mas o do feeds não está marcando. você poderia dar uma olhada no http://penseoamanha.blogspot.com/ e ver se poderia me ajudar, por gentileza…
    obrigado!

  28. Paulo Estevão disse:

    @Nilton,
    fez o quarto passo?

    abraços

  29. AnimaElite disse:

    Muito obrigado, gadget muito útil.

    meu blog:
    euriturias.blogspot.com

  30. Liachristo disse:

    Olá, obrigado por compartilhar.
    Já coloquei e deu tudo certo.
    Abraços.
    Lia Christo
    http://www.docesletras.com.br

  31. MOCAM disse:

    Olá,

    Parabéns pelo trabalho. Ficou excelente na minha página (www.blogdomocam.com.br).

    Contudo, não apareceu o número de assinantes do feed. Há algo que posso fazer para solucionar o problema?

    Desde já agradeço. Novamente, parabéns.

    MOCAM

  32. Paulo Estevão disse:

    Substituiu o nome de usuário corretamente? Qual é o link do seu feed?
    abraços

  33. Marcos Ferreira (M4rQu1Nh0S) disse:

    Olá, estou aqui para resolver este problema com a exibição na contagem dos feeds, voce errou apenas uma coisinha.
    obs: localize no navegador, nesta página o texto "uri"
    quando achar, escreva "url" no lugar de "uri".
    assim os feeds vão contar os assinantes corretamente.

    esse foi o seu erro, foi um prazer ajuda-lo

  34. Paulo Estevão disse:

    Marcos,

    é URI mesmo cara.

    abraços

  35. Marcos disse:

    Não funciona o twitter do primeiro codigo mas de resto (feed,postagem e comentarios) perfeitos. o que é?

  36. Marcos disse:

    O DESCULPA AGORA FUNCIONOU FOI MAL

  37. Vitor Coelho disse:

    Tem como por o contador de comentários quando se usa comentários do face?

  38. Paulo Estevão disse:

    Tem não. =[

  39. Henrique disse:

    dá para usar o contador de comentários do face?

  40. Henrique disse:

    Ok muito obrigado vou procurar 🙂

  41. marcia bispo disse:

    Olá Paulo. O gadget é bacana. Mas eu gostaria de perguntar uma outra coisa. Estou fazendo o SEO no meu blog e como uso o widget do diiht, ele esta acusando ROBOT. Você acha melhor eu tirá-lo?
    Grata pela atenção desde já!
    Bom Final de semana

  42. Ricardo disse:

    apliquei o widget em meu blog, mas como aconteceu com alguns, o contador do twitter e do feed não ta aparecendo, como solucionar esse problema?

    acessem meu blog ai pessoal, to começando, curtam e sigam se gostarem. grato!

  43. Anderson disse:

    Seu blog é um dos melhores do ramo. Parabéns, sempre estou acompanhando seus artigos. Sucesso!

  44. Prezado,

    Você tem algum Widget para colocar anúncios no blog?

  45. Marcos Abdulil disse:

    Eu não sei se teve alguma relação, mas logo após eu colocar esse gadget no meu blog, deu um aviso de Javascript malicioso, e agora ele tá bloqueado e eu não consigo remover o gadget pra desbloquear ele, tem alguma solução?

  46. No twitter apareceu, mas no de feeds não… o que pode ser?

  47. Paulo estou levando.
    Obrigada por partilhar.

  48. Giso Alves disse:

    Esse contador é ótimo, mais o contador de twitter, não funciona, já desistir.

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.