Cómo incrustar una cuenta atrás en tu sitio web
Si usas software de gestión de contenidos o blogs como Blogger, WordPress, Drupal o similar, debes asegurarte de editar tu contenido en modo HTML cuando pegues el código de incrustación.
Incrustar widgets de cuenta atrás de CountingDownTo.com es muy similar a incrustar un vídeo de un sitio web como YouTube.com. En CountingDownTo.com, localiza la cuenta atrás que quieres incrustar haciendo clic en "Mis cuentas atrás" y luego en el nombre de la cuenta atrás que quieres incrustar. También puedes crear un nuevo widget de cuenta atrás haciendo clic en "Nueva cuenta atrás". Debajo de la cuenta atrás verás un botón etiquetado "Incrustar en tu sitio". Haz clic en él. Se mostrará código HTML debajo del botón. El código se parecerá a la captura de pantalla de abajo. Copia el código y pégalo en tu sitio web o blog.
Si has seguido las instrucciones de esta página pero aún no puedes incrustar tu cuenta atrás, por favor contáctanos para obtener ayuda.
¿Qué plataformas pueden incrustar una cuenta atrás en vivo?
La mayoría de los sitios que permiten pegar HTML personalizado o una URL de iframe mostrarán tu cuenta atrás en vivo y en funcionamiento. Algunos constructores de páginas y herramientas de diseño bloquean los iframes por completo. Esto es lo que hemos verificado de primera mano:
| Plataforma | ¿Cuenta atrás en vivo? | Notas |
|---|---|---|
| WordPress (autoalojado) | Sí | Añade un bloque de HTML personalizado en el editor de bloques y pega el código de incrustación. O usa nuestro plugin de WordPress cuando esté disponible. |
| WordPress.com | Depende del plan | Los planes gratuitos eliminan los iframes. Los planes de pago necesitan activar las "funciones de alojamiento" antes de que el HTML personalizado funcione. Más información. |
| Squarespace | Sí (plan Business+) | Añade un bloque de Código y pega el código de incrustación. Requiere un plan Business o superior. |
| Wix | Sí | Usa el elemento Incrustar HTML. Ajusta el ancho y la altura del iframe para que coincidan con tu cuenta atrás y no se recorte ni muestre barras de desplazamiento. |
| Google Sites | Sí | Usa Insertar → Incrustar y pega el código de incrustación o la URL del iframe. |
| Shopify | Sí (con matiz) | Funciona mediante Liquid personalizado del tema o secciones de HTML personalizado. No funciona en descripciones de productos (Shopify elimina los iframes allí). |
| Notion | Sí |
Escribe /embed
y pega el enlace directo /w4/
de tu cuenta atrás (no el enlace de compartir habitual).
|
| Canva | No | Canva no admite iframes ni incrustaciones externas en vivo. Es una limitación de Canva, no algo que estés haciendo mal. |
| Blogger, Drupal, Weebly, Joomla! | Sí | Pega el código de incrustación como HTML personalizado/bruto — consulta las instrucciones específicas de cada plataforma más abajo. |
| Facebook, WhatsApp, YouTube | No | Estas plataformas no permiten incrustaciones de iframe de terceros. Comparte un enlace a la página publicada de tu cuenta atrás. |
| Clientes de correo | No (usa GIF) | Los clientes de correo bloquean los iframes. Usa nuestra cuenta atrás GIF para correo en su lugar. |
Incrustar una cuenta atrás en WordPress
WordPress autoalojado: En el editor de bloques, añade un bloque de HTML personalizado (+ → busca "Custom HTML") y pega el código de incrustación que te dimos. La cuenta atrás no aparecerá en la vista previa del editor — publica o previsualiza la página para verla.
WordPress.com: Los sitios gratuitos de WordPress.com no admiten iframes (más información). En los planes de pago debes activar las funciones de alojamiento antes de que el bloque HTML personalizado renderice iframes. Actualizaremos esta página cuando nuestro plugin de WordPress esté disponible.
Usuarios del editor clásico: Si aún usas el antiguo editor Visual/HTML, selecciona HTML (no Visual) antes de pegar. Para el editor de bloques, este vídeo muestra el enfoque de HTML personalizado:
Incrustar una cuenta atrás en Squarespace
Squarespace requiere un plan Business o superior para incrustar código personalizado. Edita tu página, haz clic en + para añadir un bloque, busca Código y pega el código de incrustación en el bloque Código. Guarda y previsualiza — la cuenta atrás debería funcionar en vivo en tu página publicada.
Incrustar una cuenta atrás en Wix
En el editor de Wix, haz clic en + Añadir elementos → Incrustar código → Incrustar HTML. Pega el código de incrustación y haz clic en Actualizar.
Importante — tamaño del iframe:
Si la cuenta atrás se recorta o muestra barras de desplazamiento, abre la configuración del elemento de incrustación y ajusta el ancho y la altura para que coincidan con las dimensiones de tu código de incrustación (normalmente el mismo ancho y alto que la
etiqueta <iframe>). Wix no siempre redimensiona automáticamente los iframes incrustados.
Mira un vídeo corto que muestra cómo añadir una cuenta atrás a Wix.
Incrustar una cuenta atrás en Google Sites
Mientras editas tu sitio, haz clic en Insertar → Incrustar. Elige Código de incrustación y pega el código de incrustación que te proporcionamos. Ajusta el tamaño del cuadro de incrustación en la página para que se vea la cuenta atrás completa.
Incrustar una cuenta atrás en Shopify
Añade el código de incrustación a una sección de Liquid personalizado o a un bloque de HTML personalizado en tu tema (Tienda online → Temas → Personalizar → Añadir sección). La cuenta atrás se mostrará en vivo en las páginas donde la coloques.
Las descripciones de productos no funcionan: Shopify elimina el HTML de iframe de las descripciones de productos — es una restricción de la plataforma, no una limitación de CountingDownTo. Usa una página de destino, descripción de colección o una sección de página personalizada.
Incrustar una cuenta atrás en Notion
En cualquier página de Notion, escribe /embed
y pulsa Enter. Pega el enlace directo de tu cuenta atrás (la URL /w4/
del panel de incrustación, no el enlace de compartir habitual). Notion incrustará solo el widget de la cuenta atrás.
Canva — no es posible actualmente
El editor de sitios web y diseño de Canva no admite incrustaciones de iframe ni widgets externos en vivo. Pegar nuestro código de incrustación o enlace no producirá una cuenta atrás en funcionamiento. Si Canva añade soporte de iframe o imagen de URL externa en el futuro, actualizaremos esta página.
Incrustar una cuenta atrás en Blogger
Asegúrate de seleccionar "Editar HTML" NO "Redactar" antes de pegar el código de incrustación en tu blog de Blogger. Recuerda que la cuenta atrás no aparecerá mientras editas tu entrada. Solo aparecerá cuando publiques o previsualices tu entrada.
Incrustar una cuenta atrás en Drupal
Asegúrate de seleccionar "Full HTML" en la configuración de "Formato de entrada" antes de pegar el código de incrustación en tu sitio Drupal. Recuerda que la cuenta atrás no aparecerá mientras editas tu página. Solo aparecerá cuando guardes o previsualices tu página.
Incrustar una cuenta atrás en Weebly
Usa el elemento HTML personalizado para incrustar el widget de cuenta atrás en tu sitio Weebly.
Incrustar una cuenta atrás en Joomla!
Consulta estas instrucciones para incrustar una cuenta atrás en Joomla!
El editor TinyMCE predeterminado de Joomla puede eliminar o reescribir las etiquetas iframe al guardar. Si la cuenta atrás no aparece, intenta desactivar el editor WYSIWYG para ese artículo o usa el módulo Mod HTML para colocar el código de incrustación directamente.
Plataformas que no admiten incrustaciones de iframe
Las siguientes plataformas no pueden mostrar una cuenta atrás de iframe en vivo, sin importar qué código de incrustación uses:
- Facebook — comparte un enlace a la página publicada de tu cuenta atrás.
- WhatsApp — comparte un enlace; WhatsApp no renderiza HTML incrustado.
- YouTube — las páginas de canal y descripciones de vídeo de YouTube no admiten iframes de terceros.
- Clientes de correo — Gmail, Outlook, Mailchimp y otras aplicaciones de correo bloquean los iframes por seguridad. Usa nuestra función de cuenta atrás GIF para correo en su lugar — produce una imagen animada que funciona en prácticamente todos los clientes de correo.
Incrustar cuentas atrás en correo electrónico
Enviar una cuenta atrás con Mailchimp
Enviar una cuenta atrás con AWeber