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:

Código da caixa de curtir do Facebook

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:

<div class='post-header'>

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!