Tutorial
Insertar un flipbook 3D en Substack sin iframe
Substack no acepta iframes en las publicaciones. La imagen de portada enlazada es el bloque que lleva un flipbook 3D, y así se arma una que la gente toque.
3 min de lectura
El bloque de PDF de Notion es un scroll plano. Pega la URL de un visor de i3Dify en ese mismo bloque y el visitante recibe un libro que se hojea.
Por Franco Cirulli
Soltaste un PDF en una página de Notion y salió un scroll gris. El visitante se encuentra un enlace de descarga con una miniatura, o una tira vertical de páginas planas donde nadie se detiene.
En ese mismo bloque Notion dibuja un visor vivo si le pasas una URL que su motor de inserciones reconozca, y la de un flipbook de i3Dify es una de ellas. El bloque no cambia. Cambia lo que hay adentro.
Subes un PDF directo a Notion y sale una de dos cosas. Un bloque de archivo, que es un enlace de descarga con una miniatura chica en la que casi nadie hace clic. O una inserción, que muestra las páginas como un scroll vertical plano, igual que la vista previa de un disco en la nube. Para un manual interno, alcanza.
Para una página que mandas fuera del equipo, un portafolio, un lookbook, un menú, un mood book de boda, esa es justo la parte que nadie mira. Un flipbook se comporta como un objeto. Haces clic en el cuarto derecho del visor y la hoja se dobla sobre el lomo mientras pasa, con las dos páginas de al lado ya cargadas para que el pase no se trabe en un teléfono. El cuarto izquierdo vuelve atrás, y las flechas del teclado hacen lo mismo. Arrastra en cualquier parte y el libro gira, y al soltar vuelve solo. Un hotspot que pones sobre una página abre su enlace en otra pestaña, y el dock trae zoom para el texto pequeño.
Primero arma el libro. Sube el PDF, que se separa en páginas dentro del navegador, elige el color de portada y el dock de enlaces, y publica. El panel de compartir te deja una URL de visor y un iframe. Notion quiere solo la URL, porque el iframe lo escribe él.
En la página, escribe /embed en una línea nueva, elige Insertar, pega la URL y confirma. Pegar la URL suelta en una línea y elegir Crear inserción hace exactamente lo mismo. El bloque entra bajito: arrastra el borde de abajo hasta algo entre 600 y 800 píxeles y el visor ocupa el ancho que le dé la columna. El plan gratuito cubre 3 proyectos y 50 MB, y todo visor gratuito lleva la píldora de i3Dify en la esquina. Pro cuesta 3 dólares por mes y la saca.
Las dos capas de privacidad no tienen nada que ver entre sí, y ahí tropieza todo el mundo. Los permisos de Notion deciden quién ve la página. La visibilidad del proyecto decide si el visor llega a cargar, y un proyecto Privado contesta a su URL pública con una página de No encontrado, así que el bloque queda vacío. Ponlo en No listado o Público antes de pegar nada. No listado lo deja fuera del buscador y abierto a quien tenga el enlace.
Para un entregable de cliente, súmale una contraseña a un proyecto No listado y manda la clave por otro canal. El límite conviene decirlo de frente: la contraseña cubre la página del proyecto, no las URLs directas de las imágenes, así que es una traba en la puerta y no una caja fuerte. En compartir y distribuir están los ajustes proyecto por proyecto.
Hay dos casos que conviene conocer antes de armar una página alrededor de la inserción. La app móvil de Notion limita la interacción con iframes más que un navegador, así que desde la app el visor sigue estando, pero los gestos táctiles responden con menos soltura. El que abre tu página compartida en un navegador móvil lo recibe entero.
Con las exportaciones pasa algo parecido. La de HTML conserva el iframe, la de PDF lo cambia por un enlace. Si la página se archiva o se reenvía como archivo, pega la URL del visor como texto plano al lado para que el libro sobreviva el viaje.
El mismo proyecto se inserta en WordPress, Webflow, Framer, Carrd y Squarespace, donde en lugar de la URL a secas pegas el iframe. Un proyecto, una URL, y el visitante se encuentra un libro dentro de la página en vez de un enlace de descarga que nadie toca.
Convierte tu PDF en un flipbook 3D.
Notion carga las inserciones de forma diferida, a medida que el visitante baja. El visor pesa alrededor de 1 MB en el paquete inicial y va trayendo las páginas a demanda. Tu página de Notion carga igual de rápido que antes.
La inserción hereda los permisos de la página de Notion, así que si la página es privada solo la ven los miembros con sesión iniciada. Si además quieres cerrar el visor en sí, pon una contraseña en el proyecto de i3Dify.
Notion solo puede insertar proyectos Públicos o No listados. Uno Privado contesta a su URL pública con una página de No encontrado, así que el bloque queda vacío. Ponlo en No listado y agrega una contraseña en lugar de dejarlo Privado.
La exportación a HTML conserva el iframe. La de PDF lo cambia por un enlace, así que pega la URL del visor al lado de la inserción si la página se va a exportar.
Substack no acepta iframes en las publicaciones. La imagen de portada enlazada es el bloque que lleva un flipbook 3D, y así se arma una que la gente toque.
Convertir un PDF a flipbook lleva dos minutos. Cómo exportaste el archivo decide si las páginas quedan nítidas, se emparejan bien y se leen en el celular.
Transforma tu contenido en experiencias 3D inmersivas en segundos.
Crear flipbook