Contador de Visitas para Blogger (Entradas Individuales)

¿Tus lectores piensan que nadie más lee tu contenido? ¡Es hora de mostrarles que tu blog está vivo! Vamos a dejar de usar esos contadores antiguos y lentos para usar la tecnología de Google Firebase. Es gratis, profesional y en tiempo real.

Paso 1 Crear el Proyecto en Firebase

Primero, necesitamos un lugar donde guardar los datos. Sigue estos pasos:

1. Entra a la Consola de Firebase con tu cuenta de Gmail.
2. Haz clic en "Agregar proyecto".
3. Nómbralo ContadorBlogger y acepta las condiciones.
4. Cuando te pregunte por Google Analytics, desactívalo. No lo necesitamos para esto y hará el proceso más rápido.
5. Haz clic en "Crear proyecto" y espera a que esté listo.

Paso 2 Crear la Base de Datos

Aquí es donde se sumarán los números cada vez que alguien entre a tu post.

1. En el menú lateral izquierdo, haz clic en Compilación y luego en Realtime Database.
2. Haz clic en el botón azul "Crear base de datos".
3. Dale a "Siguiente" (mantén la ubicación por defecto).
4. Selecciona "Comenzar en modo de prueba".
5. Haz clic en Habilitar.

Configurar las Reglas (Muy importante)

Para que el contador pueda sumar, debemos dar "permiso". Ve a la pestaña de Reglas arriba y asegúrate de que el código sea exactamente este:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Haz clic en el botón "Publicar" que aparecerá arriba.

Paso 3 Obtener tus Credenciales Personales

1. Haz clic en el icono del engranaje ⚙️ (arriba a la izquierda) y elige Configuración del proyecto.
2. Baja hasta "Tus apps" y haz clic en el icono Web (</>).
3. Ponle de nombre MiBlog y dale a "Registrar app".
4. Verás un cuadro de código. Busca la parte que dice const firebaseConfig. ¡Esas son tus llaves!

Paso 4 Instalación en Blogger

Ahora vamos a colocar el contador en tu blog. Sigue estos pasos finales:

1. Ve a tu panel de Blogger > Diseño.
2. Busca la sección donde quieras el contador y dale a Añadir un Gadget > HTML/JavaScript.
3. Pega el código de abajo, pero antes de guardar, reemplaza los textos en mayúsculas por tus datos de la Fase 3.

<!-- Librerías de Firebase -->
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-database-compat.js"></script>

<!-- Diseño del Widget -->
<div style="background: #ffffff; border: 2px solid #f4a900; border-radius: 12px; padding: 20px; text-align: center; max-width: 250px; margin: 10px auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  <p style="margin: 0; font-size: 11px; color: #777; text-transform: uppercase; font-weight: bold;">Lecturas de hoy</p>
  <span id="visit-counter" style="font-size: 30px; font-weight: 900; color: #2c3e50;">...</span>
</div>

<script>
  // ⚠️ REEMPLAZA LOS DATOS DE ABAJO CON TUS "LLAVES" DE FIREBASE
  const firebaseConfig = {
    apiKey: "TU_API_KEY_AQUÍ",
    authDomain: "TU_PROYECTO.firebaseapp.com",
    projectId: "TU_PROYECTO",
    databaseURL: "https://TU_PROYECTO-default-rtdb.firebaseio.com/",
    appId: "TU_APP_ID_AQUÍ"
  };

  // Inicialización (No tocar)
  firebase.initializeApp(firebaseConfig);
  const db = firebase.database();
  var pageId = window.location.pathname.replace(/[\.\$#\[\]\/]/g, "_") || "inicio";
  const contadorRef = db.ref('visitas/' + pageId);

  // Lógica de suma
  contadorRef.transaction((curr) => {
    return (curr || 0) + 1;
  }, (error, committed, snapshot) => {
    if (committed) {
      document.getElementById('visit-counter').innerText = snapshot.val().toLocaleString();
    }
  });
</script>