Comentários Feed Postagens Redes Sociais Twitter Widgets
Widget contador Feed + Twitter + Comentários + Postagens
<code><b style="color: red;">Atualizado! 02/08/2011 - Funcionando!</b></code>
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.
Mas antes gostaria de recomendar um artigo. Clique no link para aprender Como Criar um Blog Grátis e Profissional no WordPress.
Vamos ao trabalho:
1º– Faça login no Blogger, entre em “Layout” -> “Elementos da página”, clique em “Adicionar um Gadget” -> “HTML/Java Script”
2º – Ao abrir uma janela cole o seguinte código abaixo de acordo com a sua escolha:

<code><span id="fullpost"><div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;"></span> <span id="fullpost"> <div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;"></span> <span id="fullpost"> <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></span> <span id="fullpost"> <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/<b><span style="color: #b45f06;">NOME_DO_FEED</span></b>" target="_blank"><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=<b style="color: #b45f06;">NOME_DO_FEED</b>'></script> Assinantes</a></div></span> <span id="fullpost"> <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p></span> <span id="fullpost"> </div></span> <span id="fullpost"><div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;"></span> <span id="fullpost"> <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></span> <span id="fullpost"> <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/<b style="color: #bf9000;">SEU_USUÁRIO_TWITTER</b>" target="_blank"><script type='text/javascript' src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=<b style="color: #bf9000;">SEU_USUÁRIO_TWITTER</b>"></script> Seguidores</a></div></span> <span id="fullpost"> <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p></span> <span id="fullpost"> </div></span> <span id="fullpost"><div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; background: #fff;"></span> <span id="fullpost"> <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></span> <span id="fullpost"> <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></span> <span id="fullpost"> <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">acompanhe</p></span> <span id="fullpost"> </div></span> <span id="fullpost"><div name="comentarios" style="margin-top: 5px; margin-left: 10px; float: left; width: 160px; height: 50px; background: #fff;"></span> <span id="fullpost"> <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></span> <span id="fullpost"> <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></span> <span id="fullpost"> <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">comente também</p></span> <span id="fullpost"> </div></span> <span id="fullpost"> <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></span> <span id="fullpost"></div></span></code>

<code><span id="fullpost"><div style="width: 160px; background: #fff; padding: 0; margin: 0; border: 0;"></span> <span id="fullpost"> <div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;"></span> <span id="fullpost"> <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></span> <span id="fullpost"> <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/<b style="color: #b45f06;">NOME_DO_FEED</b>" target="_blank"><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=<b style="color: #b45f06;">NOME_DO_FEED</b>'></script> Assinantes</a></div></span> <span id="fullpost"> <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p></span> <span id="fullpost"> </div></span> <span id="fullpost"> <div name="twitter" style="float: left; margin: 5px 0 0 0; width: 160px; height: 50px; background: #fff;"></span> <span id="fullpost"> <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></span> <span id="fullpost"> <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/<b style="color: #bf9000;">SEU_USUÁRIO_TWITTER</b>" target="_blank"><script type='text/javascript' src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=<b style="color: #bf9000;">SEU_USUÁRIO_TWITTER</b>"></script> Seguidores</a></div></span> <span id="fullpost"> <p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p></span> <span id="fullpost"> </div></span> <span id="fullpost"> <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></span> <span id="fullpost"></div></span></code>

<code><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/<b style="color: #b45f06;">NOME_DO_FEED</b>" target="_blank"><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=<b style="color: #b45f06;">NOME_DO_FEED</b>'></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/<b><span style="color: #bf9000;">SEU_USUÁRIO_TWITTER</span></b>" target="_blank"><script type='text/javascript' src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=<b><span style="color: #bf9000;">SEU_USUÁRIO_TWITTER</span></b>"></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></code>

<code><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=<b style="color: #bf9000;">SEU_USUÁRIO_TWITTE</b><b><span style="color: #bf9000;">R</span></b>"></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=<b><span style="color: #b45f06;">NOME_DO_FEED</span></b>'></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></code>
- 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)
3º – Depois que modificar é só salvar. Não tem problema algum em modificar o widget, basta não retirar os créditos.
4º – 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.
<code>Atenção: Problemas com o número de comentários? -> Comentários sumiram do Blogger!</code>
Leia também:
- Widget contador de assinantes feed e seguidores do Twitter
- Contador de assinantes feed em forma de texto
Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:
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.
Excelente Site. O 'contador de assinantes Feed' D+ Um Tutorial de verdade!
follow me also at http://alegresnamissao.blogspot.com/ thanks God Bless
Meus contadores pararam de funcionar há 1 semana… alguma dica?
Obrigado pelo widget!
Espero que não dê erros em meu blog!
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.
PESSOAL: http://www.codigosblog.com.br/2010/11/problemas-no-servidor-uolhost-e-algumas.html
gostei muito desse post
gostaria que me seguissem em meu blog
http://deividyalves.blogspot.com
Gostei muito deste widget, estou usando o último.
Obrigado por compartilhar!
O widget está com algum problema. Há algum tempo não aparece mais a contagem de leitores de feed e seguidores no Twitter.
Interessante memsmo só que apliquei e não funcionou muito bem porque o meu templates não aceitou.
Siga #http://www.cetnja.blogspot.com
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
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
É 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
Olá Paulo.
Tem como você adicionar além do twitter, o facebook?
Obrigado pelo excelente artigo.
Me ajudou muito.
Vlw cara, boa dica, gostei. deu certo aki bm.
O meu é
http://www.humordesal.com.br/
Obrigado pelo widget foi uma mão na roda.
O meu é
http://vaidazica.blogspot.com/
Os widgetes são muito legais vou colocar um no meu blog,parabens!
Acabei de colocar em meu blog muito bacana. parabéns pelo trabalho!
Parabéns e obrigado, muito útil seu trabalho.
Seu blog é ótimo e agradeço. Ajudou muito. Você é um dos meu favoritos. Tudo de bom!!
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.
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
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
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
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/
@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
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!
@Nilton,
fez o quarto passo?
abraços
Muito obrigado, gadget muito útil.
meu blog:
euriturias.blogspot.com
Olá, obrigado por compartilhar.
Já coloquei e deu tudo certo.
Abraços.
Lia Christo
http://www.docesletras.com.br
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
Substituiu o nome de usuário corretamente? Qual é o link do seu feed?
abraços
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
Marcos,
é URI mesmo cara.
abraços
Não funciona o twitter do primeiro codigo mas de resto (feed,postagem e comentarios) perfeitos. o que é?
O DESCULPA AGORA FUNCIONOU FOI MAL
Tem como por o contador de comentários quando se usa comentários do face?
Tem não. =[
dá para usar o contador de comentários do face?
Dá sim, procure aqui no Códigos Blog que já tem o contador.
abraços
Ok muito obrigado vou procurar 🙂
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
Acusando ROBOT? Como assim?
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!
Seu blog é um dos melhores do ramo. Parabéns, sempre estou acompanhando seus artigos. Sucesso!
Prezado,
Você tem algum Widget para colocar anúncios no blog?
Como assim Aléx?
abraços.
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?
Com certeza não foi por isso Marcos.
Abraços.
No twitter apareceu, mas no de feeds não… o que pode ser?
Está fora do ar José, sem previsão de volta por causa do FeedBurner.
Abraços.
Paulo estou levando.
Obrigada por partilhar.
Esse contador é ótimo, mais o contador de twitter, não funciona, já desistir.