A medida que los sitios web se vuelven cada vez más complejos, tiene sentido que los usuarios de WordPress necesiten los medios para mostrar contenido de terceros en sus propias páginas. Afortunadamente, hay un elemento HTML llamado iFrame que puede ayudarte con esto.
En esta publicación, explicaremos qué es iFrame y cuándo es mejor usarlo. También discutiremos los beneficios de este elemento para los usuarios de WordPress y le mostraremos lo fácil que es habilitarlo usando algunos de nuestros módulos Divi Builder.
¡Vamos a sumergirnos!
Suscríbete a nuestro canal de YouTube
¿Qué es un iFrame?
Puede pensar en un marco en línea (o iFrame) como una ventana en su sitio web con vista a otra pieza de contenido en línea. Una forma más técnica de describirlo es con un documento HTML incrustado en otro documento HTML:
En cuanto al código, cada iFrame contiene etiquetas HTML y origen un atributo que lo ayuda a identificar la ubicación del contenido que desea colocar en su sitio. Sin embargo, también hay otros atributos que puede incluir para determinar las dimensiones de la «ventana» en sí.
Por ejemplo, aquí está el código para un ejemplo simple de iFrame en la captura de pantalla anterior:
<iframe src="https://www.elegantthemes.com" height="630" width="1920"></iframe>
En este caso contiene la URL de la página que se mostrará y la altura y el ancho de la ventana en píxeles. puedes encender otros atributos para habilitar la política de funciones (permitir), pantalla completa (Permitir el modo de pantalla completa), pagos (Permitir solicitudes de pago), y más.
Tenga en cuenta que hay muchos atributos de iFrame que no son compatibles con HTML5 (como desplazamiento). Por lo tanto, asegúrese de utilizar información actualizada cuando codifique manualmente iFrames.
¿Cuándo se debe utilizar iFrame?
El objetivo principal de iFrame para la mayoría de los usuarios de WordPress que no son desarrolladores es mostrar contenido de terceros en su sitio. Algunos usos comunes incluyen:
- anuncios Muchos de los anuncios en la barra lateral y los anuncios publicitarios son en realidad iFrames. Esto permite que sus socios publicitarios entreguen y mantengan fácilmente el contenido que pagan para mostrar en su sitio.
- Videos de Youtube. El código de inserción de YouTube usa iFrame para mostrar videos alojados en esa plataforma en su sitio web. Al usar esta técnica, no tiene que preocuparse por cargar su video a la Biblioteca de medios.
- Mapas de Google. Si alguna vez ha pedido comida a domicilio en un restaurante, es posible que haya visto un iFrame de Google Maps al seleccionar la tienda más cercana. Desafortunadamente, Google ha reemplazado esto con su clave API de Maps, por lo que los nuevos usuarios no pueden incrustar mapas usando iFrames.
- Publicaciones en redes sociales. Una forma de mostrar las últimas publicaciones en las redes sociales es usar un iFrame. Esto es conveniente ya que se actualizarán automáticamente para incluir Me gusta, comentarios y otros elementos dinámicos (que explicaremos brevemente).
- RSS Feed. Al igual que las publicaciones en las redes sociales en constante cambio, las fuentes RSS a veces son más fáciles de mostrar con iFrame. Simplemente use la URL de su fuente RSS como origen atributo.
También hay algunos casos de uso más complejos, como el desarrollo de un sistema de inicio de sesión único o un editor de texto WYSIWYG (Lo que ves es lo que obtienes). Por ejemplo Editor TinyMCE (anteriormente la interfaz de creación predeterminada de WordPress) utiliza un iFrame.
¿Cuáles son los beneficios de usar iFrames?
La mayoría de los usuarios se benefician de los iFrames porque mantienen una separación entre el documento HTML principal (su sitio) y el contenido externo que se carga en él. Esto es útil por dos razones. Primero, no tiene que preocuparse por actualizar el contenido de terceros que desea ver. Sus socios publicitarios pueden cambiar sus promociones, su feed de Facebook puede actualizarse y Google Maps puede adaptarse a nuevos vecindarios. Su iFrame cargará la última versión.
Tomemos el ejemplo introductorio que usamos al comienzo de esta publicación. Actualmente tiene un anuncio sobre la venta de cumpleaños de Divi. Sin embargo, una vez finalizada la promoción, el iFrame mostrará nuestra página de inicio estándar sin un banner.
Además, mantener su contenido separado del de otros sitios puede proporcionar seguridad adicional. No tiene que preocuparse por importar inadvertidamente agujeros de seguridad o errores agregando código de terceros directamente a los archivos de su sitio web.
Aun así, muchos desarrolladores se oponen al uso de iFrames, ya que también pueden representar un riesgo para la seguridad. Cualquier elemento malicioso en el documento que cargue en su «ventana» también estará disponible en su sitio. Los terceros pueden aprovechar esta oportunidad para ‘phishing’ de los datos de los usuarios.
Sin embargo, si obtiene contenido de terceros de fuentes acreditadas como Google, YouTube y redes sociales populares o plataformas de noticias, esto no debería ser un problema. Como siempre, sea selectivo al introducir nuevas funciones en su sitio web.
2 módulos Divi que puedes usar para incorporar iFrames en tu sitio de WordPress
Si desea utilizar iFrames en su sitio de WordPress, Divi puede ayudarlo. Algunos de nuestros módulos son particularmente adecuados para manejar este útil elemento HTML y pueden hacer que sea aún más fácil trabajar con él. Aquí hay tres con los que puede comenzar de inmediato.
1. Módulo de vídeo
Como mencionamos anteriormente, uno de los usos más comunes de iFrames es mostrar videos de YouTube en su sitio web. De hecho, cuando usa el módulo de video Divi, hace exactamente eso detrás de escena:

Como explicamos en el tutorial anterior, cuando agrega una URL de video externa al módulo Divi, genera automáticamente un iFrame para mostrarlo. Si no desea ingresar su etiqueta y atributos, es una manera rápida y fácil de lograr el mismo resultado.
2. Módulo de código
Por supuesto, siempre tienes la opción de habilitar tu propio código usando el módulo Divi Code. Es una manera fácil de ingresar la tuya.
Usaremos una publicación de Facebook como ejemplo. Descargue el código de inserción haciendo clic en el ícono de tres puntos en la esquina superior derecha de la publicación que desea ver y seleccione Empotrar:

Luego copie el código iFrame y agréguelo al módulo Divi Code:

Su iFrame ahora mostrará su publicación de Facebook en Divi Builder y en la interfaz de su sitio web cuando publique o actualice su página.
Solicitud
Con tantas formas útiles de conectarse y compartir información con personas en la web, es posible que desee incorporar contenido de terceros, como videos de YouTube, en su sitio. Entonces, los iFrames están ahí para ayudarlo con esto mientras mantienen su contenido separado de las fuentes externas”.
Si cree que los iFrames pueden ser una solución útil para su sitio web, los siguientes módulos de Divi Builder pueden ayudarlo a habilitar rápida y fácilmente algunos de los tipos de contenido más populares:
- Módulo de vídeo: Genere rápidamente iFrames de YouTube con solo la URL de la página de video.
- Módulo de código: Cree sus propios iFrames o pegue códigos de inserción de terceros desde plataformas como Facebook.
¿Tiene preguntas sobre iFrames y cómo usarlos en su sitio de WordPress? ¡Déjalos para nosotros en la sección de comentarios a continuación!
Imagen recomendada por VectorsMarket / shutterstock.com








