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:

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):

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

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

Leia também:

• Widget contador de assinantes feed e seguidores do Twitter
• Contador de assinantes feed em forma de texto