16 de janeiro de 2017

Adicionar contador de visualizações nas postagens do Blogger

Um recurso muito pedido é colocar um contador de visitas em cada artigo do blog, infelizmente essa é uma função que não vem nativa no Blogger, até tem, porém só você consegue visualizar pelo Painel do Blogger em Postagens. Agora vou ensinar um jeito para você colocar um contador em cada artigo dinamicamente.


Já vi vários tutoriais na internet que ensinam a fazer isso, porém estão todos desatualizados e a maioria não funcionam mais, além de serem feios. Grande parte também eram feito com imagens gif contabilizando os acessos e dependiam de sites terceiros, claro que este que vou ensinar também depende, porém ele é feito totalmente em javascript e se comunicando com Firebase que é um serviço gratuito do Google, ou seja, difícilmente teremos problemas futuro com o contador.

Eu mesmo estou utilizando este contador aqui no blog, então se você reparar bem ali no começinho do artigo eu implementei o contador. Veja que fica bem bonito dando um 'toque' mais profissional para o blog. Mas é claro que tem seus pontos negativos também, um exemplo é se você tem poucos acessos em seu site. Se você deseja passar creditibilidade e seu blog tiver poucos acessos, eu recomendo a não usar este contador. Caso contrário vamos aprender agora!

Criando e configurando um APP no Firebase

Para que o contador funcione corretamente, você precisa criar uma conta no Firebaseio. Vou mostrar como criar e configurar corretamente sua conta.
  1. Acesse o Firebase
  2. Clique em Criar novo projeto, de um nome e escolha o país para sua aplicação, depois clique em Criar projeto.
  3. Você será redirecionado para a página de visão geral, no menu lateral, vá até Database e clique em Regras
  4. Na página Regras, adicione a seguinte condição e clique em Publicar
    {
    "rules": {
    ".read": true,
    ".write": true
    }
    }
Pronto, seu Firebase está pronto para ser adicionado em nosso código abaixo. Guarde o endereço do seu firebase, normalmente é o nome que você deu ao app sem espaços ou acentos.

Como adicionar um contador de visualizações nos artigos

Vamos lá! siga atentamente os passos abaixo que não tem erro.
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.
  1. Acesse o Painel do Blogger
  2. Vá até Modelo > Editar HTML clique sobre o editor e tecle CTRL+F e procure por </body> e acima do trecho encontrado cole:

  3. <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
    <script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
    <script> 
    $.each($('a[name]'), function(i, e) { 
    var elem = $(e).parent().find('#postviews'); 
    var blogStats = new Firebase("https://NOME-DO-SEU-APP.firebaseio.com/pages/id/" + $(e).attr('name')); 
    blogStats.once('value', function(snapshot) { 
    var data = snapshot.val(); 
    var isnew = false; 
    if(data == null) { 
    data= {}; 
    data.value = 0; 
    data.url = window.location.href; 
    data.id = $(e).attr('name'); 
    isnew = true; 
    } 
    elem.text(data.value); 
    data.value++; 
    if(window.location.pathname!='/') 
    { 
    if(isnew) 
    blogStats.set(data); 
    else 
    blogStats.child('value').set(data.value); 
    } 
    }); 
    }); 
    </script>
  4. No trecho NOME-DO-SEU-APP destacado no código, altere para o que você criou lá no firebase.
  5. Feito isso, agora procure por <data:post.body/> ou <data:post.body />
  6. Provavelmente você vai encontrar mais de um resultado. Na maioria das vezes é o segundo trecho encontrado que vai alterar. 
  7. Imediatamente antes do trecho encontrado, cole o seguinte código:

  8. <a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/>
Pronto, se você seguiu corretamente e colocou os códigos nos lugares indicados certinho, seus artigos começarão a exibir o contador.

Dúvidas? deixe um comentário abaixo
5 estrelas - baseado em 29 votos

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

44 comentários

Muito boa esta dica porem: Faltou colocar o tutorial junto do firebaseio que para muito seria de grande ajuda criando um ID para o Aplicativo!

Parabéns pelo Post!

Olá,

Muito obrigado, fico feliz que tenho lhe ajudado.

Quanto ao APP do firebaseio é opcional, o contador vai funcionar com ou sem ele. Achei mais pratico deixar assim.

Abs

Vocês fazem parecer fácil..#sqn, segui tudo e não deu certo
Tá bem explicadinho, mas não sei, não foi.

Effy,

Está funcionando 100%. O que pode acontecer é algum conflito no seu template. Ou talvez você não tenha configurado o Firebase corretamente, você certificou-se de que colocou a Regra mostrada acima no Firebase?

Analisei o seu blog, peço que você retire o seguinte trecho do seu template:
<div id='views-container'><span class='views-icon'></span><div class='views-text'>Views:</div>
<div class='mbtloading viewscount' id='postviews'></div></div>

Remova esses trechos, talvez possa estar dando conflito. Não sei se vai funcionar mais não custa tentar, até porque provavelmente você não vai querer 2 contadores rs.

Qualquer coisa estou a disposição para te ajudar.

Gostei muito da postagem. Achei interessante e bem explicado. Valeu. XD

