Por: Tres formas de añadir un flipbook a tu sitio web
Has creado un flipbook y ahora quieres incluirlo en tu sitio. Hay tres métodos, y el adecuado depende del grado de control que necesites.
- Insertarlo mediante iframe: el método más sencillo. Funciona en todas partes.
- Insertarlo mediante JavaScript: adaptable de forma predeterminada. Ofrece más control.
- Usar un enlace directo: no requiere código, solo una URL.
Cada opción tiene sus contrapartidas. ¿La principal, que suele tomar a la gente por sorpresa? Los móviles. Una inserción que se ve perfecta en el portátil puede fallar por completo en un teléfono. Volveremos a ello enseguida.
Desde el punto de vista técnico, se trata de una inserción web convencional: el comportamiento de iframe se explica en la referencia de iframe de MDN, y la facilidad de pulsación debe seguir las directrices de WCAG sobre el tamaño mínimo del área interactiva.
Método 1: inserción mediante iframe (el más sencillo)
Un iframe es una ventana hacia otra página web. Pegas unas líneas de código y aparece tu flipbook.
Obtén el código de inserción
En Flipbooker, abre tu flipbook y haz clic en «Compartir». Busca la pestaña «Insertar». Verás un código similar a este:
<iframe
src="YOUR_FLIPBOOK_URL"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
Pégalo en tu sitio web
Busca en tu sitio web el lugar donde quieres mostrar el flipbook. En la mayoría de los editores visuales, basta con añadir un bloque «HTML» o «Código personalizado». Pega el código, guarda los cambios y abre la vista previa.
Ajusta las dimensiones
El valor predeterminado ocupa el 100 % del ancho del contenedor y tiene 600 px de alto. Ajústalo según tus necesidades:
- Ancho completo y más alto:
height="800" - Tamaño fijo:
width="800" height="600" - Página completa:
width="100%" height="100vh"
Ventajas: funciona en todas partes. No tiene dependencias. Es sencillo. Inconvenientes: las dimensiones fijas pueden dar problemas en móviles. Lo explicamos más adelante.
Método 2: inserción mediante JavaScript (adaptable)
La inserción mediante JavaScript ofrece más control y se adapta mejor a distintos tamaños de pantalla. Si alguna vez has peleado con un iframe que se ve genial en el ordenador y fatal en un teléfono, esta es la solución.
Obtén el código JavaScript
En la pestaña Compartir > Insertar de Flipbooker, selecciona «JavaScript» en vez de «iframe». Verás lo siguiente:
<div id="flipbooker-embed-abc123"></div>
<script src="YOUR_EMBED_SCRIPT_URL"></script>
<script>
Flipbooker.embed({
container: '#flipbooker-embed-abc123',
flipbook: 'abc123',
responsive: true
});
</script>
Añádelo a tu página
Pega este código donde quieras que aparezca el flipbook. El elemento <div> actúa como contenedor y los scripts se encargan del resto.
Configura las opciones
La inserción con JavaScript admite estas opciones:
Flipbooker.embed({
container: '#flipbooker-embed-abc123',
flipbook: 'abc123',
responsive: true,
minHeight: 400,
maxHeight: 800,
startPage: 1,
showToolbar: true
});
Ventajas: adaptable de forma predeterminada. Más control. Mejor comportamiento en móviles. Inconvenientes: es algo más complejo. Requiere que JavaScript esté activado.
Método 3: enlace directo
A veces no hace falta insertar nada. Basta con enviar a la gente a la página del flipbook.
Cuándo tiene más sentido un enlace directo
- Campañas de correo electrónico (la inserción no funciona en el correo)
- Publicaciones en redes sociales
- Códigos QR en materiales impresos
- Cualquier situación en la que tu CMS limite el código personalizado
Obtén el enlace
En Flipbooker, haz clic en Compartir y copia la URL directa:
YOUR_FLIPBOOK_URL
Úsala en mensajes de correo, publicaciones sociales o cualquier lugar en el que compartas enlaces.
Ventajas: funciona en todas partes. No requiere código. Ofrece una experiencia a pantalla completa. Inconvenientes: los lectores salen de tu sitio web.
Instrucciones para cada plataforma
WordPress
Editor de bloques (Gutenberg): añade un bloque «HTML personalizado», pega el código de inserción, abre la vista previa y publica.
Editor clásico: cambia a la pestaña «Texto» (no «Visual»), pega el código y vuelve a Visual para comprobar que se ha renderizado.
Elementor: añade un widget HTML, pega el código y ajusta el tamaño del widget.
Squarespace
Añade un bloque «Código» a tu página y pega el código de inserción. Para que ocupe todo el ancho, colócalo dentro de una sección de ancho completo.
Un consejo para Squarespace: su gestión de los diseños adaptables puede ser caprichosa. En la práctica, los iframes que se ven bien en el ordenador todavía pueden romper el diseño en algunas plantillas para móviles. Pruébalos en un teléfono real antes de publicar.
Wix
Añade un elemento «Insertar» o «iframe HTML», selecciona «Código» y pega el contenido. Cambia el tamaño del elemento para que encaje en tu diseño.
Un consejo para Wix: quizá tengas que especificar las dimensiones en píxeles en vez de porcentajes.
Webflow
Añade un elemento «Embed», pega el código y aplica estilos al contenedor para que se adapte a distintos tamaños.
Un consejo para Webflow: utiliza la inserción con JavaScript para controlar mejor el comportamiento adaptable. Los hilos del foro de Webflow muestran que los iframes pueden desplazar el contenido fuera de la pantalla en móviles.
Shopify
Edita la página o el producto. En el editor de contenido, haz clic en «Mostrar HTML» o <>. Pega el código de inserción y guarda los cambios.
Para integrarlo en el tema, edita los archivos del tema y añádelo a una sección.
El problema de los móviles (y cómo solucionarlo)
Esto es lo que sorprende a la mayoría: un iframe que se ve perfecto en el portátil puede romperse por completo en un móvil. No es un fallo de tu flipbook, sino la forma en que funcionan los iframes.
Como explica el equipo de ingeniería de Embeddable, los navegadores móviles añaden otro problema al ampliar el marco y desactivar el desplazamiento con inercia. ¿El resultado? Los usuarios ven un diminuto rectángulo ampliado donde debería aparecer el flipbook, o dos barras de desplazamiento.
Cómo hacer adaptable un iframe
Coloca tu iframe dentro de un contenedor adaptable:
<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
<iframe
src="YOUR_FLIPBOOK_URL"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
El valor padding-bottom: 75% crea una relación de aspecto 4:3. Adáptalo a tus necesidades:
- 16:9 →
padding-bottom: 56.25% - 4:3 →
padding-bottom: 75% - Cuadrado →
padding-bottom: 100%
O utiliza la inserción mediante JavaScript
Establece responsive: true y el tamaño se gestionará automáticamente. No necesitas un elemento div envolvente ni calcular la relación de aspecto.
Flipbooker.embed({
container: '#flipbooker-embed',
flipbook: 'abc123',
responsive: true,
minHeight: 400
});
Si trabajas con WordPress, Squarespace o cualquier plataforma donde no puedas controlar el CSS con facilidad, esta es la opción más segura.
Problemas habituales y soluciones
El flipbook no carga
- Comprueba que la URL sea correcta
- Verifica que el flipbook esté publicado y no sea un borrador
- Asegúrate de que tu sitio web permita iframes
El tamaño es incorrecto o el contenido aparece recortado
- Ajusta los valores de ancho y alto
- Usa la técnica del contenedor adaptable
- Haz pruebas en dispositivos móviles reales, no solo cambiando el tamaño de la ventana del navegador
Aparecen barras de desplazamiento
- Añade
frameborder="0"yscrolling="no"al iframe - Comprueba que el contenedor no esté limitando el tamaño
No carga en móviles
- Algunos navegadores móviles restringen los iframes en determinados contextos
- Prueba la inserción con JavaScript
- Ofrece un enlace directo como alternativa
¿El error más común? Insertarlo, comprobarlo en el portátil y dar el trabajo por terminado. Saca el teléfono y abre la página. Si el flipbook se ve mal ahí, tus visitantes verán lo mismo. La inserción con JavaScript resuelve automáticamente la mayoría de estos problemas, pero aun así una comprobación de diez segundos en el teléfono evita ese fallo silencioso por el que la mitad de tu público encuentra una página rota.
FAQs
¿Un flipbook insertado ralentiza la carga de mi página?
No de forma apreciable. Los iframes se cargan de manera asíncrona, por lo que el resto de la página se renderiza primero. Las inserciones mediante JavaScript son ligeras. Ninguna de las dos opciones debería causar una ralentización perceptible.
¿Puedo insertar el mismo flipbook en varias páginas?
Sí. Puedes insertar el mismo flipbook donde quieras y las analíticas agruparán los datos de todas las ubicaciones.
¿Los flipbooks insertados funcionan en móviles?
Sí, pero pruébalos en un teléfono real antes de publicarlos. Los iframes pueden comportarse de forma distinta según el navegador móvil. La inserción con JavaScript gestiona las dimensiones adaptables de manera más fiable.
¿Puedo saber quién ve un flipbook insertado?
Sí. Las analíticas de Flipbooker registran las visualizaciones sin importar dónde esté insertado el flipbook. Verás los mismos datos que con las visitas directas.
¿Qué ocurre si mi sitio web usa HTTP en vez de HTTPS?
Las URL de Flipbooker usan HTTPS. En un sitio HTTP pueden aparecer advertencias de contenido mixto. La solución es migrar tu sitio a HTTPS, algo recomendable por motivos de seguridad en cualquier caso.