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:
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:
<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>
• NOME_DO_FEED -> Substitua pelo nome do feed do seu blog. • SEU_USUÁRIO_TWITTER -> Substitua pelo nome de usuário do seu Twitter. 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. Pronto! O contador está ativado.
Leia também:
<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>
Exemplo: http://feeds.feedburner.com/codigosblog (no caso o NOME_DO_FEED é: codigosblog)
Exemplo: http://twitter.com/pauloestevao (no caso o SEU_USUÁRIO_TWITTER é: pauloestevao)
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).
Atenção: Problemas com o número de comentários? -> Comentários sumiram do Blogger!
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?
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.