Cómo incrustar iframes en un sitio WordPress (manualmente y con plugins)

¿Ha oído hablar recientemente de los marcos en línea (iFrames) y de cómo pueden ayudarle a compartir contenidos en su sitio web? Si lo ha hecho gestionar un blogo producir cualquier contenido web, habrá muchas ocasiones en las que querrás compartir el contenido de otras personas.

Los iFrames permiten hacerlo de forma eficaz y segura.

Con un iFrame, podrá mostrar contenidos como vídeos e imágenes sin tener que alojarlas en su sitio web.

En esta entrada, vamos a explicar qué son los iFrames, qué hacen y cómo utilizarlos en WordPress.

A continuación, le mostraremos cómo incrustarlos manualmente y mediante plugins.

Uso de iFrames en WordPress

Puede que te preguntes por qué necesitas utilizar un iFrame para incrustar contenido cuando hay otras formas de hacerlo.

Por un lado, podrías simplemente copiar y pegar el contenido en tu sitio web, ¿verdad? O, en el caso de los vídeos, simplemente descargarlos y subirlos a tus entradas, páginas o biblioteca multimedia.

Aunque estos métodos funcionan, no son aconsejables. En primer lugar, copiar y pegar contenidos ajenos puede suponer una violación de las leyes de derechos de autor.

La segunda razón por la que no deberías subir contenidos como vídeos es porque estos archivos ocupan mucho espacio en disco y ancho de banda y podrían ralentizar tu sitio web. Considere la posibilidad de comprar alojamiento de vídeo si desea alojar vídeos localmente.

El uso de un iFrame evitará ambos problemas.

¿Qué son los iFrames?

Un iFrame es un fragmento de código HTML que se utiliza para crear una página HTML incrustada dentro de otra página HTML. Esencialmente, crea una ventana para ver contenido de fuentes externas desde dentro de una página web.

Un iFrame tiene este aspecto:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KWFin60lkmw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Para crear un iFrame, se necesitan tres elementos importantes.

El primero es el fragmento de código que crea el iFrame. Este código se pegará en el código HTML de la página en la que desea mostrar el contenido externo.

<iframe src=”yourdomainname.com”> </iframe>

También necesitará tener la URL de la página externa incrustada dentro de este código.

<iframe width="560″ height="315″ src="https://www.youtube.com/embed/KWFin60lkmw" title="Reproductor de vídeo de YouTube"

Por último, un conjunto de atributos que determinarán cómo se mostrará el iFrame.

frameborder="0″ allow="acelerómetro; autoplay; clipboard-write; encrypted-media; giroscopio; picture-in-picture" allowfullscreen>

Estas especificaciones le indican a su sitio web qué anchura, altura, estilo, etc. debe utilizar para mostrar el iFrame.

Entraremos en más detalles sobre esto cuando hablemos del método manual de incrustar iFrames en su sitio web.

Puede que los iFrames sean buenos para mostrar contenidos pesados sin necesidad de importarlos, pero eso no es todo lo que puedes hacer con ellos. La amplia gama de cosas que puedes hacer con un iFrame puede sorprenderte. Echa un vistazo a algunos ejemplos a continuación.

Mostrar otra página web

¿Quiere remitir a sus lectores a otra página sin que se desplacen? Utilice un iFrame. Es una forma excelente de compartir contenido interesante o perspicaz y mantener a los lectores en su página.

Mostrar contenido dinámico de redes sociales

Puedes mostrar las publicaciones en las redes sociales simplemente haciendo capturas de pantalla, pero los iFrames ofrecen algo más. Son capaces de capturar contenidos dinámicos, como "me gusta" y "compartidos", a medida que cambian en tiempo real.

Anuncios

La mayoría de los anuncios se muestran en iFrames. Esto permite al anunciante mantener el control sobre sus anuncios, realizando las actualizaciones necesarias.

Estos son sólo algunos ejemplos de cosas que puedes hacer con iFrames. Dependiendo de sus necesidades y habilidades, puede haber mucho más que usted puede hacer con ellos.

Cosas que debes saber antes de empezar a usar iFrames

A pesar de la comodidad que ofrecen los iFrames, hay algunas cosas que debes saber antes de empezar.

Lo son:

Problemas de compatibilidad HTTPS/HTTP