Fiz tudo correto, porém, apareceu somente o ícone do olho, é normal?

Olá Emerson,

Pode me passar o endereço do seu blog para eu verificar?

Provavelmente é uma má configuração do Firebase.

Aguardo

Existe alguma possibilidade de colocar as visualizações, ocorridas até o momento, em cada post? Por exemplo: Uma postagem minha tem 4 mil visualizações, existe algum código que possa mostrar essa quantidade na postagem?

Pois esse código começa do zero.

Talvez você consiga alterar direto lá no console do firebase, depois de configurado no site.

Não consegui fazer essa aplicação

Ola Patty,

Qual erro você está enfrentando?

Gostei do tutorial, mas não funcionou no meu. Onde será que errei.
www.marcelogomesfit.com.br

Olá Marcelo,

Peço que você re-faça o tutorial nos mínimos detalhes e seguindo a risca como eu mostrei, faz isso que não tem erro!

Esse tutorial é um pouco complicado mesmo então ele tem que está tudo configurado corretamente. Inclusive as configurações de Regras que tem de ser feitas lá no Firebase como mostrado no tutorial.

Qualquer dúvida estou à disposição.

Olá Ebrahim.
Fiz o processo umas 5 vezes e não apareceu nada mesmo. Amanhã vou tentar novamente. Talvez possa ser o tema, sei lá. Mas obrigado.

Se o erro persistir, me envie um e-mail pelo formulário: http://www.codigosblogger.com/p/contato.html

Que tento te ajudar melhor.

Olá o meu não deu certo será o que aconteceu fiz tudo certo..passo a passo

Não encontrei o código no seu template, tente refazer novamente passo a passo e me informe.

Este comentário foi removido pelo autor.

Não encontrei o código incorporado no seu template.

Por favor me ajude... APENAS O OLHO apareceu no meu blog e não os números... me ajudem https://fxgamestorrent.blogspot.com.br/

hice todo pero solo aparece el ojo en mi blog:
http://www.iniciabloguero.tk/

o meu só aparece o icone do olho me ajudem https://fxgamestorrent.blogspot.com/

Olá, você deve alterar as permissões no Firebaseio para funcionar, como está explicado no tutorial.

Olá, você deve alterar as permissões no Firebaseio para funcionar, como está explicado no tutorial. Também deve adicionar esse tutorial dentro da postagem e não para ser exibida no resumo na página inicial como foi feito.

Olá, você deve alterar as permissões no Firebaseio para funcionar, como está explicado no tutorial. Também deve adicionar esse tutorial dentro da postagem e não para ser exibida no resumo na página inicial como foi feito.

fiz o processo 7 vezes e não Funcionou.. fiz tudo no Firebaseio mas mesmo assim não deu certo... site excelente mas, ....

Tá aqui: https://emersonblogtest.blogspot.com.br/

Você deve adicionar o script apenas na postagem interna, está sendo exibido na HOME também, por isso não vai funcionar.

Você deve adicionar o script apenas na postagem interna, está sendo exibido na HOME também, por isso não vai funcionar.

Como faz para "adicionar o script apenas na postagem interna" tentei e tbm só aparece o olho.

Excelente!
http://conectadosaopaulo.blogspot.com.br/

Só seguir atentamente o tutorial.

Aun sigue mi blog sin enseñar ese contador...

Peço para seguir o tutorial a risca que não terá problemas!

el ojo aparece pero no la cantidad de veses que se visito el post. y ya lo hice tres veces y nada de nada

Verifique o Firebaseio e as suas permissões!

Meu brother, show de bola. Deu tudo blz aqui, o único que ficou top no meu blog, parabéns !!! Continue sempre assim mano nus ajudando a melhorar nosso blog cada vez mais.!! Agradecido!! AbraçOo. Queria te perguntar onde posso pegar o css dos comentário do teu site aqui, achei muito massa e gostaria de adicionar no meu vlww.!!

Olá amigo, deu um probleminha aqui, em todos os posts aparecem a mesma quantidade de views por exemplo se um post tem 150 views quando abre outro post fica 151 views como se não mostrasse apenas as visu da quele post e sim em modo geral entende. Agradeço muito se poder mim ajudar vlww.

Olá, neste caso por favor verifique se fez corretamente os passos 4 e 5.

Sim, sim. Já refiz os passos, repeti agora e é a mesma coisa. É como se somasse de modo geral as views, não aparece as views que cada post realmente tem por exemplo: post tal 21 views,outro post 50 views. Sempre vai somando todos os post que abro entende. acho que deve ser algum comando, eu coloquei na segunda e aparece tudo massa é só esse bug mesmo. Num sei o que faço rsrs!!

Qual é o endereço do seu blog?

Olá, Ebrahim! Tudo bem?

Aqui cara, eu segui o tutorial seu e não deu certo, não consegui colocar o contador. Te mandei prints pelo facebook, depois tem como dar uma força? Meu nome é Yvens!
Abraço!

Ebrahim, você pode me dar uma força? Eu segui os passos e não apareceu o contador. Eu mandei as imagens/prints para o seu facebook.

Abraço!


Abrir lista de emoticonFechar lista de emoticon