Cómo incrustar fácilmente código iFrame en WordPress (3 métodos)

Al crear sitios web, a menudo nos encontramos con la necesidad de mostrar contenido de fuentes externas sin alojarlo nosotros mismos. Aquí es donde los iFrames brillan.

Ya sea que esté incrustando un video, un mapa o una aplicación de terceros, los iFrames brindan una forma sencilla de integrar contenido externo en su sitio de WordPress.

En este artículo, lo guiaremos a través de tres métodos sencillos para agregar código iFrame en publicaciones o páginas de WordPress. Desde el uso de códigos de inserción prefabricados hasta la creación manual de sus propios iFrames, lo tenemos cubierto. 

¿Qué es un iFrame?

Un iFrame (abreviatura de inline frame) le permite incrustar videos u otro contenido en su sitio sin tener que alojar ese video. Esto puede ahorrarle ancho de banda y espacio de almacenamiento, que es por qué nunca debes subir un video directamente a WordPress.

Además de mejorar la velocidad y el rendimiento de su WordPress, el iFrame se actualizará automáticamente si el contenido original cambia. Esto significa que los visitantes siempre verán la última versión del contenido.

Incrustar contenido con derechos de autor a través de un iFrame tampoco viola los derechos de autor, por lo que puede ayudar a protegerlo contra demandas.

Dicho esto, veamos cómo puede incrustar fácilmente código iFrame en WordPress. Simplemente use los enlaces rápidos para saltar directamente al método que desea usar:

Método 1: Incrustar un iFrame de WordPress usando el código de la fuente (rápido y fácil)

Muchos sitios de alojamiento de video grandes tienen una opción de 'Incrustar' que te da acceso al código iFrame que necesitas para agregar a tu sitio.

Si el sitio web tiene alguna configuración de 'Compartir' o 'Incrustar', esta suele ser la forma más rápida y sencilla de incrustar contenido.

Los pasos exactos variarán según la plataforma, pero veamos YouTube como ejemplo. Para incrustar videos de YouTube en WordPress, simplemente haz clic en el botón 'Compartir' debajo del video que deseas usar.

Después de eso, verás una ventana emergente con diferentes opciones para compartir.

Simplemente haz clic en el botón 'Incrustar'.

YouTube ahora te mostrará el código iFrame.

Por defecto, YouTube marcará la casilla 'Mostrar controles del reproductor', pero también recomendamos habilitar el modo de privacidad mejorada. Este modo permite a los visitantes ver el contenido incrustado en tu sitio web de WordPress sin que influya en su experiencia de navegación en YouTube.

Después de eso, haz clic en el botón 'Copiar'.

Ahora, puedes pegar ese código en cualquier publicación o página de tu sitio. En esta guía, lo agregaremos a una nueva página en el editor de bloques de WordPress.

Simplemente abre la página y luego haz clic en el botón ‘+’. En la ventana emergente que aparece, empieza a escribir ‘HTML’ para encontrar el bloque HTML personalizado.

Cuando aparezca el bloque correcto, haz clic para agregarlo a tu página.

Luego, simplemente pega el código iFrame de YouTube en el bloque.

Ahora puedes publicar tu página para ver el video de YouTube en vivo en tu blog de WordPress.

Método 2: Incrustar con un plugin de iFrame para WordPress (Funciona con todos los sitios web)

No todos los sitios web de terceros proporcionan un código de incrustación listo para usar. Si no puedes encontrar ninguna configuración de ‘Compartir’ o ‘Incrustar’, entonces puedes crear fácilmente tu propio código iFrame usando el plugin iFrame.

Primero, necesitas instalar y activar el plugin iFrame. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, el plugin comenzará a funcionar de inmediato sin necesidad de configuración. Simplemente ve a la página o publicación donde deseas incrustar contenido y agrega un bloque de Shortcode.

Después de eso, agrega el siguiente shortcode:

[iframe src="URL goes here"]

Simplemente reemplaza 'URL va aquí' con la URL del contenido que deseas incrustar en tu sitio.

Como ejemplo, vamos a agregar un Mapa de Google en WordPress, ya que es una forma fácil para que tiendas, restaurantes y otros lugares agreguen direcciones en su formulario de contacto.

Después de eso, simplemente previsualiza o publica la entrada.

Ahora deberías ver el contenido incrustado en tu sitio web.

Para ver todos los parámetros disponibles, puedes echar un vistazo a la página del plugin iFrame.

Método 3: Incrustar iFrames en WordPress manualmente (No se requiere plugin)

Si no quieres usar un plugin de WordPress especial, entonces puedes crear el código iFrame manualmente. Para hacer esto, necesitas abrir la página o publicación y luego agregar un bloque HTML en el editor de contenido de WordPress.

Primero, pega el siguiente código en tu bloque HTML:

<iframe src="URL goes here"></iframe>

Simplemente reemplaza 'URL goes here' con la URL directa del contenido que deseas incrustar.

Aquí, estamos incrustando un Mapa de Google:

Puedes agregar parámetros adicionales para cambiar cómo se ve el contenido en tu sitio web. Por ejemplo, estamos estableciendo el ancho a 600 píxeles y la altura a 200 píxeles:

<iframe src="URL goes here" width="600" height="300"></iframe>

Esto es útil si necesitas mostrar el contenido incrustado en un espacio más pequeño. Por ejemplo, es posible que desees redimensionar el contenido después de probar la versión móvil de tu sitio web de WordPress.

¿Cuáles son algunas alternativas a iFrame?

Hay algunas desventajas al incrustar iFrames.

No todos los sitios web te permiten poner su contenido en un iFrame, y es posible que necesites ajustar manualmente el contenido para que se vea bien en el espacio disponible.

Otro problema es que los sitios HTTPS solo pueden usar iFrames para contenido de otros sitios HTTPS. De manera similar, los sitios HTTP solo pueden usar iFrames para contenido de otros sitios HTTP.

Es por eso que muchas plataformas como WordPress prefieren oEmbed.

A menudo, puedes usar oEmbed para incrustar videos y otro contenido simplemente pegando una URL en la publicación de WordPress. WordPress redimensionará automáticamente el oEmbed para que quepa en el espacio disponible, por lo que siempre se verá perfecto en computadoras de escritorio, teléfonos inteligentes y tabletas.

Si deseas mostrar fuentes sociales en tu sitio web, te recomendamos usar un plugin de redes sociales en lugar de iFrames.

Por ejemplo, Smash Balloon facilita la incrustación de contenido de Facebook, Instagram, Twitter y YouTube.

Aquí tienes algunos tutoriales sobre cómo agregar feeds de redes sociales con Smash Balloon:

• Cómo incrustar tuits reales en las publicaciones de blog de WordPress
• Cómo incrustar videos de TikTok en WordPress
• Cómo incrustar una lista de reproducción de YouTube en WordPress (El mejor método)

Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente iFrames en WordPress. También puedes consultar nuestras guías sobre cómo incrustar SoundCloud en WordPress y cómo deshabilitar incrustaciones en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.