Sólo puede incrustar contenidos de sitios o páginas web que utilicen el mismo Protocolo de Transferencia de Hipertexto (HTTP) que el suyo. Esto significa que si su sitio web utiliza HTTPS (Hypertext Transfer Protocol Secure), sólo podrá incrustar contenidos de otros sitios web con HTTPS. Esto también se aplica a HTTP.

Google recomienda HTTPSy la mayoría de los sitios web de renombre lo utilizan. Si el tuyo también lo hace, deberías poder incrustar páginas web de alta calidad con facilidad.

Cuestiones de seguridad

Una preocupación mucho más grave es el potencial vulnerabilidad de seguridad que los iFrames pueden aportar a su sitio web. Como los iFrames son una ventana a otras páginas, lo que ocurra en ellas puede repercutir en la suya.

Los iFrames también pueden utilizarse para inyectar código malicioso en su sitio web. Recuerde que su iFrame simplemente abre una ventana a otro sitio web, y no necesariamente puede evitar que se utilice código malicioso en el sitio web de origen.

Una solución sencilla es utilizar iFrames únicamente para incrustar contenidos de sitios web fiables.

Para saber más configuración de seguridad avanzadautilice el botón atributo sandbox en su iFrame. Hablaremos más de esto cuando hablemos de cómo crear un iFrame.

Google no es muy partidario de los iFrames

Google aconseja evitar el uso de iFrames pero si debe hacerlo, simplemente proporcione un enlace basado en texto al mismo contenido para permitir que los robots de Google rastreen este contenido.

Aunque estas advertencias puedan sonar alarmantes, no hay motivo de preocupación si se siguen las mejores prácticas que compartiremos en esta guía.

No todos los sitios web permiten iFramar sus contenidos

Al escribir este artículo, hemos observado con frecuencia que la mayoría de los grandes sitios web han desactivado la posibilidad de que su contenido se muestre en un iFrame. Si este es el caso de una página web que te gustaría mostrar a través de un iFrame, no habrá mucho que puedas hacer al respecto.

Cómo utilizar iFrames en WordPress (3 métodos)

Ahora que ya sabes qué es un iFrame y cuándo puedes utilizarlo, te mostraremos las diferentes formas de integrar iFrames en WordPress.

Empezaremos mostrando cómo utilizar códigos de incrustación pregenerados, luego veremos cómo crear iFrames manualmente y, por último, cómo utilizar un plugin.

Todas son fáciles de aprender y aplicar.

Método 1: Incrustar iFrame utilizando códigos de incrustación

Este método es posiblemente el más sencillo, pero normalmente sólo se aplica a los sitios web que proporcionan un código de inserción para su contenido.

Si se proporciona un código, normalmente lo encontrará en las opciones disponibles para compartir.

En YouTube, por ejemplo, este código es visible al hacer clic en el icono compartir debajo de un vídeo. Haga clic en el icono incrustar para adquirir el código iFrame.

Sólo tienes que copiar este código y pegarlo en tu página web utilizando un bloque HTML. Los bloques son la nueva forma de creación de sitios web con WordPress utilizando el relativamente nuevo Constructor Gutenberg.

El constructor Gutenberg viene con un conjunto nativo de bloques que incluyen un bloque HTML. También hay un bloque específico de YouTube, pero puedes usar cualquiera de los dos.

Puedes ampliar el alcance de Gutenberg utilizando un plugin complementario como el Últimos complementos para Gutenberg. También puede utilizar bloques HTML en cualquiera de las secciones Los mejores creadores de páginas para WordPress.

En su nuevo bloque HTML, pegue el código de inserción tal como en el ejemplo anterior. Cuando se previsualiza el código del ejemplo, esto es lo que obtenemos:

Para utilizar iFrames sin tener un código de incrustación nativo del sitio web de origen, basta con pegar la siguiente línea de código en un bloque HTML:

<iframe src="example.com"></iframe>

Este es un ejemplo básico del aspecto que puede tener el código iFrame. Habrás notado que el código del ejemplo anterior es mucho más largo. Esto se debe a que contiene atributos. Puedes controlar mucho sobre un iFrame añadiendo atributos al código.

Por ejemplo, puede determinar qué altura y anchura debe tener el iFrame, junto con otros atributos.

Esos atributos son:

• Anchura y Altura - Verá 'width=' y 'height=' donde se indica el tamaño de la ventana - Por ejemplo width="250px" height="300px"
• Frameborder - Puede mostrar o no un borde utilizando '0' o '1' - frameborder="1″.
• Alinear - Establezca la alineación dentro de la página utilizando 'izquierda' 'derecha' 'arriba' 'abajo' dentro del código iFrame - por ejemplo, align="izquierda"
• Desplazamiento - Desactive o active el desplazamiento con scrolling="yes" o scrolling="no".

He aquí otro ejemplo:

Para modificar la altura y la anchura a 800 píxeles y 500 píxeles respectivamente, incluirás atributos de altura y anchura de la siguiente manera:

<iframe src="wpastra.com" height=”800px” width=”500px”></iframe>

Anteriormente, prometimos mostrarle cómo utilizar el atributo sandbox para evitar que la actividad externa maliciosa afecte a sus usuarios.

Basta con incluir el atributo sandbox de la siguiente manera:

<iframe sandbox src="example.com" “height=”800px” width=”500px”></iframe>

Así que el ejemplo que hemos compartido antes debería tener ahora mucho más sentido.

<iframe width="560" height="315" src="https://www.youtube.com/embed/KWFin60lkmw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Método 2: Utilizar el editor de texto

Puedes escribir un poco de código en una página web para crear un iFrame. No te preocupes, este método es sencillo y ni siquiera necesitarás utilizar el editor de WordPress.

Si todavía utiliza el editor clásico de WordPress, puede utilizar este método.

Para empezar, abre la página o la entrada en la que deseas incrustar el iFrame y cambia la vista del editor visual al editor de texto.

Navegue hasta el punto en el que desea mostrar el iFrame y pegue el mismo código que acabamos de mostrarle:

<iframe src="example.com"></iframe>

Sustituye ejemplo.com por la URL de destino. Guarda o actualiza la entrada o la página y listo.

Método 3: Añadir un iFrame mediante un plugin

Los plugins son probablemente la forma más sencilla de insertar un iFrame en WordPress para los usuarios menos experimentados, y existen numerosos plugins a tener en cuenta.

Éstos son los dos más recomendados y cómo utilizarlos:

iFrame de Webvitaly

El plugin iFrame de Webvitaly ofrece la posibilidad de incrustar contenido de casi cualquier sitio web en tus páginas. Descarga y activa el plugin para empezar.

Una vez hecho esto, crear un iFrame es bastante fácil ya que todo lo que tienes que hacer es pegar el shortcode en tu contenido en el lugar correspondiente.

El plugin es gratuito y funciona bien, sin embargo, actualmente no está siendo mantenido por sus desarrolladores.

La alternativa más popular sería un plugin iFrame de pago como Advanced iFrame Pro de Michael Dempfle.

iFrame Pro avanzado por Michael Dempfle

Como se ha mencionado, Advanced iFrame Pro proporciona algunas opciones adicionales de seguridad y personalización en comparación con el Plugin de marcos.

Una vez que el plugin está instalado y activado, todo lo que necesitas hacer es utilizar el shortcode para insertar iFrames en los lugares pertinentes.

Para empezar, descargar, instale y activar el plugin desde el repositorio de WordPress.

Abra la página o entrada de WordPress en la que desea utilizarlo y busque el bloque iFrame avanzado.

Insértalo en el contenido y haz clic en los tres puntos para ver más opciones.

Haga clic en Mostrar más ajustes. Esto le permitirá establecer la URL del iFrame, así como sus atributos.

Ajústalos a los valores adecuados y guarda o actualiza la página o la entrada. Ya está.

Este plugin cuesta $21 pero también hay una versión gratuita que puedes probar.

¡Estás listo para empezar a usar iFrames en WordPress!

El uso de iFrames en WordPress puede ayudarte a conseguir muchos objetivos diferentes. Desde compartir de forma segura y adecuada contenidos protegidos por derechos de autor hasta mostrar vídeos pesados, los iFrames son una buena solución para compartir contenidos.

Utilizar iFrames es una táctica para ayudar a optimice la velocidad de su sitio web. También debe acordarse de utilizar un tema de WordPress adaptable.

Como hemos visto, el uso de iFrames plantea algunos problemas, pero si sigues los pasos que hemos descrito aquí, no tendrás ningún problema.

¿Has utilizado iFrames alguna vez? Nos encantaría conocer tu experiencia. Además, ¡no olvides compartir si conoces otras formas de utilizar iFrames en WordPress!