Cómo insertar una publicación digital en tu propio sitio web

Publicar una edición digital son dos decisiones, no una: cómo se lee y dónde vive. La mayoría de las herramientas responden de maravilla a la primera y toman la segunda en silencio por ti: tu catálogo acaba en una página que no es tuya, bajo una marca que no es la tuya, ante una audiencia que no puedes facturar.

Esta guía trata la segunda decisión: poner el lector dentro de tu propio sitio, y los pocos detalles que separan una inserción limpia de una que se rompe en el móvil, bloquea tu CMS o devuelve un 404 un martes porque alguien renombró un dominio.

Por qué insertar en vez de solo publicar un enlace

Un enlace a una plataforma de alojamiento es, siendo honestos, más fácil. No cuesta nada y lleva diez segundos. Insertar cuesta unos diez minutos y te devuelve:

• La visita. El tráfico se queda en tu URL, donde también viven tu navegación, tu formulario de contacto y tus botones de producto. Un enlace manda a los lectores a un lugar donde tú no estás.
• El contexto. Una inserción puede quedar justo bajo la descripción del producto al que pertenece, entre dos artículos o dentro de la página de un proyecto de cliente.
• La presentación. Ancho, alto, el diseño alrededor, si aparece sobre o bajo el pliegue.

Una advertencia honesta sobre búsqueda: el contenido dentro de un iframe no se trata de forma fiable como contenido de tu página. Si quieres que los buscadores vean sustancia, escribe un párrafo real y un índice en la propia página, y deja que el lector insertado cargue la experiencia. No insertes una publicación en una página en blanco y esperes posicionamiento.

Paso 1: activar la inserción para esa publicación

Insertar suele ser un ajuste por publicación, no por cuenta — y así debe ser: tú decides, número a número, qué puede aparecer en tu sitio.

En Flipable es el interruptor Embed habilitado en la página de detalle del catálogo. Cuando está apagado, la URL de inserción de ese catálogo devuelve un 404 en todas partes: justo el comportamiento que quieres mientras una publicación esté bajo embargo o se haya retirado.

La publicación también debe terminar de convertirse. Un catálogo que sigue procesándose, o que falló, no se renderiza — verás un mensaje de espera en lugar de un lector.

Paso 2: poner en lista blanca el dominio que lo alojará

Antes de que el código funcione, el dominio debe estar registrado. Flipable mantiene una lista de permitidos por espacio de trabajo en Ajustes → Domains & Embed → Dominios permitidos, y cualquier iframe de un dominio fuera de ella se rechaza.

Dos cosas que conviene entender de esa coincidencia:

• Un dominio cubre todos sus subdominios. Añadir example.com también permite www.example.com, shop.example.com y staging.example.com. Para la mayoría de los sitios, eso significa que hace falta exactamente una entrada.
• Coincide por el dominio raíz, no por la URL completa. blog.example.com y example.com son la misma entrada; example.net es otra distinta. Así que una microsite de campaña en otra raíz necesita su propia entrada.

Los huecos de dominio están limitados por plan: uno en Free, Starter y Pro, dos en Growth, tres en Business. Si vas a publicar en tres o más dominios raíz sin relación, plánalo antes de firmar contratos con clientes — no después.

Paso 3: copiar el código de inserción y pegarlo como HTML

La página de detalle de cada catálogo te da un fragmento listo en cuanto la inserción está habilitada y existe un token:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Pégalo en algo que acepte HTML sin procesar, no en un campo de texto enriquecido:

• WordPress: un bloque HTML personalizado
• Webflow: un elemento Embed
• Shopify: una sección Custom Liquid
• Squarespace: un bloque Code
• Sitio hecho a mano: en cualquier parte del cuerpo

Si tu CMS te da a la vez un modo de edición «visual» y otro «HTML», usa el modo HTML. Los editores de texto enriquecido son la causa más común de muerte silenciosa de las inserciones: convierten alegremente las comillas rectas en tipográficas, y el navegador se queda leyendo basura.

Paso 4: arreglar la altura antes de que alguien lo abra en un móvil

Este es el paso que se salta, y es el que los lectores notan.

La página insertada llena la altura que le des. Un iframe con height="600" significa que el lector vive dentro de una ventana de 600 píxeles: cómodo en escritorio, y en un móvil se convierte en una caja desplazable dentro de tu página que ya es desplazable. Dos zonas de scroll compitiendo en una pantalla táctil es una experiencia realmente mala; la gente culpa a la publicación, no al contenedor.

Un valor por defecto más robusto:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        title="Catálogo otoño/invierno"
        style="width:100%;height:clamp(500px,75vh,900px);border:0"
        allowfullscreen></iframe>

