0

Conseguí este código a base de Firebase para registrar las visitas en un contador. La pregunta es, alguien puede hacer que funcione para cada post individual en Blogger? Le daré sus respectivos créditos ya que no hay ningun tutorial actualizado al respecto.

$(function(){var a=$(".viewcount");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://blog-views-cb9a2.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});

<span class='viewcount' id='obs-3804134306453086378'>Views: <span class='loading'/></span>
2

2 respuestas 2

1

Esto es con firestore de firebase. Para empezar tienes crear una colección de manera manual para dicho contador, y dentro tienes que crear de manera dinámica documentos con un identificador único para cada url de tu página, para esto podrías convertir cada url de tu pagina en md5 y así crearías un identificador único.

El código mas o menos quedaría así:

<script src="https://cdn.jsdelivr.net/npm/firebase/firebase-app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/firebase/firebase-firestore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/md5-js"></script>
<script src="/contador.js"></script>
// aquí tus respectivas credenciales de tu cuenta de firebase
// ojo solo las publicas
var config = {
};
firebase.initializeApp(config);
var db = firebase.firestore().collection('contador');
var url = window.location.protocol + "//" + window.location.hostname + window.location.pathname;
var hash = md5(url);
// verificamos si el documento existe, sino lo creamos
var ref = db.doc(hash);
ref.get(function(snap) {
  if (!snap.exists) {
    ref.set({
      visitas: 0
    })
  }
  if (snap.exists && snap.id === hash) {
    var visitas = 0;
    ref.set({
      visitas: visitas++
    })
    var el = document.getElementById('visitas');
    el.textContent = snap.data().visitas;
  }
})
4
  • 1
    Corregí algunos detalles, ya que me falto verificar si el hash coincide con el id del documento y entre otros detalles. Commented el 2 dic. 2019 a las 22:20
  • Soy nuevo en esto, asi que supongo que es esto a lo que te refieres, en donde dice 'CONTADOR' añado lo sigueinte: blog-views-cb9a2.firebaseio.com que vendria a ser el código de Firebase, y donde dice "//" no se que anadir. Y por último, no se como llamar el resultado para que se muestre en un SPAN (que iría al lado de cada título), lo intente con esto: <span class="visitas">Visitas: </span> Commented el 3 dic. 2019 a las 22:51
  • No @AbrahamJuarbeToledo, donde dice contador es las ruta de la colección donde se agregaran los documentos. Lee esto firebase.google.com/docs/firestore/quickstart?hl=es-419 y modifique el código para que se imprima en el span que dices. Commented el 3 dic. 2019 a las 23:20
  • hice lo que me dijiste y llegue hasta aqui, mira la imagen: ibb.co/9YFJ95Z Commented el 5 dic. 2019 a las 23:28
1

Contador de visitas individuales para cada entrada blogger

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

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

4.- Le das en Continuar

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

6.- Seleccionamos MODO DE PRODUCCIÓN

7.- Sólo le das a Listo

Ok, aquí en Database le damos a Cloud Firestore y la cambiamos a Realtime Database

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

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

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

10.- Buscamos </body>

11.- Arriba de </body> pegamos...

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

11.- Bien, ahora buscamos </head> y arriba de eso pegamos...

<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

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


Referencia:https://forobeta.com/temas/contador-de-visitas-individuales-para-cada-entrada.741021/


Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.