Cómo incrustar código iFrame fácilmente en WordPress (3 formas)

¿Quieres incrustar código iFrame en una publicación o página de WordPress?

Los IFrames brindan una manera fácil de incrustar videos u otro contenido en su sitio web sin cargarlos. Muchas plataformas de terceros, como YouTube, permiten a los usuarios insertar contenido en su sitio web mediante iframes.

En este artículo, le mostraremos cómo incrustar fácilmente código iFrame en WordPress usando varios métodos.

¿Qué es iFrame?

Los iFrames le permiten incrustar videos u otro contenido en su sitio web. Esto significa que puede mostrar un video en su sitio web sin alojar el video.

Un iframe es como abrir una ventana en su sitio web para mostrar contenido externo. El contenido real aún se carga desde la fuente que incrustaste.

Para agregar un iframe, debe agregar un código HTML especial. Si esto suena técnico, no se preocupe.

Le mostraremos la forma más fácil de incrustar iFrames en su blog de WordPress.

¿Por qué usar iFrames?

Una razón clave para usar iFrames es evitar alojar videos u otros recursos en su sitio web, lo que puede ocupar su ancho de banda y espacio de almacenamiento.

Además, los iFrames le permiten evitar infringir el contenido protegido por derechos de autor de otras personas. En lugar de descargar su video u otro contenido y subirlo a su sitio web, simplemente puede agregarlo a su página usando un iFrame.

Otro beneficio es que si el contenido original cambia, también se actualizará automáticamente en el iFrame.

También hay algunas desventajas en el uso de iFrames. No todos los sitios web le permiten colocar su contenido en iFrames. Además, el iFrame puede terminar siendo demasiado grande o demasiado pequeño para su página y deberá ajustarlo manualmente.

Otro problema es que los sitios HTTPS solo pueden usar iFrames para contenido de otros sitios HTTPS. Del mismo modo, los sitios HTTP solo pueden usar iFrames para contenido de otros sitios HTTP.

Es por eso que muchas plataformas como WordPress prefieren oEmbed. Puede usar oEmbed para incrustar videos y otros tipos de contenido simplemente pegando la URL en su publicación de WordPress. El contenido cambiará automáticamente de tamaño para ajustarse y tendrá el tamaño correcto incluso en dispositivos móviles.

importante: WordPress no admite oEmbed para publicaciones de Facebook e Instagram. Para obtener más información sobre esto, consulte nuestra guía completa sobre problemas de Facebook/Instagram oEmbed y cómo solucionarlo.

Otra gran alternativa a los iFrames es usar un complemento de alimentación social. Recomendamos usar el complemento para Smash Balloon. Estos le permiten mostrar contenido de Facebook, Instagram, Twitter y YouTube.

Dicho esto, echemos un vistazo a tres formas diferentes de agregar iFrames a su sitio.

1. Agregue un iFrame en WordPress usando el código de inserción del código fuente

Muchos sitios web grandes tienen opciones de contenido incrustado. Esto le da el código iFrame especial que necesita agregar a su sitio.

En YouTube, puede obtener este código yendo al video en YouTube y haciendo clic en el botón Compartir debajo de él.

A continuación, verá una ventana emergente con varias opciones para compartir. Simplemente haga clic en el botón “Incrustar”.

Ahora YouTube te mostrará el código iFrame. De forma predeterminada, YouTube incluirá controles de reproducción. También le recomendamos que habilite el modo de privacidad mejorada.

Después de eso, continúe y haga clic en el botón “Copiar” para copiar el código.

Ahora puede pegar este código en cualquier publicación o página de su sitio web. Lo agregaremos a una nueva página en el editor de bloques.

Para crear una nueva página, vaya a página » agregar nuevo en tu panel de WordPress.

Luego, agregue el bloque HTML a su página.

Ahora debe pegar el código iFrame de YouTube en este bloque.

Luego puede obtener una vista previa o publicar su página para ver el video de YouTube incrustado en ella.

propina: Si está utilizando el antiguo editor clásico, aún puede agregar código iFrame. Tienes que hacer esto en la vista de texto.

Cambiar entre vistas visuales y de texto en el editor clásico puede causar problemas con el código iFrame.

2. Incruste iFrames con el complemento iFrame WordPress

Este método es útil porque le permite crear un iframe para insertar contenido de cualquier fuente, incluso si la fuente no proporciona un código de inserción.

Primero, debe instalar y activar el complemento iFrame. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Una vez activado, el complemento comenzará a funcionar de inmediato, no se requiere configuración. Continúe editando o creando una publicación o página. Luego, agregue un bloque de shortcode.

Después de eso, puede usar este código abreviado para ingresar su código iFrame.

[iframe src="URL goes here"]

Simplemente reemplace la URL aquí con la URL del contenido que desea incrustar en su sitio web. Estamos incorporando Google Maps.

propina: Es posible que deba usar la opción de inserción para obtener la URL directa del contenido. Solo necesita usar la URL, no el resto del código de inserción.

A continuación, obtenga una vista previa o publique su publicación. Debería ver un mapa de Google incrustado en su sitio web.

Opcionalmente, puede agregar parámetros al código abreviado de iFrame para cambiar la forma en que se muestra el contenido incrustado. Por ejemplo, puede establecer el ancho y el alto, y agregar o quitar barras de desplazamiento o bordes. Puede encontrar detalles en la página del complemento iFrame.

propina: Si está utilizando el editor clásico, simplemente puede pegar el código abreviado en su publicación o página. No es necesario cambiar a la vista de texto.

3. Cree manualmente el código iFrame e insértelo en WordPress

Si no desea utilizar el complemento iFrame, puede crear manualmente el código iFrame. Para hacer esto, debe agregar un bloque HTML al editor de contenido de WordPress.

Primero, debe pegar este código en su bloque HTML.

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

Simplemente reemplace “URL va aquí” con la URL directa del contenido que desea incrustar. Solo necesita la URL en sí.

Aquí, incrustamos un mapa de Google.

Puede agregar parámetros adicionales a las etiquetas HTML. Por ejemplo, puede establecer el ancho y el alto de un iFrame. El siguiente código significa que su inserción aparecerá con 600 píxeles de ancho y 300 píxeles de alto.

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

Esto es útil si necesita limitar el contenido incrustado a un espacio pequeño.

Esperamos que este artículo le haya ayudado a aprender a incrustar fácilmente código iFrame en WordPress. También puede consultar nuestra guía definitiva sobre cómo acelerar su sitio de WordPress, así como nuestra comparación de las mejores herramientas de investigación de palabras clave para mejorar su clasificación SEO.

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

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.