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>
<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):
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.
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.
Atenção: Problemas com o número de comentários? -> Comentários sumiram do Blogger!Leia também:
133 Comentários:
Adicione seu comentário nesse post.
- Não aceito comentários anônimos;
- Não aceito parceria! Caso tenha uma boa proposta, entre em contato;
- Antes de pedir ajuda sobre o tutorial, tente fazer sozinho e tenha certeza que seguiu todas as etapas corretamente.
- Comentários irrelevantes não serão aceitos.
Muito obrigado por sua visita. Volte sempre!