Cómo insertar un flipbook en tu sitio con iframe

Creaste un flipbook interactivo impresionante a partir de tu PDF. ¿Y ahora qué? Compartir un enlace está bien, pero insertar el flipbook directamente en tu sitio web mantiene a los visitantes interesados sin enviarlos a otro lugar. Se ve profesional, carga rápido y te da control total sobre la experiencia.

En este tutorial, te guiaremos paso a paso para insertar un flipbook de FlipLink en cualquier sitio web usando un iframe — además de consejos para hacerlo responsivo, seguro y pulido en cada dispositivo.

¿Por qué insertar en lugar de solo compartir un enlace?

Cuando compartes un enlace de flipbook, los visitantes abandonan tu sitio para verlo. Eso significa que pierdes el control de la experiencia — puede que no regresen. Insertar mantiene todo en tu territorio.

Estas son las ventajas de insertar:

• Menor tasa de rebote — los visitantes permanecen en tu página en lugar de navegar fuera
• Mejor experiencia de marca — el flipbook se siente como una parte nativa de tu sitio
• Mayor interacción — los lectores son más propensos a explorar cuando el contenido carga en línea
• Beneficios SEO — el tiempo en página aumenta, señalando calidad a los motores de búsqueda
• Presentación profesional — perfecto para catálogos de productos, portafolios y materiales de ventas

Si vas a insertar un visor de PDF en lugar de un flipbook, consulta nuestra guía sobre cómo insertar un PDF en tu sitio web.

Cómo obtener tu código de inserción iframe de FlipLink

FlipLink genera códigos de inserción automáticamente — no se requiere programación. Así obtienes el tuyo:

1. Inicia sesión en tu panel de FlipLink en go.fliplink.me
2. Abre el flipbook que quieres insertar
3. Haz clic en el botón Compartir en la barra de herramientas
4. Selecciona la pestaña Insertar en el panel de compartir
5. Copia el código iframe que aparece

El código se ve así:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Eso es todo. Pega este fragmento en cualquier página HTML y tu flipbook aparecerá con interactividad completa de paso de página en 3D.

Para más detalles sobre todas las formas de distribuir tu flipbook, consulta las funciones de compartir y distribución.

Inserción en diferentes plataformas

WordPress

WordPress hace que la inserción con iframe sea sencilla:

1. Abre la página o entrada donde quieres el flipbook
2. Agrega un bloque de HTML personalizado (no un bloque de párrafo)
3. Pega tu código iframe
4. Previsualiza la página para confirmar que carga correctamente

Si usas el editor clásico, cambia a la pestaña Texto (no Visual) antes de pegar. Para un tutorial más detallado de WordPress, lee nuestra guía sobre cómo insertar un flipbook en WordPress.

Wix

Wix no admite HTML sin procesar en bloques de texto regulares, pero tiene una alternativa:

1. En el editor de Wix, haz clic en Agregar (+) en el panel izquierdo
2. Elige Código de inserción > Insertar HTML
3. Pega tu código iframe en el cuadro HTML
4. Redimensiona el widget de inserción para ajustarlo a tu diseño
5. Publica tu sitio

Squarespace

Squarespace admite bloques de código de forma nativa:

1. Edita la página donde quieres el flipbook
2. Agrega un nuevo Bloque de Código (en el menú +)
3. Pega el código iframe
4. Desmarca "Mostrar Código Fuente" si aparece esa opción
5. Guarda y previsualiza

Sitios HTML personalizados

Para cualquier sitio HTML estático, simplemente pega el código iframe donde quieras que aparezca el flipbook en tu archivo HTML. Funciona dentro de contenedores <div>, secciones de artículos o diseños de landing pages — en cualquier lugar que acepte HTML.

Consejos para inserción responsiva

Un iframe de ancho fijo se ve bien en escritorio pero se rompe en móvil. Así haces que tu inserción sea responsiva para que se adapte a cualquier tamaño de pantalla.

Técnica del contenedor con relación de aspecto

Envuelve el iframe en un contenedor que mantenga una relación de aspecto consistente:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

El padding-bottom: 75% crea una relación de aspecto 4:3. Ajusta este valor según las dimensiones de tu flipbook:

