Contador de visitas individual | Blogger

 


Hace tiempo realice un tutorial en un blog antiguo que tenía como Hobbie ⌛sobre ¨Como implementar un contador de visitas individuales para Blogger¨. Muchos desarrolladores habían comentado que esto era factible siempre y cuando se introdujeran librerias de terceros en nuestro blog. 

También hubo un usuario en Forobeta que hizo una investigación respecto a este tema pero ya ese tutorial no nos sirve. Tanto firebase como las librerias utilizadas han cambiado ciertas funciones y las antiguas versiones caducen a un determinado tiempo, por tal motivo me he motivado a realizar un nuevo tutorial explicando paso a paso de como funcionaría el nuevo.

Configuración

1. Lo primero que debemos de hacer es registrarnos en firebase y dar de alta a un proyecto.

Página oficial de Firebase

2. Una vez dado de alta nuestro nuevo proyecto. Procederemos a crear nuestra Base de datos en tiempo real, para hacer este paso solo necesitas dirigirte al sidebar izquierdo > Compilación > Real time data base


Nos aseguramos de marcar esta casilla, de lo contrario no funcionará.

3. Procedemos a cambiar las reglas false (las cuales vienen por defecto) x True.

Instalación

1, Pegamos el siguiente codigo arriba de </body>:
<!--Contador de visitas-->
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script>
<script> $.each($("a[name]"), function(i, e) { var elem = $(e).parent().find("#postviews"); var blogStats = new Firebase("https://kiushu-fe503-default-rtdb.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>
<!--FIN Contador de visitas -->

2. Ahora buscamos <head> y pegamos la version de la libreria que nos ayudara a correr nuestra aplicacion: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

3. Por ultimo imprimimos el numero de visitas de nuestra entrada (cabe destacar que el contador comenzara a contar una vez este entre en funcion). 
<a expr:name='data:post.id'/><i class='fa fa-eye'/> <span id='postviews'></span>

Consideraciones


Deben de cambiar mi nombre de la app (https://kiushu-fe503-default-rtdb.firebaseio.com/) por las que ustedes crearon

Demostración: Prueba
Compartir