Tutorial: Tutorial para agregar contador de visitas en Blogger

Rykrdo Seguir

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Mar 2018
Mensajes
806
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:

AltaDigitalWeb

VIP
1
Ro
SEO
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
15 Ago 2016
Mensajes
8.024
Excelente tutorial, lo vere a mas detalle
 

Ivan_Caal

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Sep 2019
Mensajes
227
Edad
28
Gracias Genial Me va a servir bastante pero el paso 12 donde se coloca disculpe
 

L I V E

No recomendado
Verificación en dos pasos desactivada
Desde
14 Nov 2019
Mensajes
241
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Buen tuto tengo que hacerlo.
 

byzarz

Delta
SEO
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
28 Sep 2017
Mensajes
681
;) 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

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Mar 2018
Mensajes
806
;) 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.
 

Maddy

Lambda
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
13 Nov 2019
Mensajes
2.875
Gracias por este tutorial ;D
 

JuarbeAbraham

No recomendado
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
18 Dic 2019
Mensajes
440
Edad
33
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Mar 2018
Mensajes
806
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
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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.
 

Rykrdo

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Mar 2018
Mensajes
806
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.
 

Rykrdo

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Mar 2018
Mensajes
806
Disculpen la pregunta, pero aquellos que aún usan este metodo, les sigue funcionando?
Lo digo por que quizás necesite cambiarlo.
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba