Tutorial: Contador Para Blogger Exclusivo Para las Entradas Del Blog

vicente espinoza · 25 May 2023

¿Quieres saber cuántas personas están leyendo tus artículos en Blogger? Con este contador personalizado, podrás seguir el impacto de cada URL única. A continuación, te mostramos cómo implementarlo en tu blogspot:

https://blogger.owinile.com/2023/05/contador-para-blogger-por-entrada.html

Demo:
https://demo-contador.owinile.com/2023/05/demo-contador-para-blogger-por-entrada.html

PD. Si te sirve este código, por favor comentarlo en la entrada del blog, estaría muy agradecido.

andifc · 1 Jun 2023

Pero solo funciona de parte del cliente?

aqui uno que funciona con Firebase:

HTML:

<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>

<script>
const firebaseConfig = {
  databaseURL: "TU BASE DE DATOS"
  };
 
  firebase.initializeApp(firebaseConfig);


let contador = 0;
contadorRef.once('value', snapshot => {
  contador = snapshot.val() || 0;
  contador++;
  contadorRef.set(contador);
  document.getElementById("contador").textContent = contador;
});
contadorRef.on('value', snapshot => {
  const valor = snapshot.val() || 0;
  document.getElementById("contador").textContent = valor;
});
</script>

andifc · 1 Jun 2023

andifc dijo:

Pero solo funciona de parte del cliente?

aqui uno que funciona con Firebase:

HTML:

<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>

<script>
const firebaseConfig = {
  databaseURL: "TU BASE DE DATOS"
  };
 
  firebase.initializeApp(firebaseConfig);


let contador = 0;
contadorRef.once('value', snapshot => {
  contador = snapshot.val() || 0;
  contador++;
  contadorRef.set(contador);
  document.getElementById("contador").textContent = contador;
});
contadorRef.on('value', snapshot => {
  const valor = snapshot.val() || 0;
  document.getElementById("contador").textContent = valor;
});
</script>

Si tienes algun error simplemente encierra las funciones de Firebase en funciones asíncronas para llamarlas cuando las necesites.

banco_comunal · 1 Jun 2023

andifc dijo:

Pero solo funciona de parte del cliente?

aqui uno que funciona con Firebase:

HTML:

<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>

<script>
const firebaseConfig = {
  databaseURL: "TU BASE DE DATOS"
  };
 
  firebase.initializeApp(firebaseConfig);


let contador = 0;
contadorRef.once('value', snapshot => {
  contador = snapshot.val() || 0;
  contador++;
  contadorRef.set(contador);
  document.getElementById("contador").textContent = contador;
});
contadorRef.on('value', snapshot => {
  const valor = snapshot.val() || 0;
  document.getElementById("contador").textContent = valor;
});
</script>

cuantas visitas aguanta?

andifc · 1 Jun 2023

banco_comunal dijo:
cuantas visitas aguanta?

Pues todas las que quieras ya que solo guardará simples datos haci que no sobrepasara el limite de firebase.

banco_comunal · 1 Jun 2023

andifc dijo:
Pues todas las que quieras ya que solo guardará simples datos haci que no sobrepasara el limite de firebase.

Excelente dato voy a implementarlo en todos mis sitios.

vicente espinoza · 3 Jun 2023

Gracias por el complemento, voy a probar con una base de datos que tengo por allí.
PD: Ya había publicado un código de contador con Firebase, aquí el code: https://blogger.owinile.com/2020/07/contador-de-visitas-blogger.html

vicente espinoza · 3 Jun 2023

andifc dijo:

Pero solo funciona de parte del cliente?

aqui uno que funciona con Firebase:

HTML:

<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>

<script>
const firebaseConfig = {
  databaseURL: "TU BASE DE DATOS"
  };
 
  firebase.initializeApp(firebaseConfig);


let contador = 0;
contadorRef.once('value', snapshot => {
  contador = snapshot.val() || 0;
  contador++;
  contadorRef.set(contador);
  document.getElementById("contador").textContent = contador;
});
contadorRef.on('value', snapshot => {
  const valor = snapshot.val() || 0;
  document.getElementById("contador").textContent = valor;
});
</script>

Gracias, lo probaré

vicente espinoza · 3 Jun 2023

andifc dijo:
Si tienes algun error simplemente encierra las funciones de Firebase en funciones asíncronas para llamarlas cuando las necesites.

No corre...

vicente espinoza · 3 Jun 2023

andifc dijo:

Pero solo funciona de parte del cliente?

aqui uno que funciona con Firebase:

HTML:

<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>

<script>
const firebaseConfig = {
  databaseURL: "TU BASE DE DATOS"
  };
 
  firebase.initializeApp(firebaseConfig);


let contador = 0;
contadorRef.once('value', snapshot => {
  contador = snapshot.val() || 0;
  contador++;
  contadorRef.set(contador);
  document.getElementById("contador").textContent = contador;
});
contadorRef.on('value', snapshot => {
  const valor = snapshot.val() || 0;
  document.getElementById("contador").textContent = valor;
});
</script>

No lo pude hacer funcionar, aplique todo lo que sabia para hacerlo correr pero me fue imposible, el que si me funciono es el que tenia ya publicado en mi blog, aquí el código:

JavaScript:

<!-- Contador de visitas post firebase :: tutorialbloggerorg.blogspot.com -->  
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews');
var blogStats = new Firebase("https://nombre-tu-proyecto.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>

HTML:

<p>Contador de entradas: <span id='postviews'></span> vistas</p>

Aquí dejo una demo del contador ya funcionando en blogger con firebase: https://demo.owinile.com/2023/06/demostracion-del-contador-con-firebase.html

Coderz · 8 Jun 2023

Gracias por el tuto...