¿Qué es un iFrame? (Y cómo usarlos)

¿Qué es un iFrame?

Puede pensar en un marco en línea (o iFrame) como una ventana en su página web que mira hacia otro contenido en línea. La forma más técnica de describirlo es un documento HTML incrustado dentro de otro documento HTML:

En cuanto al código, cada iFrame incluye etiquetas HTML <iframe> así como un  atributo src para ayudar a indicar la ubicación del contenido que desea incrustar en su sitio. Sin embargo, también hay otros atributos que puede incorporar para especificar las dimensiones de la «ventana» en sí.

Por ejemplo, aquí está el código para el iFrame de ejemplo simple en la captura de pantalla anterior:

En este caso, la etiqueta <iframe> incluye la URL de la página que se mostrará y el alto y el ancho de la ventana en píxeles. Puede incorporar otros atributos para habilitar políticas de funciones ( allow ), modo de pantalla completa ( allowfullscreen ), pagos ( allowpaymentrequests ) y más.

Es importante tener en cuenta que hay muchos atributos de iFrame que no son compatibles con HTML5 (como el desplazamiento ). Como tal, asegúrese de utilizar información actualizada cuando codifique a mano sus iFrames.

¿Cuándo debería usar un iFrame?

El propósito principal de un 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 anuncios de barra lateral y banner son en realidad iFrames. Esto permite que sus socios publicitarios proporcionen y mantengan fácilmente el contenido que están pagando para mostrar en su sitio.
• Videos de Youtube. El código de inserción de YouTube utiliza un iFrame para mostrar un video alojado en su plataforma en su página. Con esta técnica, no tiene que preocuparse por cargar el video en su biblioteca multimedia.
• Mapas de Google. Si alguna vez ordenó comida de un restaurante para la entrega, es posible que haya visto un iFrame de Google Maps al seleccionar la ubicación de la tienda más cercana. Desafortunadamente, Google reemplazó esto con su clave API de Maps , por lo que los nuevos usuarios no pueden incrustar mapas a través de iFrames.
• Publicaciones en redes sociales. Una forma de mostrar sus publicaciones más recientes en las redes sociales es a través de un iFrame. Esto es conveniente porque se actualizarán automáticamente para incluir Me gusta, comentarios y otros elementos dinámicos (como explicaremos en breve).
• RSS Feed. Al igual que las publicaciones en redes sociales que cambian constantemente, las fuentes RSS a veces son más fáciles de mostrar usando un iFrame. Simplemente use la URL de la fuente RSS como el  atributo src .

También hay varios casos de uso más complejos, como el desarrollo de un sistema de inicio de sesión único o un editor de texto Lo que ves es lo que obtienes (WYSIWYG). Por ejemplo, el editor TinyMCE (anteriormente la interfaz de creación de contenido predeterminada de WordPress) utiliza un iFrame.

¿Cuáles son los beneficios de usar iFrames?

Para la mayoría de los usuarios, los iFrames son beneficiosos porque mantienen la separación entre el documento HTML principal (su sitio) y el contenido externo que está cargando en él. Esto es útil por dos razones. Primero, no tiene que preocuparse por actualizar el contenido de terceros que desea mostrar. Sus socios publicitarios pueden cambiar sus promociones, su feed de Facebook puede actualizarse y Google Maps puede ajustarse para nuevos desarrollos de viviendas. Su iFrame cargará la última versión.

Tome el ejemplo introductorio que usamos al principio de esta publicación. Actualmente incluye un anuncio de venta de cumpleaños de Divi. Sin embargo, una vez que finalice la promoción, el iFrame mostrará nuestra página de inicio estándar sin el banner.

Además, mantener la separación entre su contenido y el de otros sitios puede brindar mayor seguridad. No tiene que preocuparse por importar inadvertidamente vulnerabilidades o errores agregando código de terceros directamente a los archivos de su sitio.

Aun así, hay muchos desarrolladores que se oponen al uso de iFrames porque también pueden suponer riesgos para la seguridad. Cualquier elemento malicioso en el documento que está cargando en su «ventana» también estará disponible en su sitio. Los terceros podrían aprovechar esta oportunidad para «phishing» en los datos del usuario.

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 incorporar nuevas funciones a su sitio.

2 módulos Divi que puede usar para incorporar iFrames en su sitio de WordPress

Si está buscando utilizar iFrames en su sitio de WordPress, Divi puede ayudarlo. Algunos de nuestros módulos son particularmente adecuados para acomodar este útil elemento HTML y pueden facilitarle aún más el trabajo con él. Aquí hay tres con los que puede comenzar de inmediato.

1. El Módulo de Vídeo

Como mencionamos anteriormente, uno de los usos más comunes de los iFrames es mostrar videos de YouTube en su sitio. De hecho, cuando usa el módulo de video de Divi , hace exactamente eso detrás de escena:

Como explicamos en un tutorial anterior , cuando agrega la URL de un video externo al Módulo Divi, genera automáticamente un iFrame para mostrarlo. Si no quiere tener que escribir su  etiqueta y atributos <iframe> , esta es una manera rápida y fácil de lograr el mismo resultado.

2. El módulo de código

Por supuesto, siempre tienes la opción de incorporar código personalizado usando el Módulo de Código Divi . Esta es una forma sencilla de escribir su  etiqueta y atributos <iframe> a mano, o de usar iFrames incluidos en códigos de inserción de terceros.

Usaremos una publicación de Facebook como ejemplo. Recupere el código de inserción haciendo clic en el icono de tres puntos en la esquina superior derecha de la publicación que desea mostrar y seleccione Insertar :

Luego copie el código para el iFrame y agréguelo a su módulo de código Divi:

Su iFrame ahora mostrará su publicación de Facebook en Divi Builder y en la parte frontal de su sitio después de que publique o actualice la página.

Conclusión

Con tantas formas útiles de conectarse y compartir información con personas en la web, tiene sentido que desee extraer contenido de terceros, como videos de YouTube, en su propio sitio. Como tal, los iFrames están hechos para ayudarlo a hacerlo mientras mantiene su contenido separado de sus fuentes externas.

Si cree que iFrames podría ser una solución útil para su sitio, los siguientes módulos Divi Builder pueden ayudarlo a incorporar algunos de los tipos de contenido más populares de forma rápida y sencilla:

1. El módulo de video: genere rápidamente iFrames de YouTube con nada más que la URL de la página del video.
2. El módulo de código: elabore sus propios iFrames o pegue códigos de inserción de terceros de plataformas como Facebook.

Si estaba tratando de incrustar un iFrame para un video de Youtube, también tiene otras opciones. Consulte los mejores complementos de Youtube para obtener más información al respecto.

¿Tiene alguna pregunta sobre iFrames o cómo usarlos en su sitio de WordPress? ¡Déjalos para nosotros en la sección de comentarios a continuación!

Imagen destacada de VectorsMarket / shutterstock.com