Contador de visualizações individual para cada post do blog

em 31 de janeiro de 2017

Contador de visualizações individual para cada post do blog

Em meu blog de códigos tenho, há algum tempo, um contador de visualizações individuais para posts que sempre gerou muita curiosidade.
Sempre me pedem pra ensinar como coloquei, mas nunca me animei por um motivo bem simples: para blogs mais antigos, com bastante posts, ele é meio injusto.

Explico: é que esse contador só começa a contabilizar os views à partir de sua instalação, ou seja: não conta as visualizações que cada post já tenha.
Tem outro detalhe: ele nem sempre mostra a quantidade exata de visualizações.
Um exemplo é este post:


As estatísticas do Blogger dizem que ele tem, até agora, pouco mais de 30 mil views. O contador mostra bem menos, pouco mais de 26 mil.


Não sei o motivo, mas creio que seja porque o contador só contabiliza 1 acesso por IP. Ou porque, quando chega em um número grande de acessos ele simplesmente pára...
Não tenho certeza do motivo,mas deixo avisado, ok?

Outra coisa que acho importante mencionar é que o site Firebase possui um plano gratuito, que é o que eu uso em meu blog de códigos e de testes, e possui também um plano pago.
A má notícia é que o plano gratuito não "dá conta" de blogs com muitos acessos.
Ele não suportaria, por exemplo, este meu blog principal que em dias de muitos acessos pode passar dos 15 mil views.
Mas se seu blog tem menos acessos ele suporta sem problemas.
Considerações feitas, vamos aprender?


Como instalar no blog o contador de visualizações individuais de cada post?



Para começar você precisa estar logado em sua conta Google, essa mesma do seu blog.
A seguir acesse esse site:
https://console.firebase.google.com/

Na página que abrir clique no botão azul Criar novo projeto. Assim:

Na página que abrir escolha um nome para o projeto (sugiro o nome de seu blog, tipo elainegaspareto, por exemplo) e selecione seu país. Clique em Criar projeto.
Anote o endereço que foi gerado ao criar o projeto.
No caso do meu teste o endereço gerado foi testes-2e5e5.firebaseio.com.
Reserve esse endereço.
Se não conseguir anotar basta voltar à página inicial, ali está o endereço de seu projeto.

Projeto criado?
Abra a página com os códigos necessários à realização deste tutorial, e a mantenha aberta:


Copiar os códigos


Instalando o contador no blog:

Agora vamos ao blog onde você deseja inserir o contador.
Clique na aba Modelo, e a seguir clique em Editar HTML.
Dentro da caixa de código tecle, simultaneamente, Ctrl+F.
Na barra de busca que surgir digite  ]]></b:skin> e tecle Enter para localizar.
Acima disso cole o CÓDIGO CSS.
Salve.

Agora localize a tag de fechamento </body> e acima dela cole o CÓDIGO JAVASCRIPT.
Preste atenção agora!

No campo onde você lê SEU ID AQUI apague e coloque o seu endereço gerado no site Firebase.
Isso é fundamental, não esqueça!
Salve.

Feito isso vamos instalar o contador onde ele deve aparecer.
Localize essa linha em seu código-fonte:



Abaixo dela cole o CÓDIGO HTML. Salve.
Isso colocará o contador na mesma posição do meu, à direita do título dos posts.
Caso queira alterar a palavra Visualizações basta apaga-la nesse código e substitui-la pela palavra que desejar.
Também é possível mudar o local onde inserir o contador, mas aí deixo por sua conta, vá mudando o código de lugar e vendo onde ele se encaixa melhor, de acordo com o que você deseja.

Também é possível personalizar a aparência do contador.
Isso [e feito no CÓDIGO CSS.
Nele você altera a imagem do contador (em background), a cor dos números das visualizações, a fonte do contador, o alinhamento (right= direita; left=esquerda), etc.
Vá mexendo até ajustar e ficar com a carinha que você deseja.

Importante:
O script deste contador foi depurado pelo metablogger paquistanês Mohammad Mustafa Ahmedzai.

Para facilitar o entendimento deste tutorial eu gravei sua execução em vídeo.
Aperta o play e veja como é simples!







Gostou?
Que tal ajudar esta blogueira que vos fala utilizando o Método Cococu de apoio ao blog?
*Método cococu:
co= compartilhar
co= comentar
cu= curtir

Método cococu de ajudar essa blogueira que vos fala! 😄
Ajudaê, mig@s!!!


Caso queira ver o blog de testes onde inseri o contador para realizar a execução deste tutorial clique no botão abaixo.

Demonstração do tutorial


Enjoy!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

7 comentários , comente também!

  1. Oi Elaine, é a Vi,como sempre, seus tutoriais é bem explicadinho, parabéns.
    Muitos beijos,Vi

    ResponderExcluir
  2. Oi, Elaine, adorei! Só que o meu só fica carregando em círculo, por que será? Obrigada, bjs!

    ResponderExcluir
    Respostas
    1. Érica, pode ser algum conflito com algo que já exista no blog.
      Aconteceu com um dos meus testes, em geral se tiver scripts que usam o mesmo jquery pode acontecer de um anular o outro.

      Excluir
  3. Excelente diga Elaine! Pena que ele não contabiliza os acessos que o post já recebeu anteriormente,

    Abraços!

    ResponderExcluir
  4. NOSSA VIREI JA SUA FÃ POIS TO MONTANDO UM BLOG SOMENTE COM SUAS DICAS E SEUS CODIGOS ESTOU MUITO FELIZ OBRIGADA POR TUDO

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…

Para receber os posts diariamente:

Digite seu email e receba nossas
atualizações gratuitamente



Para receber a newsletter semanal fofa e especial:

Assine minha newsletter linda!

* indicates required