Convierte un PDF en un flipbook con paso de página y colócalo en cualquier entrada o página de Blogger con un solo iframe. Este tutorial recorre la vista HTML, el tamaño, el comportamiento en dispositivos móviles, las páginas frente a las entradas y la solución a los errores más comunes.
Blogger te ofrece un espacio limpio y gratuito para escribir, pero nunca se diseñó para mostrar un catálogo de 40 páginas o una revista que la gente pueda hojear de verdad. Enlazar a la descarga de un PDF es la solución habitual, y también es el paso en el que la mayoría de los lectores se rinde. La mejor ruta es convertir ese PDF en un flipbook con Flipbooks AI y pegarlo directamente en tu entrada usando la vista HTML de Blogger. Todo el proceso toma unos diez minutos, y no necesitas saber programar.
Este tutorial muestra exactamente cómo incrustar un flipbook en Blogger usando la vista HTML, desde generar el código para incrustar hasta ajustar su tamaño para teléfonos, colocarlo en una página estática y corregir los errores con los que más tropiezan los usuarios.
Un enlace hace que los lectores se vayan. Una incrustación los mantiene en tu blog, donde tu barra lateral, tus anuncios y tu siguiente entrada están a un desplazamiento de distancia.
Cuando un flipbook está dentro de la propia entrada, cambian tres cosas:
💡 Consejo profesional: Escribe de 150 a 300 palabras de contexto real alrededor de la incrustación. Los buscadores no pueden leer lo que hay dentro de un iframe, así que tu propio texto es lo que posiciona.
La lista es corta:
Eso es todo. Sin complementos, sin editar la plantilla y sin alojamiento propio.
Casi cualquier documento de más de unas pocas páginas se beneficia del formato flipbook. Así se comparan los usos habituales de Blogger.
| Uso en Blogger | Documento típico | Mejor herramienta de Flipbooks AI |
|---|---|---|
| Blog de viajes | Itinerario del destino o folleto de viaje | Flipbook de guía de viaje |
| Blog de cocina | Colección de recetas | Flipbook de libro de recetas |
| Blog de fotografía | Portafolio o lookbook | Portafolio fotográfico |
| Blog de pequeñas empresas | Catálogo de productos o lista de precios | Creador de catálogos digitales gratis |
| Blog de educación | Apuntes de curso o manual de formación | Flipbook de manual de formación |
Blogger solo muestra lo que le indicas, así que el flipbook tiene que existir antes de tocar el editor.
Exporta tu PDF a un tamaño razonable antes de subirlo. Un archivo de 15 MB carga más rápido que uno de 120 MB, y los lectores con datos móviles lo agradecerán.
Antes de copiar cualquier código, dedica dos minutos a los detalles que hacen que un flipbook sea tuyo:
✅ Buena práctica: Haz que el fondo del flipbook coincida con el color de fondo de tu blog. Así la incrustación se ve integrada y no encerrada en un recuadro.
Abre tu flipbook terminado y elige la opción de compartir o incrustar. Verás un fragmento de código como este:
<iframe src="https://your-flipbook-link"
width="100%" height="600"
frameborder="0" allowfullscreen>
</iframe>
La única parte que cambia entre flipbooks es la dirección dentro de src. Todo lo demás son ajustes de tamaño o de comportamiento que puedes modificar más adelante.
También puedes leer más sobre el proceso de incrustación en la página Incrustar flipbook en sitio web.
| Atributo | Qué controla | Valor recomendado |
|---|---|---|
src | La dirección del flipbook | Pégala exactamente como se entrega |
width | Tamaño horizontal | 100% para un diseño adaptable |
height | Tamaño vertical | 600 a 700 para escritorio |
frameborder | Borde visible | 0 para un aspecto limpio |
allowfullscreen | Botón de pantalla completa | Mantenlo activado |
Este es el paso del que trata todo el artículo, y es breve.
⚠️ Advertencia: Si vuelves a la vista de redacción y editas el texto alrededor del iframe, Blogger puede eliminar o reescribir partes del código de forma ocasional. Termina primero de escribir y pega el iframe al final, o revisa la vista HTML una vez más antes de publicar.
Las páginas estáticas funcionan exactamente igual. Esto es ideal para un catálogo permanente, un menú o un kit de prensa.
Un blog de restaurante, por ejemplo, puede mantener su menú de temporada actual en una sola página. Cuando el menú cambie, actualizas el flipbook en Flipbooks AI y la página se renueva sin que tengas que editar Blogger. El Creador de flipbooks de menú de restaurante está pensado para este escenario exacto.
| Factor | Entrada de Blogger | Página de Blogger |
|---|---|---|
| Aparece en el feed | Sí | No |
| Tiene fecha | Sí | No |
| Ideal para | Anuncios, números, contenido de temporada | Catálogos, menús, recursos permanentes |
| Puede usar etiquetas | Sí | No |
| Fácil de actualizar | Edita la entrada | Edita la página |
Las plantillas de Blogger varían mucho. Un fragmento que se ve perfecto en una plantilla puede desbordarse en otra, así que pruébalo antes de celebrarlo.
La configuración width="100%" resuelve la mayoría de las plantillas. Si el flipbook se ve demasiado bajo en los teléfonos, envuélvelo en un contenedor que mantenga una proporción fija:
<div style="position:relative;padding-bottom:75%;height:0;overflow:hidden;">
<iframe src="https://your-flipbook-link"
style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
allowfullscreen></iframe>
</div>
Aquí padding-bottom:75% da una proporción de 4:3. Usa 56.25% para 16:9. Los flipbooks se ven mejor un poco más altos que anchos en dispositivos móviles, así que 4:3 o incluso 1:1 suele ser la mejor opción.
No confíes solo en la vista previa de escritorio. Abre la entrada publicada en tu teléfono y revisa:
Aproximadamente la mitad del tráfico de los blogs llega desde dispositivos móviles, así que esta prueba de diez segundos protege una gran parte de tu audiencia.
| Pantalla | Ancho sugerido | Alto sugerido |
|---|---|---|
| Columna de entrada en escritorio | 100% | 600 a 700 px |
| Tableta | 100% | 500 a 600 px |
| Teléfono | 100% | 400 a 500 px o caja con proporción |
| Página estática de ancho completo | 100% | 750 px o más |
La mayoría de los fallos vienen de una de cinco causas. Revisa esta lista en orden.
La causa habitual es una dirección rota. Vuelve a copiar el fragmento de Flipbooks AI y asegúrate de que el valor de src empiece por https://. Confirma también que el flipbook está configurado como público o que has compartido la contraseña con tus lectores.
Esto ocurre cuando la entrada se guarda en la vista de redacción después de pegar el iframe. Cambia a la vista HTML, comprueba que el código sigue ahí y pégalo de nuevo si hace falta. Mantén el iframe en su propia línea, sin texto suelto dentro de la etiqueta.
Aumenta el valor de height o cambia al contenedor con proporción que se mostró arriba. Algunas plantillas también aplican un ancho máximo al cuerpo de la entrada. En ese caso, usa una página estática con diseño de ancho completo.
Cambia de un ancho fijo en píxeles a 100%. Elimina los valores de estilo width="800" que vengan de fragmentos de incrustación antiguos.
| Síntoma | Causa probable | Solución |
|---|---|---|
| Recuadro gris en blanco | src incorrecto o incompleto | Vuelve a copiar el fragmento completo |
| El código desaparece | Guardado en la vista de redacción | Pégalo otra vez en la vista HTML |
| Desplazamiento lateral | Ancho fijo en píxeles | Usa width="100%" |
| Las páginas no se mueven | Conflicto de script con la plantilla | Prueba con la plantilla predeterminada |
| Aparece la solicitud de contraseña | Protección activada | Comparte la contraseña o desactívala |
Un flipbook incrustado es algo más que un PDF más bonito. Unos pocos ajustes lo convierten en una pieza útil de tu plan de contenidos.
El plan Professional añade analíticas y generación de contactos, para que veas cuántas personas abren tu flipbook y recojas correos antes de que lean. Todos los planes mantienen tu flipbook sin marcas de agua, y el plan Standard y superiores permite flipbooks ilimitados, lo que resulta útil para un blog que publica números nuevos con regularidad.
| Función | Por qué le importa a un bloguero |
|---|---|
| Sin marcas de agua | Tu diseño se mantiene limpio y profesional |
| Protección con contraseña | Comparte contenido privado solo con suscriptores |
| Descargas sin conexión | Los lectores pueden guardar el documento para más tarde |
| Videos y audio | Enriquece el contenido sin complementos extra |
| Diseño adaptable a móviles | Funciona en teléfonos sin configuración adicional |
| Marca propia | Combina con los colores y el logotipo de tu blog |
Una vez que lo hayas hecho una vez, el proceso se puede repetir:
Incrustar un flipbook en Blogger se reduce a tres pasos: crear el flipbook, copiar el iframe y pegarlo en la vista HTML. Todo lo demás es pulido.
Estos son los siguientes pasos:
Tus lectores ya están en tu blog. Dales algo que de verdad puedan hojear.
Elige tu idioma
