Widget – feeds, seguidores, posts e comentários

O Paulo Estevão, do Códigos Blog, disponibilizou recentemete um widget muito bacana, que divulgamos aqui no Dicas Blogger em fevereiro deste ano - Widget - assinantes de feeds e followers do Twitter. Trata-se de um contador, em modo texto, que mostra o número de assinantes de feeds e de seguidores no Twitter. Ele foi fazendo algumas modificações no widget original e incluiu o contador de postagens e de comentários, o que deu origem a 4 novos modelos - Widget contador Feed + Twitter + Comentários + Postagens. São lindos ;)

Pra colocar um dos widgets aqui no DB, fiz algumas alterações: mudei os ícones,  inseri os botões originais do FeedBurner e do Twitter Counter e deixei o plano de fundo transparente. No original, o background é branco e o daqui é cinza.

Nisto, surgiram leitores interessados em usar o widget modificado por mim. Conversei com o Paulo pelo Twitter e ele concordou prontamente em disponibilizarmos o código. Aí está.

Widget assinantes feed, followers, posts e comentários

O widget é muito fácil de usar. Copie o código abaixo e cole no gadget html/javascript do Blogger. Substitua as partes em vermelho, respectivamente, pelos códigos do FeedBurner e do Twitter Counter. Se você não sabe como obter estes códigos, explicarei mais à frente.

<div style="width: 345px; padding: 0; margin: 0; border: 0;">
    <div name="feed" style="float: left; width: 160px; height: 50px; ">
        <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://lh3.ggpht.com/_EttevOw0KeE/S7kaAIHlGoI/AAAAAAAAInI/9JjpmdAvlsA/rss-48.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO FEEDBURNER</div>
        <p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
    </div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; ">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://lh5.ggpht.com/_EttevOw0KeE/S7kaAe42OHI/AAAAAAAAInM/mGX-FcmxKtc/twitter-48.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO TWITTER COUNTER</div>
        <p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
    </div>
<div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; ">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://lh4.ggpht.com/_EttevOw0KeE/S7kV6xLH-uI/AAAAAAAAIm0/bPuGZdohuaI/edit_male_user.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; 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: -5px 0 0 0; font-size: 10px; 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; ">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://lh4.ggpht.com/_EttevOw0KeE/S7kV7FdeDnI/AAAAAAAAIm4/26PFUj_DPfs/male_users_comments.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; 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 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: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">comente também</p>
    </div>   

<div style="text-align: center;"><small> Widget <a href="http://www.codigosblog.com.br/2010/03/widget-contador-feed-twitter_25.html">Códigos Blog</a> modificado por <a href="http://www.dicasblogger.com.br/2010/04/widget-contador-feeds-e-twitter.html">Dicas Blogger</a></small></div>

 

Para obter o código do contador do FeedBurner, entre no site e acesse a aba publicize (1). Na coluna da esquerda, clique em FeedCount (2). Configure as cores (sugestão: DE682B para o plano de fundo do botão e 444444 para o texto) e copie o código (3). Cole na parte em vermelho ( CÓDIGO DO FEEDBURNER ) do código do contador.

Para obter o código do TwitterCounter, acesse o site, escreva seu username do Twitter no campo indicado (1), faça login pelo método OAuth (é seguro) e depois clique na aba buttons (2). Configue as cores do botão (sugestão: 47C8F5 para o plano de fundo e 000000 para o texto)  e copie o código fornecido. Cole o código  na parte em vermelho ( CÓDIGO DO TWITTER COUNTER ) do código do widget.

 

Widget assinantes de feeds e seguidores do Twitter

Se você quiser mostrar apenas os assinantes de feeds e os seguidores no Twitter, copie este código, faça as alterações necessárias e cole no gadget html/javascript do Blogger:

<div style="width: 345px; padding: 0; margin: 0; border: 0;">
    <div name="feed" style="float: left; width: 160px; height: 50px; ">
        <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://lh3.ggpht.com/_EttevOw0KeE/S7kaAIHlGoI/AAAAAAAAInI/9JjpmdAvlsA/rss-48.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO FEEDBURNER</div>
        <p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">assine o feed</p>
    </div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; ">
    <div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://lh5.ggpht.com/_EttevOw0KeE/S7kaAe42OHI/AAAAAAAAInM/mGX-FcmxKtc/twitter-48.png) no-repeat;"></div>
        <div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;">CÓDIGO DO TWITTER COUNTER</div>
        <p name="texto" style="padding: 0; margin: -5px 0 0 0; font-size: 10px; font-family: Arial, Helvetica, sans-serif;">siga no Twitter</p>
    </div>
<div style="text-align: center;"><small> Widget <a href="http://www.codigosblog.com.br/2010/03/widget-contador-feed-twitter_25.html">Códigos Blog</a> modificado por <a href="http://www.dicasblogger.com.br/2010/04/widget-contador-feeds-e-twitter.html">Dicas Blogger</a></small></div>

 

Acho que não é necessário, mas vou pedir assim mesmo: NÃO RETIRE OS CRÉDITOS