Widget contador de redes sociais, postagens e comentários para WordPress

Fiz esse widget dias atrás para Blogger e agora estou disponizando o código para WordPress. Algo simples, porém bem trabalhado com alguns efeitos via CSS3.

O widget mostra o ícone e o número de assinantes feed, seguidores do Twitter, fãs do Facebook, quantidade de postagens e comentários.

Leia também:

Como instalar:

1º- Faça login no seu blog. Entre em “Aparência” -> “Editor“. Abra o arquivo “Funções do Tema (function.php)“;

2° – No arquivo aberto, antes de todo o código (tudo mesmo), cole o seguinte código: 

<script type='text/javascript'>   var numero_postagens = <?php  $numposts = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'"); if (0 < $numposts) echo $numposts = number_format($numposts); ?>;   </script>
<script type='text/javascript'>   var numero_comentarios= <?php $commcount = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'"); if (0 < $commcount) echo $commcount = number_format($commcount); ?>;   </script>

Exemplo:

Após colar, salve o arquivo.

3° - Agora entre em "Aparência" -> "Widgets". Escolha inserir um "Texto"

4º - Cole seguinte código: 

<style>.redesss img {-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;margin-bottom:3px;padding: 0 5px;}
.redesss img:hover {opacity:0.65;-moz-opacity: 0.65;filter: alpha(opacity=65);}
.redesss b {line-height: 16px;}</style>
<div class="redesss" style="font-size:9px;font-weight: bold;text-align:center;font-family: Arial, Helvetica, sans-serif;">
<div style="width: 51px;float:left;margin-right:10px;">
<a href="http://feeds.feedburner.com/NOME_FEED"><img src="http://codigosblog.net/servidor/gadget_social/rss.png"/></a>
<b style="font-size: 12px;"><script language='javascript' type='text/javascript' src='http://codigosblog.net/servidor/contadorFeed/contadorfeed.js?uri=NOME_FEED'></script></b><br/>Assinantes
</div>
<div style="width: 51px;float:left;margin-right:10px;">
<a href="http://facebook.com/NOME_FACEBOOK"><img src="http://codigosblog.net/servidor/gadget_social/facebook.png"/></a>
<b style="font-size: 12px;"><script type="text/javascript" src="http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_FACEBOOK"></script></b> <br/>Fãs
</div>
<div style="width:51px;float:left;margin-right:10px;">
<a href="http://twitter.com/NOME_TWITTER"><img src="http://codigosblog.net/servidor/gadget_social/twitter.png"/></a>
<b style="font-size: 12px;"><script type='text/javascript' src="http://codigosblog.net/servidor/contadorTwitter/contadortwitter.js?usuario=NOME_TWITTER"></script></b> <br/>Seguidores
</div>
<div style="width:51px;float:left;margin-right:10px;">
<img src="http://codigosblog.net/servidor/gadget_social/artigos.png"/>
<b style="font-size: 12px;"><script type='text/javascript'>document.write(numero_postagens);</script></b> <br/>Artigos
</div>
<div style="width: 51px;float:left;">
<img src="http://codigosblog.net/servidor/gadget_social/comment.png"/>
<b style="font-size: 12px;"><script type='text/javascript'>document.write(numero_comentarios);</script></b> <br/>Comentários
</div>
<div style="clear:both;"></div>
</div>

5° - Faça as seguintes modificações:

NOME_FEED - pelo nome do feed do seu blog.
Exemplo: http://feeds.feedburner.com/codigosblog (no caso o NOME_FEED é: codigosblog)

ID_FACEBOOK - pelo id único da sua fan page. Para pegar entre na página, clique na foto de perfil e copie os últimos números depois do ponto até o “&”.
Exemplo: http://www.facebook.com/media/set/?set=a.157141730976417.34093.157140557643201&type=1 (id: 157140557643201)
Preste bem atenção para pegar o trecho certo!

É obrigatório colocar o ID (números) e não o nome da sua fan page.

NOME_FACEBOOK - Aqui sim você coloca o link completo da sua fan page. 

NOME_TWITTER pelo nome de usuário do seu Twitter.
Exemplo: http://twitter.com/pauloestevao (no caso o NOME_DE_USUARIO é: pauloestevao)

6° - Salve e pronto!

Se você entende um pouco de HTML e CSS, faça quantas modificações quiser.
Faça tudo com atenção. Qualquer errinho atrapalha o funcionamento do widget.

Como falei no outro post... Não coloquei créditos no widget, pois fica muito mais limpo. Eu peço apenas que coloque nosso link ou banner em qualquer parte do seu blog. Apenas como uma forma de agradecimento. Todavia, você não é obrigatório, apenas faço a solicitação.

Deixe seu link abaixo mostrando como ficou o widget em sua página! ;D

Atualizado! 18/11/12
OBS.: Se seu contador feed não sai do 0, ative o "Awareness API" no FeedBurner. Dica enviada por Edson F.

Abraços

Receba nossos posts por feed ou email
Assinar feed

Posts Relacionados

28 Comentários

  4. @Iago,
    se você ler a primeira linha e ler o post de antes de ontem vai ver que já existe esse widget para Blogger…

    Responder

  7. O código do Functions esta dando erro no meu wordpress…!
    Já deu este:
    Parse error: syntax error, unexpected $end in /home/inter458/public_html/wp-content/themes/LightTouch/functions.php on line 202
    E um outro que eu não lembro…!

    Responder

  8. Olá, eu tenho no meu blog http://www.ministerioceo.com.br um menu bem legal, mas quando eu passo o mouse sobre algum item que se expande ele fica em baixo das imagens do blog, o que eu posso fazer? Por favor, me responda o mais rápido possível, obrigado!

    Responder

  10. @Fabio,
    Falei para colar antes de tudo. Então pelo número da linha indicada no erro, não tem ligação com nosso script.

    abraços

    Responder

  11. Sim Paulo Estevão, mas muitos deles são bugados e quase sempre não funcionam, esse é fantástico, apesar de não ser para blogguer, faz um tipo o Ferramentas Blog, o dele é muito bacana.

    Responder

  12. Desculpe-me Paulo Estevão (apague meu último comentário), vi agora no índice que existe um para blogger, visito os blogs pelo meu painel Blogger e vou para os linkgs diretos, nem visito muito a página inicial, por isso não vi o para blogger. Parabéns!!!! Posso publicar em meu blog (blogando com facilidade)? Adicionando os créditos claro.

    Responder

  18. Paulo, recomendo que você mude o arquivo em que você pede para colocar no arquivo functions.php, o recomendado seria usar no arquivo header.php e acima da tag de fechamento head. Usei aqui no meu painel WordPress e bugou todo o painel WordPress com erro no functions. Acabei descobrindo que era a sua função. Fica a Dica.

    Responder

  19. Um dos principais bugs que causa é o problema nas caixas de texto, as caixas de texto normais passam a ficar pequenas, muito pequenas.

    Responder

  22. Paulo,
    Fiz isso, mas continua do msm jeito, mas de qualquer forma obrigado, há uma pergunta, cê viu o e-mail que lhe mandei?

    Responder

  25. Cleiton, você pode fazer de duas formas:
    1 – Procure por <div class="redesss" style="font-size:9px;font-weight: bold;text-align:center;font-family: Arial, Helvetica, sans-serif;">, coloque color: #CÓDIGO_COR dentro de style.

    2 – Use CSS, colocando a cor na class .redesss

    Abraços

    Responder

Faça um comentário