Contador de visitas en las entradas individuales para Blogger

Este contador de visitas muestra el conteo por impresiones no por usuarios únicos que pueda tener el blog ni mucho menos las visitas de manera general. El contador solo es para cada una de las publicaciones de forma indivudual. Dicho conteo iniciara desde que lo instales y no contara las visitas que hayas tenido con anterioridad. El contador de visitas se muestra en cada una de las entradas individuales.

Contenido

1. Introdución
2. Crear una base de datos en Firebase de Google
2.1 Agregar un proyecto
2.2 Crear una base de datos
2.3 Realtime Database

3. Instalar el Contador de Visita
4. Referencias

1. Introducción

Mostrar la veces que se ha visto una publicación en el blog le brinda cierta confianza e interés a los lectores de nuestros blogs dándoles cierta relevancia por la cantidad de visitas que contiene dicha entrada, dicho en otra palabras es un voto de confianza al ver las visitas generadas. Este tutorial esta basado en la lectura y escritura de un JavaScript con ayuda de Firebase de Google que permite la creación de Base de datos, alojamiento y bases de datos en tiempo real de forma gratuita así como también en formato de pago dependiendo el proyecto que tengamos pensado realizar.

2. Crear una base de datos en Firebase de Google

Entra a https://firebase.google.com/ y selecciona Comenzar o Acceder si ya tienes una cuenta

2.1 Agregar un proyecto

Cuando creas un proyecto te aparecerán 3 ventanas el cual tendrás que proporcionar los datos de tu nuevo proyecto que en este caso seria un "Contador de Visitas", recuerda que puedes ponerle el nombre que tu quieras.

Paso 1 Nombre de tu proyecto; Paso 2 Conecta con Analytics (es opcional pero es recomendable enlazar a una cuenta de Analytics); Paso 3 Selecciona una cuenta de Analytics (en caso de no tenerla se presenta una opción de crear cuenta y de forma automática). ¡Listo! tu nuevo proyecto se ha creado.

2.2 Crear una base de datos

Una vez que estés dentro de tu proyecto para el Contador de Visitas. Nos dirigimos a Firestore Database, Comenzar proyecto y seleccionamos Iniciar en Modo de Producción.

Posteriormente damos habilitar y nuestra Cloud Firestore esta lista.

2.3 Realtime Database

Para que el contador se actualice de forma automática, crearemos un una base de datos en tiempo real. Seleccionamos Realtime Database, Crear una base de datos. Configuramos la bases de datos como mejor convenga y presionamos el botón siguiente... En reglas de seguridad seleccionamos Modo Bloqueado.

Ahora que se formo una base de datos en tiempo real copiaremos el link que nos proporciona Firebase (Imagen 2.3 Nº4) https://URLbasededatos.firebaseio.com/ lo copias y lo guardas ya que mas adelante utilizaremos esta URL. Nos dirigimos a Reglas y podrás ver el siguiente código el cual cambiaras false por true.

{

  "rules": {

    ".read": false,

    ".write": false

  }

}

Una vez que lo hayas modificado te mostrara un mensaje de advertencia, puedes ignorarlo y continuar si así lo quieres.

Hasta aquí hemos terminado la creación de una base de datos para nuestro Contador de Visitas por entradas individuales.

3. Instalar el Contador de Visita

Nos vamos a Tema, Personalizar en Editar HTML, en la plantilla buscamos </body> justo arriba pegamos el Código 1 y lo que esta en color rojo lo sustituyes por la url que guardaste anteriormente en (Imagen 2.3 Nº4).

Código 1 

<!--Contador de visitas-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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://URLdelproyectoenFirebase.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>

</b:if>

<!--FIN Contador de visitas -->

Ahora buscamos </head> y arriba colocamos el Código 2.

Código 2

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Por ultimo sigue el Código 3 este hará que se visualice la cantidad de veces que se imprime o visita una entrada en Blogger, colócalo en donde mejor te convenga (por lo regular va a un lado del autor o después de la fecha de publicación en un blog). El tamaño del icono suele ser de 15px o 20px.

Código 3

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<span>

<img src='URLdelicono'/> <a expr:name='data:post.id'/> <span id='postviews'/> Veces visto

</span>

</b:if>

4. Referencias

8photo (s/f). Mujer señalando. Freepik. https://www.freepik.com/free-photo/wonderful-lady-pointing-front-sweater-jeans-looking-confident-front-view_17465558.htm

Blog of Girls (2019, viernes 28). Crear un contador de vistas de publicaciones en Blogspot. https://blogofmygirls.blogspot.com/2019/06/create-post-view-counter-in-blogspot.html

drobotdean (s/f). Hombre camisa cuadrada y barba. Freepik. https://www.freepik.com/free-photo/full-length-portrait-confident-happy-man_6819509.htm

karlyyukav (s/f). Hombre camisa blanca. Freepik. https://www.freepik.com/free-photo/modern-technology-electronic-devices-concept-stylish-positive-young-male-manager-using-digital-tablet-work-businessman-formal-wear-holding-touch-pad-portable-computer_11891900.htm

nakaridore (s/f). Mujer cabello rosa. Freepik.https://www.freepik.com/free-photo/happy-amazed-nice-pink-haired-lady-blue-t-shirt-with-wide-open-mouth-surprise-broadly-smiling-stands-pink-background-pointing-right-copy-space_10884402.htm

Rykrdo (2019, diciembre 25). Nos vamos a la consola de FireBase y creamos una nueva aplicación, En el 2 de 3 la damos en Continuar [Comentario en un foro: "Contador de Visitas con Firebase para Blogger"]. stackoverflow. Recuperado el 10 de enero de 2021 en https://es.stackoverflow.com/questions/313240/contador-de-visitas-con-firebase-para-blogger?fbclid=IwAR0WwwThftv_9PMvsUkRRNgS61KaLpvLpKpqvMKcGl5a_kjk5t_94yhKuHE

Rykrdo (2019, 19 de diciembre). Contador de visitas individuales para cada entrada. Foro Beta. https://forobeta.com/temas/contador-de-visitas-individuales-para-cada-entrada.741021/

pressahotkey (s/f). Chica joven negocios. Freepik. https://www.freepik.com/free-photo/young-attractive-emotional-girl-business-style-clothes_5333556.htm