Tutorial: Tutorial para agregar contador de visitas en Blogger

  • Autor Autor CANIBAL
  • Fecha de inicio Fecha de inicio
CANIBAL

CANIBAL

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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.

contador%2Bblogger.png

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:
Excelente tutorial, lo vere a mas detalle
 
Gracias Genial Me va a servir bastante pero el paso 12 donde se coloca disculpe
 
Buen tuto tengo que hacerlo.
 
😉 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
 
😉 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.
 
Gracias por este tutorial ;D
 
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).webp
 
Buen tutorial, pero tengo una duda porque al final de la url del blog pone unos numeros mas?

algo asi: ****.blogspot.com/?zx=89965284c1637559
 
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.
 
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.
 
Excelente. Muchas gracias.
 
mm como se la implementa en la plantilla de Kuro de zKreations
Los pasos siguen siendo los mismo, ya depende de donde quieres mostrar el contador.
Si quieres te puedo ayudar.
 
Gracias por el aporte hermano.
 
Disculpen la pregunta, pero aquellos que aún usan este metodo, les sigue funcionando?
Lo digo por que quizás necesite cambiarlo.
 
Atrás
Arriba