¿Quieres incrustar un 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 sin tener que cargarlos. Muchas plataformas de terceros como YouTube permiten a los usuarios utilizar iframe para incrustar contenido de su sitio web.

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

¿Qué es iFrame?

Un iFrame le permite incrustar videos u otro contenido en su sitio. Esto significa que puede mostrar un video en su sitio sin tener que alojar ese video.

El iframe es como abrir una ventana en su sitio para mostrar contenido externo. El contenido real todavía se carga desde la fuente desde la que está incrustando.

Para agregar un iframe, debe agregar un código HTML especial. No se preocupe si eso suena bastante técnico.

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

¿Por qué utilizar iFrames?

Una razón clave para usar iFrames es evitar tener que alojar videos u otros recursos en su sitio, que consumirán 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 luego subirlo a su sitio, simplemente agréguelo a su página usando un iFrame.

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

Una imagen de dibujos animados de personas que agregan contenido a un sitio web.

También existen algunos inconvenientes al usar iFrames. No todos los sitios web le permiten poner su contenido en un iFrame. Además, el iFrame puede terminar siendo demasiado grande o 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. 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. Puede usar oEmbed para incrustar videos, así como otros tipos de contenido, simplemente pegando una URL en su publicación de WordPress. El contenido cambiará automáticamente de tamaño para adaptarse, y tendrá el tamaño correcto incluso en dispositivos móviles.

Importante: WordPress no es compatible con oEmbed para publicaciones de Facebook e Instagram. Para obtener más información sobre esto, consulte nuestra guía completa sobre el problema oEmbed de Facebook / Instagram y cómo solucionarlo.

Otra gran alternativa a los iFrames es utilizar feeds sociales plugin. Recomendamos usar Romper Globo‘s plugins. Estos le permiten mostrar contenido de Facebook, Instagram, Twitter y YouTube.

Habiendo dicho eso, echemos un vistazo a tres formas diferentes de agregar iFrames a su sitio.

1. Utilice el código de incrustación de la fuente para agregar iFrame en WordPress

Muchos sitios grandes tienen una opción de Insertar para su contenido. Esto le brinda el código iFrame especial que necesita agregar a su sitio.

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

Hacer clic en el botón Compartir para el video de YouTube elegido

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

Al hacer clic en el botón Insertar para obtener el código de inserción de YouTube

Ahora, YouTube le mostrará el código iFrame. De forma predeterminada, YouTube incluirá los controles del reproductor. 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.

Copiando el código de inserción para el video de YouTube

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

Para crear una nueva página, vaya a Páginas »Agregar nuevo en su panel de WordPress.

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

Agregar un bloque HTML personalizado a WordPress

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

Pegar el código HTML de YouTube en el bloque iFrame

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

Ver el video incrustado en vivo en su sitio web

Consejo: Si está utilizando el antiguo editor clásico, aún puede agregar código iFrame. Debe hacerlo en la vista Texto.

Agregar el código iFrame de YouTube en el editor clásico

Cambiar entre la vista visual y de texto en el Editor clásico puede causar problemas con el código iFrame.

2. Uso del complemento iFrame de WordPress para incrustar un iFrame

Este método es útil ya que le permite crear un iframe para incrustar contenido de cualquier fuente, incluso si esa fuente no proporciona un código de incrustación.

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

Tras la activación, el plugin comenzará a funcionar de inmediato sin necesidad de configuración. Continúe y edite o cree una publicación o una página. Luego, agregue un bloque de código corto.

Agregar un bloque de código corto en el editor de bloques

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

[iframe src="URL goes here"]

Simplemente reemplace URL va aquí con la URL del contenido que desea insertar en su sitio. Estamos incorporando un mapa de Google.

Consejo: Es posible que deba utilizar la opción Insertar para obtener la URL directa del contenido. Debe usar solo la URL, no el resto del código de inserción.

El shortcode para incrustar un mapa de Google

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

El mapa de Google incrustado en el sitio web

Opcionalmente, puede agregar parámetros al código abreviado de iFrame para cambiar cómo se muestra el contenido incrustado. Por ejemplo, puede establecer el ancho y el alto, y agregar o eliminar una barra de desplazamiento o un borde. Puede encontrar detalles en el iFrame pluginpágina de.

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

Agregar el código corto en el editor clásico

3. Creación manual del código iFrame e incrustación en WordPress

Si prefiere no utilizar un iFrame plugin, luego puede crear el código iFrame manualmente. Para hacer esto, necesita agregar un bloque HTML en el editor de contenido de WordPress.

Agregar un bloque HTML personalizado

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í, estamos incrustando un mapa de Google.

Ingresando el código iFrame para el mapa de Google

Puede agregar parámetros adicionales a la etiqueta HTML. Por ejemplo, puede establecer el ancho y el alto de su iFrame. El siguiente código significa que su contenido incrustado mostrará 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 restringir el contenido incrustado a un espacio más pequeño.

El mapa de Google en el sitio con una altura y un ancho establecidos

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

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

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

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *