Contador de visitas por entrada para Blogger

Hace tiempo que he querido saber cuántas personas revisan mis publicaciones en blogger, pero lastimosamente los blogs desarrollados bajo la tecnología blogger, no disponen de este sistema de cara al usuario.

¿No sé si lo has querido tu también?

Internamente blogger permite saber cuántas personas revisan tus publicaciones, es decir, como administrador tu si puedes ver cuántas personas vieron tu post; pero no las personas que visitan tus publicaciones.

Por otro lado, puedes ayudarte de servicios externos del propio Google, como lo es, el Google analytics quien te da la facilidad de ver muchas métricas no solo de quien visita tu entrada, si no, de un conjunto de actividades que realizan las visitas en tu blog.

Ya sea de la administración de blogger o desde Google analytics, es necesario que entres con tu cuenta de administrador, para lograr ver esas métricas. Pero que sucede, si quieres que tu audiencia vea ese dato, es decir, que puedan ver las veces que ha sido abierta, revisada o leída esa entrada de tu blog.

Aunque parezca algo ya en desuso o que no sirva para nada, mostrar cuantas veces fue leído un post, en ocasiones resulta muy importante, puede darle una idea a tu audiencia sobre la acogida que tienen tus publicaciones.

Lo cierto es que ya desde hace años he querido habilitar este plugins contador de posts en blogger.

En la internet había un JavaScript que cumplía este cometido, pero dejó de funcionar porque este archivo fue borrado del servidor donde se alojaba.

Contador de visitas por entrada para blogger de Ayudarbloggers (caducado):

<script src='http://visitas.ayudarbloggers.com/visitas.js' type='text/javascript'/>

Contador de visitas para entradas de Ciudadblogger (caducado):

<script src='http://wizom.net/counter.php' type='text/javascript'/>

Indagando sobre el asunto, termine viendo tutoriales de cómo crear un contador de visitas con Mysql y php, que lastimosamente blogger no soporta, porque no dispone de estos servicios, al menos no de cara a los creadores de contenido.

Lo bueno de esto es que ya tenía una idea de cómo hacerlo, además, de que si o si necesitaba un hosting para hacerlo funcionar. Teniendo esto claro, comencé con una nueva búsqueda: base de datos de libre acceso, para evitarme adquirir un hosting y tampoco usar uno gratis, ya que terminan cerrados en poco tiempo.

Es así donde encuentro Firebase, que es una plataforma para el desarrollo de aplicaciones web y aplicaciones móviles desarrollada por Google, que cuenta con una Database.

Database o Firebase Realtime Database, es una base de datos alojada en la nube. Los datos se almacenan en formato JSON y se sincronizan en tiempo real con cada cliente conectado.

Interesante verdad?

Bien, solo faltaba saber cómo funciona Firebase y cómo hacer correr su Database desde blogger.

Me tomo 24 horas entender todo el asunto y dar con el javascript correcto (El còdigo javascript no lo hice yo, no me llevare el credito por ello).

Puedes ver el plugins contador de vistas en blogger en funcionamiento, solo da clic en el siguiente botón.

En la red hay muchos tutoriales de cómo poner contador de visitas en blogger con firebase, pero la gran mayoría ya no funcionan, en vista que, son con código con versiones anteriores de Firebase.

Lo único que hice fue buscar un JavaScript, a mi parecer no tan complejo y hacerlo funcionar.

Ahora te detallo como lo hice para que puedas poner un contador de visitas en cada entrada blogger.

Presta atención:

Empieza tu entrenamiento Blogger...

En 18 videos te explico cómo cambiar el aspecto simple o desagradable de tu blogspot.

Únete es gratis!

Cómo agregar contador de visitas en blogger

Lo primero que debes hacer es, crear y activar una cuenta en Firebase con tu cuenta de Google y seguir los pasos proporcionados por Firebase para activar tu cuenta.

Para ello entras con tu cuenta de google a esta dirección: https://www.firebase.com/signup

