Cómo insertar un flipbook en Squarespace

Agregar un flipbook interactivo a tu sitio Squarespace transforma contenido PDF estático en una experiencia atractiva con paso de página para tus visitantes. Ya sea que muestres un catálogo de productos, portafolio o folleto corporativo, insertar un flipbook de FlipLink toma solo unos minutos cuando conoces el enfoque correcto.

Esta guía te lleva paso a paso — desde obtener tu código de inserción en FlipLink hasta pegarlo en Squarespace y asegurarte de que se vea bien en cada tamaño de pantalla.

Qué necesitas antes de empezar

Antes de insertar un flipbook, asegúrate de tener lo siguiente listo:

• Un flipbook publicado en FlipLink — Sube tu PDF en go.fliplink.me y publícalo. Necesitarás el código de inserción o enlace para compartir desde tu panel.
• Un plan Squarespace Business o superior — La inyección de código y los bloques de código personalizado requieren al menos el plan Business. Los planes Personal y básico no permiten insertar HTML personalizado ni iframes.
• Acceso al editor de tu sitio Squarespace — Editarás páginas directamente en el constructor de páginas de Squarespace.

Si aún no creaste tu flipbook, consulta nuestra guía sobre opciones de compartir y distribución para conocer todas las formas de compartir tu flipbook una vez listo.

Paso 1: obtén tu código de inserción de FlipLink

Una vez que tu flipbook esté publicado en FlipLink, obtener el código de inserción es sencillo:

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.
4. Selecciona la pestaña Insertar.
5. Copia el código iframe de inserción proporcionado.

El código se ve así:

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

Ten este código a mano — lo pegarás en Squarespace en el siguiente paso.

Paso 2: agrega un bloque de código en Squarespace

Squarespace usa un editor basado en bloques, y el Bloque de Código es donde pegarás tu código de inserción del flipbook.

1. Abre la página donde quieres que aparezca el flipbook.
2. Haz clic en Editar en la página.
3. Pasa el cursor sobre la sección donde quieres colocar el flipbook y haz clic en el punto de inserción (la línea con el ícono de más).
4. Selecciona Código en las opciones de bloque. Si no lo ves, busca “Código” en el selector de bloques.
5. Pega tu código iframe de inserción de FlipLink en el bloque de código.
6. Desmarca la opción “Mostrar Código Fuente” — esto es crítico. Si Mostrar Código Fuente está activado, Squarespace mostrará el HTML como texto sin procesar en lugar de renderizar el flipbook.
7. Haz clic en Guardar y luego sal del editor para previsualizar tu página.

Tu flipbook ahora debería aparecer directamente en la página, con animaciones interactivas de paso de página.

Paso 3: haz el flipbook responsivo

El código de inserción predeterminado funciona bien en escritorio, pero querrás asegurarte de que escale correctamente en tabletas y dispositivos móviles. Aquí tienes una versión mejorada del código con estilos responsivos:

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

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

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

Esta técnica se llama método del “cuadro de relación de aspecto”. El iframe llena su contenedor perfectamente, y el contenedor se escala fluidamente con el ancho de la página.

Paso 4: configura el whitelisting de dominio

Si habilitaste el whitelisting de dominio en tu flipbook por seguridad, necesitas agregar tu dominio de Squarespace a la lista permitida. De lo contrario, la inserción será bloqueada.

1. En tu panel de FlipLink, abre los ajustes del flipbook.
2. Navega a la sección de Whitelisting de Dominio.
3. Agrega tu dominio de Squarespace (por ejemplo, www.tudominio.com o tudominio.squarespace.com).
4. Guarda los ajustes.

El whitelisting de dominio es opcional pero recomendable si quieres evitar que otros inserten tu flipbook en sitios no autorizados. Garantiza que tu contenido solo aparezca donde tú quieras.

Usar inyección de código en Squarespace (en todo el sitio)

Si quieres que un flipbook aparezca en cada página — por ejemplo, en un área de pie de página o encabezado — puedes usar la función de Inyección de Código de Squarespace en lugar de bloques de código individuales.

1. Ve a Configuración → Avanzado → Inyección de Código.
2. Pega tu código de inserción en el campo Pie de página (o Encabezado, según la ubicación).
3. Envuélvelo en un div contenedor con estilos apropiados para controlar su posición.
4. Haz clic en Guardar.