• 4:3 (horizontal) — padding-bottom: 75%
• 16:9 (panorámico) — padding-bottom: 56.25%
• 3:4 (vertical) — padding-bottom: 133%
• 1:1 (cuadrado) — padding-bottom: 100%

Verificación rápida en móvil

Después de insertar, prueba en un teléfono real — no solo en el modo responsivo del navegador. El zoom con pellizco y el paso de página táctil deben funcionar sin problemas. Si la inserción se siente apretada en pantallas pequeñas, considera aumentar la altura mínima a 400px o 500px.

Whitelisting de dominio para seguridad

Si tu flipbook contiene contenido sensible — guías de precios, informes internos, propuestas para clientes — probablemente no quieras que cualquiera lo inserte en sitios aleatorios.

La función de whitelisting de dominio de FlipLink te permite restringir dónde puede cargarse tu inserción iframe:

1. Abre los ajustes de tu flipbook
2. Navega a la sección de Seguridad o Inserción
3. Agrega tus dominios aprobados (por ejemplo, tuempresa.com, blog.tuempresa.com)
4. Guarda los cambios

Ahora el flipbook solo se muestra cuando se carga desde esos dominios. Si alguien copia tu código iframe y lo pega en otro sitio, no cargará — verán un mensaje de acceso denegado.

Esto es especialmente útil para catálogos de productos compartidos con socios minoristas específicos o documentos para clientes que no deben ser accesibles públicamente.

Alternativa: inserción con imagen clicable

No todas las situaciones requieren una inserción iframe completa. A veces una imagen de vista previa clicable funciona mejor — especialmente cuando quieres un adelanto ligero que abra el flipbook completo al hacer clic.

FlipLink genera una inserción con imagen clicable automáticamente. Se ve así:

<a href="https://go.fliplink.me/view/your-flipbook-id" target="_blank">
  <img
    src="https://go.fliplink.me/thumbnail/your-flipbook-id.jpg"
    alt="Ver flipbook"
    style="max-width: 100%; cursor: pointer;"
  />
</a>

Este enfoque es ideal para:

• Newsletters por email (donde los iframes no funcionan)
• Widgets en barras laterales con espacio limitado
• Entradas de blog donde quieres una vista previa sin interrumpir el flujo de lectura
• Páginas con múltiples flipbooks — muestra miniaturas y deja que los lectores elijan cuál abrir

Comparación de opciones de inserción

¿No estás seguro de qué método se ajusta a tus necesidades? Aquí tienes una comparación rápida:

Para la mayoría de los sitios web, la inserción iframe ofrece la mejor experiencia de usuario. Usa la imagen clicable cuando el espacio es limitado o cuando insertas en entornos que no admiten iframes.

Solución de problemas comunes

¿Tienes problemas? Aquí van soluciones rápidas para los inconvenientes más frecuentes:

• El flipbook no carga — Verifica que la URL de inserción sea correcta y que el flipbook esté publicado (no en modo borrador)
• Bloqueado por el navegador — Algunos navegadores bloquean contenido mixto. Asegúrate de que tu sitio use HTTPS si la URL de inserción es HTTPS
• Se ve diminuto en escritorio — Establece width="100%" y aumenta el valor de height, o usa la técnica del contenedor responsivo anterior
• Se corta en móvil — Usa el contenedor con relación de aspecto en lugar de dimensiones fijas en píxeles
• Bloqueado en otro sitio — Si habilitaste el whitelisting de dominio, agrega el nuevo dominio a tu lista aprobada

Comienza a insertar tus flipbooks

Insertar un flipbook en tu sitio web toma menos de un minuto con FlipLink. Sube tu PDF, obtén el código iframe, pégalo en tu sitio — listo.

Ya sea que estés construyendo un escaparate de productos, un archivo de revistas digitales o un informe interactivo de empresa, insertar mantiene a tu audiencia comprometida y tu contenido al frente.

Crea tu cuenta gratuita de FlipLink y comienza a insertar flipbooks interactivos en tu sitio web hoy. ¿Ya tienes contenido listo? Consulta nuestros planes de precios — desde solo $129 para acceso de por vida a 100 publicaciones activas.