Luego crea un nuevo proyecto para almacenar tus estadísticas o importa un proyecto de Google si ya tienes uno.

Asigna un nombre a tu proyecto (por ejemplo, denominé mi proyecto como tutorialblogger-demo ) y presiona CREAR PROYECTO. El nombre de tu proyecto debe ser único. Asegúrate de pasar por todos los términos y condiciones antes de continuar.

Serás redirigido automáticamente a la página de resumen del proyecto; de lo contrario, haz clic en “Información general del proyecto” en el menú de navegación izquierdo y da clic en la rueda dentada y luego en configuración del proyecto.

En esa página, al final, buscas “Firebase SDK snippet” y copias todo el script que aparece. Tu código debería verse como el siguiente:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "clave-nombre-tu-proyecto",
    authDomain: "nombre-tu-proyecto.firebaseapp.com",
    databaseURL: "https://nombre-tu-proyecto.firebaseio.com",
    projectId: "nombre-tu-proyecto",
    storageBucket: "nombre-tu-proyecto.appspot.com",
    messagingSenderId: "ID-nombre-tu-proyecto",
    appId: "AppID-nombre-tu-proyecto"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

Una vez que tienes ese código, lo guardas en un archivo aparte, para tomar cietos datos luego.

No te preocupes por cosas técnicas para crear tu proyecto en firebase, porque he creado para ti un corto video con lo que debes saber para que funcione sin problemas. Solo te pido un favor, cuando termines de ver el video y logres crear tu primer proyecto en firebase, comenta en ese video lo siguiente:

“Gracias a @tutorialblogger podré colocar mi contador de vistas en blogger”

Colocar el contador de vistas por entradas en blogger

Ahora debes entrar en la administración de blogger – tema – clic en los tres puntos verticales – editar HTML.

No olvide antes sacar una copia de respaldo de tu blog, por si las moscas ;)

Una vez allí, buscas (ctrl + f) el head del blog e introduces la librería Jquery después de "<head>" o antes de "</head>"

<!-- Iniciando jquery para condador de vistas -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js'/>

Si tu blog ya dispone de esta librería, omites este paso ok.

Contador de visitas blogger gratis

Luego de implementar la librería Jquery, debes colocar el javascript que ejecutará la acción de conectar blogger con la base de datos en Firebase o mas bien guardara el numero de veces que fue visto determinado post.

Encuentra (ctrl + f) "</body>" Copie el siguiente código y péguelo antes de </body>.

<!-- Contador de visitas post firebase :: tutorialbloggerorg.blogspot.com -->    
<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://nombre-tu-proyecto.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>

Una vez realizado esos pasos, debes poner el fragmento de código que mostrara los datos almacenados en Firebase, es decir, el código que muestra las vistas de las entradas de cada al usuario o audiciencia de tu blog.

Para ello, buscas la siguiente línea de código "<data:post.body/>" y antes o despues de ella pegas el siguiente código:

<a expr:name='data:post.id'/> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC_eiX7JcpAAg6h4VLfklJXbokz97aVtuyZ6VaXFu6VIdEa0YeGmmZrAfCeXBr0Px_tG3xpOUuIeLFDvJcOs4pKyhRLLG6sb_STU_toMJB_D_W76sBw9zZDHgInwngrB04fJKiXSLCTaI/s16/16-16-3e2396997bba04e99a4c5e5c5ad2be24.png' title='visita'/> <span id='postviews'/> Vistas

Si tu blog tiene una plantilla por defecto de blogger, solo debes buscar la línea de código donde quieres que se muestre el contador de vista blogger y colocarlo antes o después y este código que muestra las visitas en las entradas de blogger hará el resto.

Si realizas estos pasos como te lo he dicho, tendrás el contador de vistas por entradas en blogger funcionando de mil maravillas, caso contrario este dará algún problema en su funcionamiento.

Si tiene problemas en hacer funcionar este contador de vistas en blogger, no dudes en abusar del área de comentarios, te echare una mano en lo que pueda, mientras el tiempo me lo permita.