Tutorial: Contador de visitas individuales para cada entrada

Rykrdo

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
4 Mar 2018
Mensajes
546
Bien chicos, ya hace tiempo estuve buscando una forma para poder poner esto en blogger(Así como en WP)
Muchos desarrolladores me decían que es posible pero con la ayuda de terceros.


Para los que quieran tener el contador, aquí les dejo un tutorial.

1.- Nos vamos a la consola de FireBase y creamos una nueva aplicación
1576778194993.png

2.- En el 2 de 3 la damos en Continuar

3.-
En el paso 3 seleccionamos la cuenta en la que quieres crear la aplicación y le damos a Crear Proyecto
1576778344743.png

4.-
Le das en Continuar
1576778542750.png

5.-
Muy bien, estando en la consola nos vamos a Desarrollar - Database - Crear base de datos
1576778702375.png

6.-
Seleccionamos MODO DE PRODUCCIÓN
1576778841804.png

7.-
Sólo le das a Listo
1576778930712.png

Nota 1:
Tendremos que esperar un momento para que termine de cargar...

Ok, aquí en Database le damos a Cloud Firestore y la cambiamos a Realtime Database
1576779102010.png
Así ...
1576779204314.png

8.- Ok, aquí nos vamos a Reglas - cambiamos read y write a true y le das a Publicar
1576779295127.png

Bien, en Firebase eso es todo, lo que ya faltaría es saber el nombre de nuestra app, en mi caso es visitasforobeta

Nota 2:
Si no saben cual es la que ustedes crearon, la pueden ver en la url
1576779771782.png

9.-
Muy bien, ahora nos vamos para Blogger - Tema

10.-
Buscamos </body>

11.- Arriba de </body> pegamos...
Insertar CODE, HTML o PHP:
<!--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://visitasforobeta.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 -->
Nota 3: Pongan múcha atención donde dice visitasforobeta, tienen que reemplazarlo con el nombre de la app que crearon.

11.- Bien, ahora buscamos </head> y arriba de eso pegamos...
Insertar CODE, HTML o PHP:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
12.- Muy bien, ahora con este code imprimiremos el numero de visitas que tiene la entrada
Insertar CODE, HTML o PHP:
<a expr:name='data:post.id'/><i class='fa fa-eye'/> <span id='postviews'></span>
Muy bien, eso es todo, espero que le funcione este tutorial y que puedan agregarlo a sus plantillas.

Nota importante 1: Si no sabes como agregar correctamente contacta a un desarrollador para que te pueda ayudar(Aquí en el foro hay muchos muy buenos que te pueden ayudar)
Nota importante 2: Crear una copia de seguridad de tu plantilla por si ocurre algún error.
Nota importante 3: Las visitas se comienzan a contar desde el momento que agregas todos los codes, no se cuentan desde que creaste el blog.
Nota importante 4: Este code es de uso libre, no permitas que sea comercializado de ninguna forma, sólo comparto contenido para que todo el mundo lo pueda hacer.

-Agradecimientos-
💟
*Muchas gracias a BlogOfGirl por el tutorial.
*Gracias al ususario anfegr por ayudarme con el code del Paso 11
*Y por último, gracias a todos los que compartan este post para seguir mejorando sus plantillas y que se vean más geniales.
 
Última edición:

Octavio Zavalaga

VIP
Ni
SEO
Verificado con documento
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
15 Ago 2016
Mensajes
3.820
Excelente tutorial, lo vere a mas detalle
 

Ivan_Caal

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
23 Sep 2019
Mensajes
112
Edad
24
Gracias Genial Me va a servir bastante pero el paso 12 donde se coloca disculpe
 

L I V E

Baneado
No recomendado
Verificación en dos pasos desactivada
Desde
14 Nov 2019
Mensajes
241
Buen tuto tengo que hacerlo.
 

byzarz

Gamma
SEO
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
28 Sep 2017
Mensajes
300
;) Lo malo de ese método es que hace peticiones a otro servidor, y reduce la carga de la página.

Existe otro método para incluirlo en el archivo functions.php y llamar con un shortcode en el single.php
 

Rykrdo

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
4 Mar 2018
Mensajes
546
;) Lo malo de ese método es que hace peticiones a otro servidor, y reduce la carga de la página.

Existe otro método para incluirlo en el archivo functions.php y llamar con un shortcode en el single.php
Cualquier modificación también sería valida para mejorar el tutorial.
Si puedes compartir esa info sería genial.
 

JuarbeAbraham

No recomendado
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
18 Dic 2019
Mensajes
440
Edad
29
Estuve buscandolo por todas partes, lo probe y funciona perfectamente. Pueden verlo aqui en acción: www.seriesdesobra.com

Muchas gracias! =)

screenshot-www.seriesdesobra.com-2019.12 (1).png
 

aleh.3120

Curioso
Verificación en dos pasos desactivada
Desde
1 Feb 2020
Mensajes
4
Buen tutorial, pero tengo una duda porque al final de la url del blog pone unos numeros mas?

algo asi: ****.blogspot.com/?zx=89965284c1637559
 

Rykrdo

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
4 Mar 2018
Mensajes
546
Buen tutorial, pero tengo una duda porque al final de la url del blog pone unos numeros mas?

algo asi: ****.blogspot.com/?zx=89965284c1637559
Ok, eso es por que el blog es para mayores de edad y al momento que aceptas el mensaje de ADVERTENCIA DE CONTENDO, eso ya depende la configuración de tu blog.
 

aleh.3120

Curioso
Verificación en dos pasos desactivada
Desde
1 Feb 2020
Mensajes
4
Ok, eso es por que el blog es para mayores de edad y al momento que aceptas el mensaje de ADVERTENCIA DE CONTENDO, eso ya depende la configuración de tu blog.
mmmm de hecho no esta activada la opcion de contenido para adultos, me aparecio luego de instalar el contador.
 

Ricardo Smeja

Alfa
Verificación en dos pasos desactivada
Verificado por Whatsapp
Usuario nuevo
¡Usuario con pocos negocios!
Desde
21 May 2020
Mensajes
28
Excelente. Muchas gracias.
 

Arriba