Contador de visitas en las entradas individuales para Blogger


Mendoza Salazar Veces visto


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
  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.

contador de visitas

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

Firebase

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.1 Crear proyecto en Firebase

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.

2.2 Firestore Database (1)

Posteriormente damos habilitar y nuestra Cloud Firestore esta lista.

2.2 Firestore Database (2)

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.

2.3 Realtime Database (1)

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
  }
}


2.3 Realtime Database (2)

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>

3 Instalar en contador de visitas en blogger

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

Comentarios

  1. Olá, Aaron!
    Passando rapido só para te desejar uma boa noite e ótima quarta-feira.

    Um abraço.

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias mi buena amiga Faty. Un fuertísimo abrazo y que tengas un buen año

      Eliminar
  2. Excelente aporte! Funcionó todo correctamente. Tal cual lo mencionas! Muchas gracias

    ResponderEliminar
    Respuestas
    1. Ten mucho éxito en tus proyectos. ✍🏼

      Eliminar
    2. Una duda....Al parecer el contador no funciona con las vistas de celular? No me figuran las vistas cuando veo el blog en el cel. Gracias

      Eliminar
    3. Hola Augustob, actualmente funciona el contador tanto en Móviles como en PC lo revise utilizando mi blog. Esto no quiere decir que no existan errores, el problema esta en el sistema de Blogger en cuestión a los script en lo que a mi respecta hay unos códigos que dejan de funcionar mientras en otras cuentas funcionan correctamente así estén utilizando la misma plantilla. Buscare una solución a esto ya que tengo algunas otras funciones que me han dejado de trabajar. Gracias por tu observación.

      Eliminar

Publicar un comentario

No agredas a otros usuarios, no violentes ni faltes al respeto a otras personas que no conozcas.