quarta-feira, 25 de maio de 2011

Script Contador Twitter+Feed+Posts+Comentários

O SemNome conseguiu desenvolver um contador em javascript, que mostra o número de seguidores do Twitter e assinantes de Feed. No script original os contadores se apresentam em forma de texto, sem imagens ou ícones.
Baseado neste script, eu inclui nele os scripts de contagem de postagens publicadas e contagem de comentários e adaptei 'skins' incluindo imagens ícones para cada tipo de contador, e assim nasceu um Widget bem completo que funciona a base de javascript, sem necessidade usar funções em PHP.


DEMO


Este script pode ser usado em qualquer plataforma, e tem suporte para uma maior personalização, bastando fazer algumas configurações, e a instalação é superfácil.

Instalando o Widget:


Vá para a aba "design", clique em "adicionar um gadget", escolha o modo HTML/javascript e cole o seguinte código:


<script language='javascript' type='text/javascript'src='http://dl.dropbox.com/u/3173073/Widgets/contador-twitter-feed.js'></script>
<div style='float:left;padding:8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKyRMzz0151wNpdAuhUDZGd1GsIobd2moqXCDQELGD6E4hNg0dEPk-23bKlJLU7YfwiQW6nVBfo95f_uab_1qH1gv1sViSoR_PbP5q0gWcu-KqBG-6KJsH0FNplD9ao3bqyKrKZHNXoAM/" style="margin-right: 8px; float:left;" />
<a href="URL-DO-SEU-TWITTER" target="_blank" ><span style="float: left; margin-top:2px;padding:0;font-size:20px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xtwitter("Nome-De-Usuario-do-Twitter") </script> Seguidores</span><br />
<span style="float:left;margin:0px;padding:0px;font-size: 12px;color:#000;font-family:Arial,Helvetica,sans-serif;">Siga no twitter</span></a>
</div>
<div style='float:left;padding:8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLI7VRcmaQK2LcwCQH4BwbXndltQSuZ0FVFCo4ntsZ5DxYWp_1UYe7YiMSJ8_rAhS-aXo-e-xhdBbNEDHpr0ltadiWj_DE1MIoUxhZvcSh7Kszi-yxEsoT_sZO_FBOZrJQD2hl0fUjDo/" style="margin-right:8px;float:left;" />
<a href="URL-DO-SEU-FEED" target="_blank" ><span style="float:left;margin-top:2px;padding:0;font-size: 20px; color:#000;font-family:Arial,Helvetica,sans-serif;"">
<script type="text/javascript"> xfeedburner("Nome-do-Seu-Feed-no-FeedBurner") </script> Assinantes</span><br />
<span style="float:left;margin:0px;padding:0px;font-size:12px; color:#000;font-family:Arial,Helvetica,sans-serif;"">Assine também!</span></a>
</div>
<div style='height:40px;float:left;padding:8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RayPrxtVlw-yuTnxdcP4sXZU1O1TgzZw0cyzBe68bkbjjUF-aYNQqHUhaOAM_0dZFUF_ph92gU93PRbet58o2ejsazDA16QJ3klqnT5wVsXiSEJpZg6sEVwb6ojSbDAIOjENiVRx5Z4/" style="margin-right:8px;float:left;" />
<span style="float:left;margin-top:2px;padding:0;font-size:20px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script style="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&aacute;rios</span><br />
<span style="float:left;margin:0px;padding:0px;">Comente também!</span>
</div>
<div style='float:left;padding:8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsNjYQ6DnMH8FItA3p8tyUuNxC2-8mg15vQuFY3_Q09HM3q353mV2YfOOEsDLcuni3CCgT8f2y1Bx5y263EEnx64nf05kMwvHgRD77dAZqY4lvkiNEaJpXVak2mw8XhwM3XVtTZTvuYBU/" style="margin-right:8px;float:left;" />
<a href="URL-DO-SEU-BLOG/search/label/?max-results=999" target="_blank"><span style="float:left;margin-top: 2px;padding:0;font-size:20px;color:#000; font-family:Arial, Helvetica, sans-serif;">
<script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Postagens
</span><br/>
<span style="float:left;margin:0px;padding:0px;">Confira!</span></a>
</div>
<br/>
<div style='clear:both;'/>
<span style="position:absolute; float:center;text-decoration:none;"><font size="1" face="Microsoft Sans Serif"><script language='javascript' type='text/javascript' src='http://dl.dropbox.com/u/3173073/Widgets/widget-twitter-feed-post-comments.js'></script></font></span></div>


Os campos destacados em vermelho são os locais onde você deverá alterar incluindo suas urls e nome do seu twitter, feed e endereço do seu blog.
Caso queira alterar a cor da fonte, altere todos os campos "color:#000;".

Cabe salientar que os créditos originais de autoria do script do contador do Twitter e Feed, pertencem ao SemNome, entretanto eu fiz algumas adaptações e inclusões no script original que ele desenvolveu, portanto se você for utilizá-lo , ou quiser publicá-lo em seu blog, não retire os créditos!

Inté...;)

0 comentários:

Postar um comentário