Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1469016200
Vida do cache: 1470312200
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Comentários Contador Facebook Feed Postagens Redes Sociais Twitter Widgets WordPress

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)“;

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

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

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

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

- 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

32 Comentários

  1. Demolidor disse:

    fiz aki mais alguma coisa deu errado e não contou os artigos do blog…

    http://www.magmarama.com.br/

  2. Iago Melanias disse:

    Seria Fantástico se fosse para Blogger.

  3. Diogenes Oliveira Rodrigues disse:

    Ótimo, posso divulgar no meu blog fazendo um outro post também?

    Sucesso!!!

  4. Paulo Estevão disse:

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

  5. Paulo Estevão disse:

    @Diogenes,
    sim.

  6. Diogenes disse:

    Pronto Paulo, já fiz… Obrigado

  7. Fabio F. Destro disse:

    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…!

  8. Ministério CEO disse:

    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!

  9. Paulo Estevão disse:

    @Ministério,
    estranho, aqui está normal.

  10. Paulo Estevão disse:

    @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

  11. Iago Melanias disse:

    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.

  12. Iago Melanias disse:

    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.

  13. Alessandro Alessio disse:

    faca um tutorial como esse para blogger por favoooor 🙂

  14. Alvaro disse:

    Obrigado fico perfeito o Widget, coloquei um link de seu site em meu blog obrigado

  15. Tássio disse:

    Parabéns vlw mesmo…

  16. Mano Anti-Curintia disse:

    Olá a parte que pega os assinantes RSS nao esta funcionando corretamente, poderia me ajudar?

  17. Paulo Estevão disse:

    @Mano,
    Se seu contador feed não sai do 0, ative o "Awareness API" no FeedBurner.

  18. Iago Melanias disse:

    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.

  19. Iago Melanias disse:

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

  20. Yure Santana disse:

    Paulo tem como centralizar o widget na sidbar? Esta tudo no quanto esquedo ai naum fica legal. Veja>> BlogIndignado.com

  21. Paulo Estevão disse:

    @Yure,
    coloca <div align="center"> antes e </div> no final.

    abraços

  22. Yure Santana disse:

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

  23. Paulo Estevão disse:

    Sim. =]

  24. Cleiton Martins disse:

    Ola como eu poderia mudar a cor das letras em baixo das logo?

  25. Paulo Estevão disse:

    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

  26. Caro amigo muito obrigado pelo código, mas o contador do face foi o único que não ficou legal, se puder ajudar, lhe agradeço.

  27. Thiago disse:

    no meu wordpress ele não pega o número de comentários nem o de posts, você sabe o porque?
    ta ai o link pra você ver: http://www.chanelitas.com/17517-2

  28. Cleson Cruz disse:

    No meu não aparece nem os assinantes do feed e nem os seguidores do twitter. Há algo que eu possa fazer?

    Obrigado

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.