Embedded Files
Este tutorial crea un contador de "Likes" en tiempo real utilizando solo herramientas gratuitas de Google.
Este usa el formato CSV, lo que permite actualizar casi al instante, saltándose el retraso habitual de 5 minutos aprox. de las publicaciones web estándar de Google o como en otros servidores.
Primero:
El sistema se basa en la creación de un Google Form con una única opción de respuesta ("¡Me gusta!"). Lo ingenioso del método es que el código HTML no muestra el formulario completo, sino que utiliza un "recorte visual" (un iframe posicionado estratégicamente) para mostrar únicamente el botón de envío. De este modo, el usuario cree que está pulsando un botón de Like diseñado a medida, cuando en realidad está enviando una respuesta a tu formulario de Google de forma transparente.
Segundo:
Los votos se almacenan en una hoja de cálculo de Google Sheets vinculada al formulario. En esta hoja, se utiliza una fórmula en la celda D1 que cuenta automáticamente cuántas veces aparece la respuesta seleccionada. El punto crucial para que el contador sea rápido es publicar esta hoja no como página web, sino como archivo CSV. Este formato de datos puros es mucho más ligero y se actualiza en los servidores de Google casi al instante, eliminando el retraso habitual de cinco minutos de las publicaciones estándar.
Finalmente:
El widget HTML/JS en tu sitio web actúa como el motor visual. El script realiza una petición silenciosa al archivo CSV cada 10 segundos (o inmediatamente después de un clic) para extraer el valor de la celda D1. Al recibir solo texto plano, el widget muestra el número de likes con un diseño limpio, sin barras de scroll y perfectamente centrado, utilizando además un sistema de "caché-bust" (añadiendo la hora a la URL) para obligar al navegador a mostrar siempre el dato más reciente disponible.
Paso 1:
Configurar el Formulario
(El Botón de Voto)
El "botón" es en realidad un sistema de envío directo a Google Forms. Para que funcione sin que el usuario vea el formulario ni tenga que registrarse, sigue estos pasos:
Crea el formulario: Ve a Google Forms y crea uno nuevo.
Configura la pregunta: Añade una única pregunta de Opción múltiple.
Pregunta: "¿Te gusta?"
Opción 1: Escribe exactamente: ¡Me gusta! 👍
Ajuste de Privacidad (Vital): Ve a la pestaña Configuración y asegúrate de que:
Respuestas > Limitar a 1 respuesta: Esté DESACTIVADO. (Si se activa, el botón fallará en modo incógnito porque obligará a iniciar sesión).
Si usas una cuenta de empresa, desactiva también la restricción de usuarios de tu organización.
Vincula la Hoja de Cálculo: En la pestaña Respuestas, haz clic en el icono verde para crear la hoja de Google Sheets donde se sumarán los votos.
Obtén los datos para el código:
La URL de envío: Copia la URL de tu formulario, pero cambia el final. Si termina en /viewform, cámbialo por /formResponse. Esta es la dirección que recibe los datos sin abrir la web de Google.
El ID de la respuesta: Haz clic derecho en tu formulario abierto y selecciona "Ver código fuente". Busca (Ctrl+F) la palabra entry. seguida de un número (ej. entry.921299748). Ese es el ID que debes poner en el código para que el voto se registre correctamente.
💡 Nota técnica: "Hemos actualizado el código para usar un sistema de Envío Directo (POST). A diferencia de los iframes recortados tradicionales, este método es 'a prueba de balas': funciona en modo incógnito, no se desplaza visualmente y no abre ventanas emergentes de Google, manteniendo al usuario siempre en tu página.
Paso 2:
Configurar la Hoja de Cálculo (El Contador)
Aquí es donde ocurre la magia: la hoja recibirá los votos y el código leerá el resultado para mostrarlo en tu web.
Prepara el Contador: En la hoja de cálculo de Google que creaste en el paso anterior, sitúate en la Celda D1.
Introduce la Fórmula: Copia y pega esta fórmula. Se encargará de contar cuántas veces aparece el texto de "Like" en la columna de respuestas:
=CONTAR.SI(B:B; "¡Me gusta! 👍") & " Likes"
Nota: Si en tu formulario escribiste solo "Like", aquí debe decir "Like". El texto debe ser idéntico.
Publicar como CSV (Paso Crítico): Para que el widget pueda "leer" el número sin entrar a tu cuenta de Google, debemos hacer la hoja pública en formato de datos:
Ve a Archivo > Compartir > Publicar en la web.
En el primer desplegable selecciona "Respuestas de formulario 1" (o el nombre de tu pestaña).
En el segundo desplegable, cambia "Página web" por Valores separados por comas (.csv).
Pulsa Publicar y copia la URL generada.
Paso 3:
Implementar el Código HTML
Ahora uniremos todo. Este código crea el botón azul con el contador inteligente que se actualiza solo.
En tu Google Site, selecciona Insertar > Insertar código.
Copia y pega el código que aparece a continuación.
IMPORTANTE: Busca las dos partes marcadas en el código y sustitúyelas:
Sustituye URL_DE_RESPUESTA_DE_GOOGLE por tu enlace del Paso 1 (el que termina en /formResponse).
Sustituye entry.TU_ID_AQUI por el número de tu pregunta (lo obtuviste en el Paso 1).
Sustituye TU_URL_DEL_CSV_AQUÍ por el enlace del Paso 2.
(Aquí iría el bloque de código completo que configuramos antes)
-------------------------------------------------------- >>>>>>>
Explicación Técnica
Envío Silencioso (Background Submit): A diferencia de un recorte de ventana, ahora usamos un formulario real que envía el voto directamente al servidor de Google. Gracias al atributo target, el envío se procesa de forma invisible en un "túnel" oculto (iframe invisible), evitando que la página se recargue o que se abran ventanas externas.
Formato CSV: Google Sheets publica páginas web con un retraso de varios minutos. Sin embargo, los archivos CSV son mucho más ligeros y se actualizan casi al instante. El script "lee" ese archivo de texto y extrae únicamente el dato de la celda donde sumas los likes.
Anti-Caché: Añadimos &t=... (la marca de tiempo exacta) al final de la URL del CSV. Esto engaña al servidor de Google y al navegador, obligándolos a descargar el archivo nuevo en cada revisión en lugar de mostrar una versión vieja guardada en la memoria.
Filtro de Seguridad: El código incluye una regla de "Solo subida". Si por un error de sincronización de Google el servidor devuelve un número menor al que ya se muestra en pantalla, el script lo ignora. Así, el contador siempre parece estable y profesional.
Persistencia (Memoria Local): Usamos localStorage para guardar una "marca" en el navegador del usuario. Si este refresca la página o vuelve otro día, el sistema detecta esa marca y muestra directamente el mensaje de "Gracias", evitando que vote dos veces desde el mismo dispositivo.
HTML
<body><style type="text/css">html{overflow-y:hidden;}html { overflow-x:hidden; }</style><body><style type="text/css">html{overflow-y:hidden;}html { overflow-x:hidden; }</style><body><style type="text/css"> html, body { margin: 0; padding: 0; overflow: hidden; } /* Bloqueo total de scrolls */ #contenedor-like *, iframe { scrollbar-width: none !important; -ms-overflow-style: none !important; }</style>
<div id="contenedor-like" style="position: relative; width: 130px; height: 95px; margin: -5px auto 0; background: #000; overflow: hidden; display: flex; flex-direction: column; align-items: center; border: none;">
<div style="width: 130px; height: 32px; display: flex; align-items: center; justify-content: center; background: #000;"> <span id="contador-vivo" style="color: #ffffff; font-family: sans-serif; font-size: 16px; font-weight: bold;">...</span> </div>
<div style="width: 85px; height: 32px; overflow: hidden; border-radius: 20px; position: relative; box-shadow: 0 4px 6px rgba(255,255,255,0.1); background: #1a73e8;"> <form id="google-form" action="TU_URL_DE_FORMULARIO_TERMINADA_EN_formResponse" method="POST" target="voto-oculto" onsubmit="votoEnviado()" style="margin:0;"> <input type="hidden" name="entry.921299748" value="¡Me gusta! 👍"> <button type="submit" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; border: none; cursor: pointer; z-index: 3;"></button> </form>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2;"> <span style="color: #ffffff; font-family: sans-serif; font-size: 13px; font-weight: bold;">Like 👍</span> </div> </div>
<p style="text-align: center; font-family: sans-serif; font-size: 11px; color: #ffffff; margin-top: 5px; font-weight: bold;"> Dame un like </p>
<iframe name="voto-oculto" style="display:none;"></iframe>
<div id="mascara-gracias" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 99;"> <div style="display: flex; height: 100%; align-items: center; justify-content: center;"> <p style="text-align: center; font-family: sans-serif; font-size: 14px; color: #fff; font-weight: bold;">¡Gracias!</p> </div> </div></div>
<script>const urlCSV = "TU_URL_DEL_PASO_2_AQUÍ";
async function actualizarLikes() { try { const respuesta = await fetch(urlCSV + "&t=" + new Date().getTime()); const texto = await respuesta.text(); const filas = texto.split("\n"); const columnas = filas[0].split(","); const datoD1 = columnas[3] || columnas[0]; const nuevoValor = datoD1.replace(/"/g, "").trim(); const actualNum = parseInt(document.getElementById('contador-vivo').innerText.replace(/\D/g, "")) || 0; const nuevoNum = parseInt(nuevoValor.replace(/\D/g, "")) || 0;
if (nuevoNum >= actualNum) { document.getElementById('contador-vivo').innerText = nuevoValor; } } catch (e) { console.error("Error"); }}
function votoEnviado() { document.getElementById('mascara-gracias').style.display = 'block'; localStorage.setItem('likeEnviado', 'si'); setTimeout(actualizarLikes, 2500);}
actualizarLikes();setInterval(actualizarLikes, 5000);
if (localStorage.getItem('likeEnviado') === 'si') { document.getElementById('mascara-gracias').style.display = 'block';}</script></body>
Google Sites
Report abuse