Como é sabido, a nossa rede de blogs educacionais constituída pelos nossos blogs sobre Ganhar Dinheiro, Psicologia Positiva e Criatividade, bem como este dedicado a Templates WordPress e tudo o que tenha a ver com WordPress, faz uso de um contador de subscritores, seguidores e fãs no canto superior direito do template, muito desejado pela grande maioria dos blogueiros. Depois da Escola Dinheiro ter lançado o seu template oficialmente em Janeiro de 2010, foram já os inúmeros blogueiros que tentaram replicar esse nosso contador, sendo que alguns o conseguiram fazer com sucesso e outros nem tanto.
O contador que utilizamos foi inclusive reprogramado pelo amigo do Ferramentas Blog e como forma de o disponibilizar para todos os blogueiros que façam uso da plataforma Blogger.
A primeira versão dos nossos contadores fazia uso de 3 plugins WordPress para acessar as APIs do Feedburner, Twitter e Facebook. No entanto, descobrimos um plugin que faz tudo isso sozinho e que tornou o nosso trabalho bastante mais fácil em termos de desenvolvimento.
Ao contrário do que muitos usuários pensam, esses contadores não são um plugin WordPress, mas usam um plugin para puxar os dados. Tudo o resto é programação HTML e CSS. Não iremos revelar o nosso código por inteiro, sob pena de muitos blogueiros copiarem integralmente o estilo do nosso contador, mas iremos explicar-lhe passo-a-passo como criar esses contadores e colocá-los funcionando corretamente. O resto, ficará dependente de sua imaginação e obviamente de sua capacidade para programar o HTML e CSS de forma a que os contadores fiquem bonitos e atrativos para seus leitores e usuários.
ATIVAR A API DO FEEDBURNER
Para que seu número de subscritores do Feedburner seja apresentado corretamente e sem erros, é necessário você habilitar a sua conta do Feedburner para que esta possa receber acessos de terceiros para coletar essa informação. Ninguém terá acesso à sua conta do Feedburner, mas você conseguirá puxar seu número de subscritores indicando o nome do seu RSS Feed.
Para começar, clique no botão Publicize da sua conta do Feedburner depois de seleccionar o seu RSS Feed para o blog onde pretende puxar o número de subscritores, obviamente.
Depois, do lado esquerdo, clique em Awareness API e clique em Activar para activar esse serviço e deixar seu RSS Feed disponível para leitura de dados através da API do Feedburner.
ATIVAR A API DO FACEBOOK
No Facebook, acessar aos conteúdos da sua página de fãs é um processo um bocadinho mais complexo, logo, bastante menos simples do que acontece com o Feedburner. Para começar, teremos de criar uma aplicação (app) para usar posteriormente no acesso aos dados da página de fãs em questão.
Para começar, vamos acessar o endereço http://www.facebook.com/developers/ e Criar Nova Aplicação. Caso não consiga acessar a página, é porque o Facebook está pedindo para você criar uma conta de Developer. Caso seja esse o caso, visite o endereço http://forum.developers.facebook.net/register.php e crie sua conta de Developer gratuitamente. A conta não irá servir para basicamente nada, excepto para este processo, portanto, pode ficar tranquilo.
No campo Nome da Aplicação, deverá colocar um nome que possa facilmente identificar depois na sua lista de aplicações. No entanto, não uses palavras como “Facebook” ou “FB” porque são proibidas nesse tipo de aplicativos. Não se esqueça de aceitar as Condições do Facebook e clicar depois em Criar Aplicação.
No ecrã seguinte, não vamos fazer nada. Vamos simplesmente clicar em Back to My Apps para acessarmos então as informações que realmente nos interessam para puxar os dados de nossos subscritores.
Para conseguirmos puxar corretamente o número de subscritores da nossa página de fãs, iremos necessitar da Chave API e também do Segredo Aplicação, portanto, mantenha a página aberta ou guarde os dados num local de fácil acesso.
INSTALAR O PLUGIN SUBSCRIBERS TEXT COUNTER
O grande segredo que a a maioria dos blogueiros não conhece é que existe um fantástico plugin para WordPress, chamado Subscribers Text Counter, que faz praticamente todo o trabalho por nós, não sendo necessário programar rotinas de acesso aos dados das diferentes APIs que pretendemos usar.
Depois do plugin instalado e devidamente ativado, vá nas opções dele e comece a preencher os dados necessários. Começando pelo Twitter Settings, você terá apenas de colocar o seu username do Twitter, nada mais. Para puxar o número de seguidores no Twitter não é necessário correr nenhum processo de ativação/liberação da API, tal como acontece com o Feedburner e o Facebook e que explicámos passo-a-passo mais em cima.
Nas opções do Feedburner, você deverá colocar o endereço do seu RSS Feed. Normalmente são endereços do tipo http://feeds.feedburner.com/seuusername, sendo que neste caso você apenas precisa de colocar o seuusername, nada mais. O processo de liberação da API já fizemos mais em cima.
Para os campos do Facebook, vamos necessitar do Page ID, que pode ser encontrar facilmente da seguinte forma:
Vá na sua página de fãs, do tipo www.facebook.com/escolawordpress e por baixo do seu logotipo, ou da imagem que sua página tiver, clique no botão Editar Página, para que possamos então puxar o ID da página.
Agora, depois de ter carregado no botão Editar Página, olhe para o endereço na barra do seu browser, e tente identificar seu ID, tal como mostra a imagem. Esse é o ID que teremos de colocar lá em cima no campo Page ID do plugin.
Depois disso, basta colocar os dados API Key e API Secret que são a Chave API e o Segredo Aplicação conforme vimos em cima, e clicar no botão atualizar para que o plugin corra todas as informações e puxe seus dados corretamente.
PUXANDO OS CONTADORES PARA SEU BLOG
Para puxar os digitos para seu blog, o processo é bastante simples. Você tem dois tipos de shortcodes que pode usar para puxar os digitos e colocámos em seu blog, seja na barra lateral ou simplesmente num artigo.
Para colocar na barra lateral, você deverá usar os seguintes códigos:
- Twitter: <?php echo stcounter(‘twitter’) ?>
- Facebook: <?php echo stcounter(‘facebook’) ?>
- Subscritores: <?php echo stcounter(‘feedburner’) ?>
O ideal é não criar um widget, embora seja possível, mas editar diretamente seu ficheiro sidebar.php e criar um cantinho para seus contadores, de forma a personalizá-los da melhor forma possível com algumas linhas de HTML e CSS.
Existe lá no plugin também uma opção para mostrar os contadores em postagens. Veja aqui nossos contadores em tempo real:
- Twitter: 1547
- Facebook: 4682
- Subscritores: 4225
- Todos Somados: 10454
O plugin atualizado os dados de 7200 em 7200 segundos, o que dá de 2h em 2h. No entanto, você pode ir no plugin e carregar no botão Refresh Counters Now e atualizar de imediato seus contadores para os novos valores.
AGORA É A SUA VEZ DE CRIAR SEUS CONTADORES!
Está preparado para criar seus contadores bonitos e elegantes para mostrar a seus leitores e usuários o quão popular você é? Se tiver dúvidas, ou quiser apenas mostrar seu suporte a nosso artigo, deixe um comentário! Não esqueça também de nos ajudar a divulgar a matéria através do Twitter e Facebook. Nós agradecemos e prometemos mais artigos de grande qualidade!
Até Já!
Diogo Espinha
Muito útil! Obrigado por partilhares
Abraço
Paulo Faustino
Olá Diogo, obrigado pelo comentário amigo! Espero que o tutorial esteja simples de compreender, pois na verdade é mesmo um guia passo-a-passo de como fiz para criar os referidos contadores
Abraços
Wesley Ursão
Olá Paulo,
Obrigado por colocar o artigo que eu sugeri via twitter, muito interessante saber como funciona, mas eu não sou muito familiarizado com códigos PHP e CSS. Então eu não consegui colocar da mesma forma como fica no Escola Dinheiro.
Os procedimentos eu fiz todos seguidos aqui, mas o problema é na hora de codar, eu tento criar um novo widget e colocar o código, mas ele ou fica torto ou aparece de forma errada.
Pelo sidebar.php eu tentei, mas também não consegui. Tenho que estudar com mais calma isso aí e se finalmente eu conseguir eu comento aqui dizendo como eu fiz.
Parabéns pelo artigo.
Abraços.
Downtuga
Eu também tive este problema e a solução foi bastante simples.
Quando você copia o código php daqui directamente para o editor do wordpress, se reparar as ‘ ‘ ficam curvadas…
Eu também demorei um pouco a perceber qual era o erro, o próprio Paulo disse que eu estava a fazer algo mal, mas não fiz, o problema foi mesmo o copiar e colar. Se não funcionar escrevam vocês à mão
Paulo, já foi ver lá no site? Já consegui “mafiar-lhe” o código eheheh
Paulo Faustino
Olá Wesley, obrigado pelo comentário! Tome nota que no topo das opções do plugin, ele refere que se você quiser puxar os contadores via Widget, terá de usar os código
%Twitter%, ou%Facebook%, por exemplo. Outro factor importante é que no Widget fica complicado para você puder moldar seu estilo de forma correta. O ideal mesmo é editar a sidebar.php e estilizar seus contadores ao seu jeitoAbraços
Ricardo Fernandes
Olá Wesley. Se precisares de ajuda em HTML, XHTML, PHP ou CSS para personalizares o teu widget podes entrar em contacto comigo, poderei tentar dar-te um jeito nisso de modo a dar-lhe um melhor aspecto
RBTech.info
Estava ha algum tempo procurando uma dica como esta, obrigado por compartilhar. Vou estilizar de acordo com meu template e disponibilizar em meu blog também.
Att
Ricardo
Paulo Faustino
Olá Ricardo, obrigado pelo comentário! Fico contente que tenhamos ido ao encontro das suas necessidades e espero que consiga compreender todos os passos do tutorial de força simples
Boa sorte na integração!
Abraços
José Luís
Boa dica,
Paulo Faustino
Olá José, obrigado pelo comentário!
Downtuga
cá estou eu como prometido.
Muito obrigado por disponibilizar o artigo, estava mesmo à espera disto para meter no site
Paulo Faustino
Olá Downtuga, obrigado pelo comentário! Conforme prometido, aí está o artigo com o tutorial passo-a-passo para criar o contador
Espero que lhe seja útil e acima de tudo fácil de compreender e de colocar em prática!
Abraços
Joaniz Abrantes
Olá Paulo, estava a procura disso, porém tudo que eu achei de referência na net estava meio confuso.
Vou testar e depois comento o resultado.
Mais de qualquer forma muito obrigado por esse tutorial.
Abraço!.
Joaniz Abrantes
Fiz os testes aqui e funcionou perfeitamente, muito obrigado Paulo.
Agora vou adaptar no meu tema
Paulo Faustino
Olá Joaniz, obrigado pelo comentário! Fico muito contente que tenha funcionado tudo corretamente para si, o que significa que o tutorial está de fácil entendimento
Agora é estilizar bem seus contadores e colocar tudo a funcionar corretamente 
Abraços
Marcelino Azevedo de Jesus
Gostei. Soube ontem pelo twitter deste artigo e estava ansioso por devorá-lo. Parabéns mais uma vês.
Paulo Faustino
Olá Marcelino, obrigado pelo comentário! Ainda bem que gostou do tutorial e espero que consiga implementá-lo de forma prática e simples nos seus sites e blogs. Boa sorte nisso
Abraços
EuJogador
Olá, desde o dia em que vi o contador gostei bastante dele.
Só que há um problema :S
Eu uso o blogger no meu blog, até já pensei em migrar o blog, mas sempre gostei mais do blogger.
Eu sei que você aconselha no escola dinheiro (que já li de ponta a ponta) a usar-mos o wordpress.
Existe maneira de o fazer no blogger?
Desde já obrigado
Paulo Faustino
Olá EuJogador, obrigado pelo comentário! No início do artigo referimos uma opção para Blogger. Dê uma leitura um pouco mais atenta e seu problema fica resolvido
Abraços
EuJogador
Muito obrigado, realmente foi falta de atenção, desculpe lá :s
Continuação de um óptimo trabalho!
juvass
Ola Paulo excelente artigo..realmente funcional, ja estou implementando ele em um projeto que sera lançado logo, e fala exatamente sobre wp..muito obrigado pela dica..Sucesso
Valter
Boas é a primeira vez que deixo aqui a minha opinião.
Desde já felicito toda a equipa pelo trabalho realizado.
Sobre o post, fiquei um pouco admirado pois sigo diariamente os teus 4 sites (escola, admiração devesse por teres demorado a explicar +- como por ali os contadores.
Mesmo assim obrigado pelas dicas o meu já tá a funcionar devido ao teu post.
Cumprimentos e continuai com o bom trabalho
Daniel Leite
Bom dia,
Antes de mais nada parabéns pelo artigo, espero que venham mais artigos com esta mesma qualidade.
Agora tenho uma pergunta, existe algo semelhante em relação ao Joomla?
Abraços
Daniel Leite
Tomé M.
Acho esta dica excelente!
No entanto ainda não estou pronto para mostrar o total de seguidores RSS aos meus leitores pelo que ainda não vou necessitar de usar esta dica.
Gostaria era de saber se dá para adaptar ao estilo que tenho já no meu Site para colocar os números por baixo dos icons que lá tenho.
Obrigado
Tomé M.
wetalkabout
Uma dúvida ele junta os leitores que subscreveram via email e os que subscreveram via feeds normal ?
Paulo Faustino
Olá WeTalkAbout, obrigado pelo comentário! O contador de subscritores do Feedburner conta automaticamente tudo, tanto os que subscrevem por leitor como aqueles que subscrevem por newsletter/email, portanto sim, o código que fornecemos vai buscar tudo junto num só contador
Abraços
Nelson Costa
Olá Paulo!
Desde que ando nestas andanças do wordpress que acompanho o teu bom trabalho. Vê-se logo que és de Leiria!
Este foi daqueles artigos que apareceu à hora certa!
Fiz tudo bem (penso eu) mas a Hiperligação do facebbok não funciona! Poderias-me auxiliar?
Paulo Faustino
Olá Nelson, obrigado pelo comentário! Espero que ser de Leiria seja uma coisa boa então
Relativamente ao seu problema, não entendi muito bem o que não está funcionando. Qual hiperligação é que não funciona?
Abraços
Downtuga
Paulo acho que o problema aqui do amigo Nelson é o problema que eu tive em implementar no meu blog.
Quando copiamos este código aqui do seu artigo
O twitter tem aquelas plicas… O que se esquecem é que não podem copiar e colar. Tem que apagar as plicas e colocar novamente e tem que ficar assim…
Antes:
Depois:
As plicas ficam rectas, não curvas. O problema é esse.
Downtuga
Não aparece o código
Antes: (‘twitter’) ?>
Depois: (‘twitter’) ?>
Mas o que me refiro é isto, olhe a diferença das plicas
Nelson Costa
Boas! O problema já está resolvido! Obrigado!
Paulo, claro que ser de Leiria é muito bom sinal!
Adenilson Campos Guedes
Você possuem algum script (prefecialmente) ou plugin compatível c/ WordPress 3.0? Esse plugin deu erro no meu WP. Parece que não é compatível.
Parabéns pelo excelente trabalho neste blog!
Alexandre Poseddon
Muito legal!
Eu já uso esse plugin (embora esteja desativado pois estou fazendo um novo blog com mais recursos e serviços).
Fiquei só com uma dúvida, nos teus blogs tu usa o contador de comentários, no meu caso eu fiz um em PHP sem usar plugins, o seu também é assim ou existe um plugin que faça esses 4 itens como no seus blogs?
Alias, Paulo seu blog está de parabéns, não tem um dia sequer que não entro para dar a lida em pelo menos um dos seus artigos, virei um leitor assíduo da Escola Dinheiro… Em breve irei morar na Europa e devo descer e ficar alguns dias em Portugal, terra de meus avós que ainda não conheço, quem sabe não combinamos um café ou uma cerveja! hehe
Divulgue Aqui seu Blog
Olá,
Gostei muito de aprender, é muito bom ver e demonstrar os números e o crescimento em torno da comunidade do Blog.
Abraços;
T3
Paulinho Neto
Paulo primeiramente gostaria de agradecer a partilha de conhecimentos que fornece a todos nos ,aproveitando a oportunidade em dizer que gostei do sistema de recebimento de email assim quando submentemos comentarios no seu site(poderia nos ensinar essa tecnica?) ,que vejo a inexistencia de spam. no minimo deve usar os plugin stander do wordpress o askimet criador pelo criador do wordpress porem para ativa-lo tem que ter uma chave app key que e paga anualmente nao é isso? pois bem gostaria que conferissem no meu site um plugin que utilizei chamado de si captcha for wordpress cujo endereço para download é : http://downloads.wordpress.org/plugin/si-captcha-for-wordpress.zip eliminei spam em 100% pois bem tambem gostaria de pegar o gancho aqui cujo tema para rede de relacionamento e mostrar a app que criei na fan page do meu facebook para subscricao de email confiram lá espero que gostem o endereço é : http://www.facebook.com/planetariogamescom?v=app_4949752878 espero ajudar aqui nessa comunidade de super usuarios Paulo Faustino ja pensou em abrir espaco para colaboradores em seu site?grande abraço realmente seu site é o mais relevante sobre o WordPress
Josué de Souza
Estou tentando ” ATIVAR A API DO FACEBOOK ” mais quando eu entro no link ” http://www.facebook.com/developers/ ” e clico em ” + Set Up New App ” vem a seguinte mensagem: ” Sua conta precisa ser verificada antes de você fazer esta ação. Por favor verifique sua conta adicionando seu celular ou credit card. ”
Eu Cliquei em confirmar pelo celular e recebi o código e confirmei tudo corretamente e mesmo assim continua dando essa mensagem e o celular está confirmado, não consigo criar um App, o quê fazer ?
Ton
Tou com o mesmo problema do Josué de Souza…
=/
Josué de Souza
Ninguém para dar uma resposta sobre o problema meu e do Ton?
Geasi Felipe
Olá, clico em ” + Set Up New App ” é apresentaod a seguinte msg:”Sua conta precisa ser verificada antes de você fazer esta ação. Por favor verifique sua conta adicionando seu celular ou credit card. ” Eu digitei o celular ma so codigo não chegou, só existe essa formar de gerar essas API Key e API Secret ?
kiko
ola Paulo Faustino, parabéns bom conteúdo gosto desse contador de fã mas o meu thema é igual ao seu não da para usar ficaria muito igual ao seu e não é que pretendo, mas vou ter que arrumar algo, o de origem não gosto. http://escolinhaonline.co.cc ,um aparte somos do mesmo distrito,Leiria. Estou a vender um Terreno na graça Figueiró dos vinhos, se conhecer alguém interessado? abraço kiko…
Priscila
Estou tentando me cadastrar na conta de Developer mas não recebo o código de ativação de jeito algum pra continuar o processo, alguem teria alguma dica de alguma outra maneira de fazer isso? Quero muito exibir o numero de curtidores do Facebook no meu WordPress… Obrigada! =)
Luiz Ricardo
Eu instalei o plugin e cadastrei tudo normal, até consigo ver os dados pelo painel, mas quando coloquei a tag na sidebar não apareceu :s Fica como se não tivesse nada, tem como você conferir se esse codigo de por na sidebar esta correto? porquê aqui não apareceu :/ Obrigado…
Victor Passos
Ola Paulo , como está?
Amigo foi quem lhe pediu ajuda pelo email.
Sabe estive a verificar o artigo o qual é excelente, mas será que é possivel aplicar nesse blog que tenho?
Não ´+e comercial, mas de atigos difeentes..
Se possivel colocar como fazê-lo, pois fala no wordpress..
abraço e grato pela amabilidade.
Victor Passos
Jefferson
Olá Paulo, estou mais uma vez por aqui. Muito boa a dica, pra falar a verdade já iria te enviar um e-mail pedindo instruções, porque meu contador não funcionando p/ o FeedBurner. Mas agora, com esse post, esclareci minhas dúvidas. Continue com Deus. Valeu!