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

¿Quiere 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 sin descargarlos. Muchas plataformas de terceros como YouTube permiten a los usuarios utilizar iframe para incrustar contenido en 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 siempre 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 suena lo suficientemente técnico. Le mostraremos la forma más sencilla de insertar un iFrame en su blog de WordPress.

¿Por qué utilizar iFrames?

Una de las principales razones para usar iFrames es evitar tener que alojar videos u otros recursos en su sitio, lo que agotará su ancho de banda y espacio de almacenamiento. Además, los iFrames le permiten evitar infringir el contenido con derechos de autor de otros. En lugar de cargar 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.

También existen algunas desventajas al usar iFrames. No todos los sitios web le permiten poner su contenido en un iFrame. Además, el iFrame puede volverse 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. Asimismo, 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 una URL en su publicación de WordPress. El contenido se redimensionará automáticamente para adaptarse 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, consulte nuestra guía completa sobre el problema oEmbed de Facebook / Instagram y cómo solucionarlo. Otra gran alternativa a los iFrames es utilizar un complemento de alimentación social. Le recomendamos que utilice los complementos de Smash Balloon. Estos le permiten ver contenido de Facebook, Instagram, Twitter y YouTube. Dicho esto, echemos un vistazo a tres formas diferentes de agregar iFrames a su sitio.

1. Use el código fuente para insertar para agregar iFrame en WordPress

Muchos sitios grandes tienen una opción de integración 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 y luego haciendo clic en el botón Compartir a continuación.

Luego verá una ventana emergente con varias opciones para compartir. Simplemente haga clic en el botón Integrar.

Ahora YouTube te mostrará el código iFrame. De forma predeterminada, YouTube incluirá controles de reproductor. También le recomendamos que habilite el modo de privacidad mejorado. 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. 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.

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.

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

Cambiar entre visualización 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 integrar un iFrame

Este método es útil porque le permite crear un iframe para incrustar contenido de cualquier fuente, incluso si esa fuente no proporciona código para incrustar. En primer lugar, debe instalar y activar el complemento iFrame. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Tras la activación, el complemento comenzará a funcionar inmediatamente 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.

Después de eso, puede usar este código corto para ingresar su código iFrame.
[iframe src="URL goes here"] Simplemente reemplace la URL con la URL del contenido que desea incrustar en su sitio. Integramos un mapa de Google.
Consejo: Es posible que deba utilizar la opción Insertar para obtener la URL directa del contenido. Solo debe usar la URL, no el resto del código de inserción.

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

Opcionalmente, puede agregar parámetros al código corto de iFrame para modificar la visualización del 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 la página del complemento iFrame.
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.

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

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

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

Simplemente reemplace "URL va aquí" con la URL directa del contenido que desea insertar. Solo necesita la URL en sí. Aquí integramos un 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 código siguiente significa que su contenido incrustado mostrará 600 píxeles de ancho y 300 píxeles de alto.

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

Esperamos que este artículo le haya ayudado a aprender cómo integrar fácilmente el 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 para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.