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">&lt;div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;"&gt;</span>
<span id="fullpost">    &lt;div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;"&gt;</span>
<span id="fullpost">        &lt;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;"&gt;&lt;/div&gt;</span>
<span id="fullpost">        &lt;div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"&gt;&lt;a href="http://feeds.feedburner.com/<b><span style="color: #b45f06;">NOME_DO_FEED</span></b>" target="_blank"&gt;&lt;script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=<b style="color: #b45f06;">NOME_DO_FEED</b>'&gt;&lt;/script&gt; Assinantes&lt;/a&gt;&lt;/div&gt;</span>
<span id="fullpost">        &lt;p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"&gt;assine o feed&lt;/p&gt;</span>
<span id="fullpost">    &lt;/div&gt;</span>
<span id="fullpost">&lt;div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;"&gt;</span>
<span id="fullpost">    &lt;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;"&gt;&lt;/div&gt;</span>
<span id="fullpost">        &lt;div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"&gt;&lt;a href="http://www.twitter.com/<b style="color: #bf9000;">SEU_USUÁRIO_TWITTER</b>"   target="_blank"&gt;&lt;script type='text/javascript'   src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=<b style="color: #bf9000;">SEU_USUÁRIO_TWITTER</b>"&gt;&lt;/script&gt; Seguidores&lt;/a&gt;&lt;/div&gt;</span>
<span id="fullpost">        &lt;p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"&gt;siga no Twitter&lt;/p&gt;</span>
<span id="fullpost">    &lt;/div&gt;</span>
<span id="fullpost">&lt;div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; background: #fff;"&gt;</span>
<span id="fullpost">    &lt;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;"&gt;&lt;/div&gt;</span>
<span id="fullpost">        &lt;div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"&gt;&lt;script type="text/javascript"&gt;  function showpostcount(json) {  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));  }&lt;/script&gt;&lt;script src="/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"&gt;&lt;/script&gt; Postagens &lt;/div&gt;</span>
<span id="fullpost">        &lt;p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"&gt;acompanhe&lt;/p&gt;</span>
<span id="fullpost">    &lt;/div&gt;</span>
<span id="fullpost">&lt;div name="comentarios" style="margin-top: 5px; margin-left: 10px; float: left; width: 160px; height: 50px; background: #fff;"&gt;</span>
<span id="fullpost">    &lt;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;"&gt;&lt;/div&gt;</span>
<span id="fullpost">        &lt;div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"&gt;&lt;script type="text/javascript"&gt;  function showpostcount(json) {  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));  }&lt;/script&gt;&lt;script src="/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"&gt;&lt;/script&gt; Comentários&lt;/div&gt;</span>
<span id="fullpost">        &lt;p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"&gt;comente também&lt;/p&gt;</span>
<span id="fullpost">    &lt;/div&gt;</span>
<span id="fullpost">    &lt;span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"&gt;&lt;small&gt;&lt;script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'&gt;&lt;/script&gt;&lt;/small&gt;&lt;/span&gt;</span>
<span id="fullpost">&lt;/div&gt;</span></code>

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

<code>&lt;div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;"&gt;
    &lt;div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;"&gt;
        &lt;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;"&gt;&lt;/div&gt;
        &lt;div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"&gt;&lt;a href="http://feeds.feedburner.com/<b style="color: #b45f06;">NOME_DO_FEED</b>" target="_blank"&gt;&lt;script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=<b style="color: #b45f06;">NOME_DO_FEED</b>'&gt;&lt;/script&gt; Assinantes&lt;/a&gt;&lt;/div&gt;
        &lt;p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"&gt;assine o feed&lt;/p&gt;
    &lt;/div&gt;
        &lt;div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;"&gt;
    &lt;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;"&gt;&lt;/div&gt;
        &lt;div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"&gt;&lt;a href="http://www.twitter.com/<b><span style="color: #bf9000;">SEU_USUÁRIO_TWITTER</span></b>"   target="_blank"&gt;&lt;script type='text/javascript'   src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=<b><span style="color: #bf9000;">SEU_USUÁRIO_TWITTER</span></b>"&gt;&lt;/script&gt; Seguidores&lt;/a&gt;&lt;/div&gt;
        &lt;p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"&gt;siga no Twitter&lt;/p&gt;
    &lt;/div&gt;
        &lt;span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"&gt;&lt;small&gt;&lt;script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'&gt;&lt;/script&gt;&lt;/small&gt;&lt;/span&gt;
&lt;/div&gt;</code>

<code>&lt;div style="margin: 0; padding: 0;"&gt;
&lt;ul style="margin: 0; padding: 0; list-style: none;"&gt;
&lt;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;"&gt;&lt;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>"&gt;&lt;/script&gt; Seguidores&lt;/li&gt;
&lt;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;"&gt;&lt;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>'&gt;&lt;/script&gt; Assinantes&lt;/li&gt;
&lt;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;"&gt;&lt;script type="text/javascript"&gt;  function showpostcount(json) {  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));  }&lt;/script&gt;&lt;script src="/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"&gt;&lt;/script&gt; Postagens&lt;/li&gt;
&lt;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;"&gt;&lt;script type="text/javascript"&gt;  function showpostcount(json) {  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));  }&lt;/script&gt;&lt;script src="/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"&gt;&lt;/script&gt; Comentários&lt;/li&gt;
&lt;/ul&gt;
&lt;span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"&gt;&lt;small&gt;&lt;script language='javascript'   type='text/javascript'   src='http://codigosblog.net/servidor/widget_twitter_feed_post_comment/widget+codigosblog.js'&gt;&lt;/script&gt;&lt;/small&gt;&lt;/span&gt;
&lt;/div&gt;</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? -&gt; 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