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:

Receba nossos posts por feed ou email

Posts Relacionados

159 Comentários

  1. 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. O widget está com algum problema. Há algum tempo não aparece mais a contagem de leitores de feed e seguidores no Twitter.

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

  4. É 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

  5. Olá Paulo.

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

    Obrigado pelo excelente artigo.
    Me ajudou muito.

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

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

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

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

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

  11. @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

  12. 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!

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

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

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

  16. 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!

  17. 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?

  18. Pingback: Ansiedade - Autoajuda

Faça um comentário