• clamp() da a los móviles una ventana utilizable, deja crecer al escritorio y evita que las tabletas reciban una tira enana.
• frameborder está obsoleto; border:0 es como se hace ese trabajo ahora.
• Pon un title explícito. Es el nombre accesible del marco, y no te cuesta nada.
• Para una landing a sangre completa funciona height:100vh — pero cuenta con una cabecera fija, o pasa a 100dvh para que la barra del navegador móvil no se coma la parte baja del lector.

Luego míralo en un móvil real, en vertical y horizontal, antes de enviar el enlace a alguien importante.

Paso 5: decidir dónde carga en la página

Si la publicación es la razón de ser de la página, ponla en la primera pantalla y no la cargues en diferido. Si apoya a la página — una ficha técnica dentro de una descripción de producto larga — añade loading="lazy" para que quienes nunca hagan scroll hasta ahí no la descarguen nunca.

Una consecuencia que conviene conocer: las vistas se cuentan cuando el lector se carga de verdad. Una inserción diferida bajo el pliegue mostrará menos vistas que la página misma, porque una parte de las visitas nunca llegó hasta ella. No es un fallo del conteo; es una descripción del comportamiento. Valora el rendimiento de una inserción frente a la profundidad de scroll de la página donde vive.

Lo que realmente protege una publicación

Tres mecanismos, y conviene saber con precisión hasta dónde llega cada uno:

• Una URL imposible de adivinar. La ruta de inserción lleva un token a nivel de espacio de trabajo. Nadie puede adivinar la dirección de inserción de un catálogo; una URL es, en la práctica, un secreto — trátala como tal y no la pegues en foros públicos.
• Una lista de dominios más frame-ancestors. Solo los hosts en la lista blanca pueden enmarcar la publicación; el navegador se entera vía una Content-Security-Policy construida con tu propia lista de dominios permitidos, así que la inserción no autorizada falla en vez de solo verse rara.
• Un interruptor de apagado por catálogo. Apagar la inserción rompe al instante todas las inserciones de esa publicación, estén donde estén. Ese es tu botón de freno.

Y ahora el límite, dicho claro: una lista de permitidos no es un paywall. Abrir la URL de inserción directamente en una pestaña del navegador, en vez de dentro de un iframe, está permitido — la comprobación de dominio trata de quién puede enmarcar tu contenido, no de quién puede leerlo. Si una publicación está de verdad tras una suscripción, protege con tu propia autenticación la página que contiene la inserción. El trabajo de la herramienta termina en «quién puede enmarcar esto»; «quién puede leer esto» es trabajo de tu sitio.

Cuando no funcione, revisa en este orden

1. La inserción está apagada para ese catálogo. Síntoma: un 404 en el marco. La causa más común, con diferencia.
2. El dominio anfitrión no está en la lista blanca. Relee el dominio raíz exacto en la barra de direcciones del navegador, en la página que inserta.
3. ID de catálogo equivocado o token copiado de otro espacio de trabajo. Son cadenas largas y opacas; pegar la mitad de una es fácil.
4. Conversión aún en curso, o fallida. Síntoma: un mensaje de espera o un banner de error en la página del catálogo.
5. Tu propio sitio bloquea marcos. Un frame-src estricto en tu Content-Security-Policy, o un plugin de seguridad que haga lo mismo, bloqueará iframe de terceros — incluido el tuyo.
6. Desajuste HTTPS. Insertar un lector HTTPS en una página HTTP está permitido; al revés es donde los navegadores empiezan a quejarse. Arregla el certificado.
7. El CMS destrozó el marcado. Mira el código fuente de la página publicada y comprueba que los atributos siguen bien entrecomillados.

Lista de verificación previa

• Inserción habilitada para esa publicación concreta
• Dominio raíz en lista blanca (los subdominios vienen de serie)
• Fragmento pegado en un bloque HTML, no en un campo de texto enriquecido
• Atributo title puesto en el marco
• Altura probada en un móvil, en vertical y horizontal
• Inserciones bajo el pliegue con loading="lazy"
• La página contiene texto real si quieres que se indexe
• Analytics revisados al día siguiente, no al trimestre siguiente

Pruébalo con una publicación

La forma más rápida de saber si insertar encaja con tu sitio es pasar un solo PDF existente por el proceso — un catálogo, un dominio, una página, comprobados en un móvil. Esa es, a propósito, la forma del plan gratuito: una publicación, 100 páginas por catálogo, un dominio de inserción, con una pequeña insignia «Powered by Flipable» en el lector. La insignia es nuestra publicidad — por eso el plan es tan generoso. Si la insignia es un problema en tus trabajos para clientes, eso es justo lo que quitan los planes de pago.