Este enfoque es útil para banners en todo el sitio o widgets de flipbook persistentes, aunque para la mayoría de los casos, un bloque de código en una página específica es la mejor opción.

Enfoques alternativos

No todas las situaciones requieren una inserción iframe completa. Aquí hay dos alternativas más simples que funcionan en cualquier plan de Squarespace, incluido Personal:

Bloque de enlace con miniatura

En lugar de insertar el flipbook directamente, agrega un enlace visual que abra el flipbook en una nueva pestaña:

1. Toma una captura de pantalla de la portada de tu flipbook.
2. Agrega un Bloque de Imagen a tu página de Squarespace con la captura.
3. Agrega un enlace a la imagen apuntando a tu URL de compartir de FlipLink.
4. Configura el enlace para que abra en una nueva ventana.

Este enfoque funciona en todos los planes de Squarespace y te da control total sobre la presentación visual. Los visitantes hacen clic en la imagen de portada y obtienen la experiencia completa del flipbook en una nueva pestaña.

Bloque de botón

Para un enfoque más limpio, estilo llamada a la acción:

1. Agrega un Bloque de Botón a tu página.
2. Establece el texto del botón como algo como “Ver nuestro catálogo” o “Leer el folleto”.
3. Enlázalo a tu URL de compartir de FlipLink.
4. Configúralo para que abra en una nueva pestaña.

Este es el método más simple y funciona de forma confiable en todos los planes y dispositivos.

Solución de problemas comunes

El flipbook no aparece después de guardar

Asegúrate de desmarcar “Mostrar Código Fuente” en los ajustes del bloque de código. Cuando esta opción está activada, Squarespace muestra el código como texto plano en lugar de ejecutarlo.

La inserción está bloqueada o muestra un marco vacío

Verifica los ajustes de whitelisting de dominio en FlipLink. Si el whitelisting está habilitado, tu dominio de Squarespace debe estar en la lista permitida. También verifica que tu plan de Squarespace admita bloques de código — necesitas Business o superior.

El flipbook se corta en móvil

Usa el contenedor responsivo mostrado en el Paso 3. La técnica del cuadro de relación de aspecto asegura que el iframe se escale correctamente. Si aún ves problemas, intenta reducir ligeramente el porcentaje de padding-bottom para adaptarse mejor a la ventana del móvil.

Squarespace dice “Actualiza para usar código personalizado”

Los bloques de código y la inyección de código solo están disponibles en los planes Squarespace Business, Commerce Basic y Commerce Advanced. Si tienes un plan Personal, usa las alternativas de bloque de enlace o bloque de botón descritas arriba.

Consejos para la mejor experiencia

• Elige la ubicación correcta en la página. Coloca tu flipbook en una sección de ancho completo para máximo impacto. Evita insertarlo en barras laterales estrechas donde la experiencia de paso de página se siente apretada.
• Establece una altura significativa. Si no usas el contenedor responsivo, establece la altura del iframe en al menos 600px para escritorio. Menos que eso dificulta la lectura.
• Agrega contexto alrededor de la inserción. Incluye un encabezado y una breve descripción arriba del flipbook para que los visitantes entiendan qué están viendo antes de empezar a hojear páginas.
• Prueba en múltiples dispositivos. Previsualiza tu página en escritorio, tableta y móvil antes de publicar. La vista previa de dispositivos integrada de Squarespace facilita esto.

Recursos relacionados

Si estás insertando flipbooks en otras plataformas, estas guías pueden ayudarte:

• Cómo insertar un PDF en cualquier sitio web
• Cómo insertar un flipbook en WordPress
• Cómo insertar un flipbook con iframe

Comienza a insertar tu flipbook hoy

Crear e insertar un flipbook en Squarespace toma solo minutos con FlipLink. Sube tu PDF, obtén el código de inserción y colócalo en un bloque de código de Squarespace — tus visitantes tendrán una experiencia de lectura interactiva y pulida sin abandonar tu sitio.

Crea tu flipbook gratis en FlipLink y comienza a insertarlo en tu sitio Squarespace hoy. Consulta nuestra página de precios para ver qué incluye cada plan.