Compartir contenido es una práctica bastante común. Sin embargo, presentar el contenido de otro creador en su sitio tiene ramificaciones legales potenciales, mientras que el alojamiento de grandes archivos como los vídeos pueden dañar el rendimiento de su sitio. Afortunadamente, los iFrames ofrecen una solución sencilla a estos problemas.
En este post, explicaremos qué son los iFrames y cómo usarlos con su sitio de WordPress.
¿Listo para sumergirte? ¡Vamos a ponernos manos a la obra!
¿Qué son los iFrames (y por qué son útiles)?
Un iFrame es una forma de incrustar una página web en el contenido de otra página. Esto se hace utilizando etiquetas HTML, la URL de la página externa y especificaciones sobre cómo debe aparecer la ventana en su sitio.
Hay dos situaciones en las que los iFrames son generalmente útiles.
La primera es cuando desea compartir contenido que no le pertenece. En la mayoría de los casos, la incrustación de contenido a través de un iFrame es no se considera una infracción de los derechos de autor (véase también el reglamento de la UE). Por lo tanto, generalmente es un método legal y más ético de compartir que la mayoría de las otras opciones. Además, no se puede acceder directamente al código dentro de un iFrame. Esto significa que un visitante de su sitio no puede copiar el contenido incrustado y compartirlo en otro lugar.
La segunda razón por la que puede incorporar iFrames es para compartir archivos de gran tamaño, como vídeo, audio o incluso imágenes. YouTube es el ejemplo perfecto aquí.
Con un iFrame, puede mostrar el contenido de un archivo en su sitio web sin tener que alojarlo en el servidor. Biblioteca de medios de WordPress. Esto es importante porque estos tipos de archivos multimedia a menudo ocupan una cantidad significativa de espacio de almacenamiento, e incluso podrían ralentizar su sitio.
Por alojar sus vídeos en una plataforma como YouTube y luego incrustarlos en su sitio WordPress con iFrames, puede evitar los inconvenientes de subirlos directamente a su sitio. Esta técnica le ayudará a convertirse en un miembro más ético de la comunidad en línea mantenga su sitio rápido y fácil de usar.
¿Cómo usar iFrames con WordPress? (3 métodos)
Del mismo modo que existen varios escenarios en los que podría querer utilizar un iFrame, existen múltiples métodos para implementar uno. A continuación, exploraremos tres de las formas más comunes de añadir iFrames a su sitio de WordPress.
1. Añadir iFrames en WordPress manualmente
El código básico para añadir un iFrame a una página es bastante simple. Todo lo que necesita son las etiquetas HTML de apertura y cierre, y la URL de la página web que desea incrustar:
<iframe src="example.com"></iframe>Hay un par de limitaciones a tener en cuenta con respecto a la URL de origen. En primer lugar, los iFrames sólo pueden mostrar contenido de sitios que utilizan el mismo protocolo de transferencia de hipertexto que el suyo. En otras palabras, si su sitio utiliza HTTPS, sólo puede incrustar contenido de otros sitios HTTPS. Del mismo modo, si utiliza HTTP, sólo puede incrustar URLs que también utilicen HTTP.
Además, algunos sitios web populares – tales como Facebook y YouTube: desactiva la incrustación manual de iFrame. Si intenta mostrar una página de un sitio que no permite incrustar iFrame, aparecerá un error en su ventana:
Si puede utilizar este método, es importante que sepa que también puede personalizar sus iFrames para satisfacer las necesidades de su sitio. Ahí es donde entran en juego los parámetros de iFrame. Algunos de los más comunes incluyen:
- Width: Este parámetro le permite establecer un ancho específico para el iFrame en píxeles.
- Altura: Al igual que el parámetro width, la altura determina el tamaño de la ventana iFrame de su página web en píxeles.
- Permitir: Con este parámetro, puede establecer ciertos comportamientos o funciones predeterminados para su iFrame, como la visualización a pantalla completa o el procesamiento de pagos.
- Importancia: Puede utilizar este parámetro para especificar cuándo debe cargarse un iFrame.
Por ejemplo, así es como se vería el código para un iFrame con un tamaño de ventana de 900 píxeles por 700 píxeles, con la visualización a pantalla completa habilitada, que está configurado para descargarse después del resto de la página web:
<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>En la interfaz, esto es lo que el iFrame podría parecer:
Hay otros parámetros que puede considerar utilizar también. Sin embargo, los que se enumeran arriba deberían permitirle crear iFrames básicos para compartir vídeos de YouTube u otros contenidos en su sitio.
2. Utilizar códigos de incrustación para crear iFrames
Algunos sitios tienen restricciones sobre si puede incrustar manualmente su contenido en iFrames. Esto puede dificultar la presentación de ciertos tipos de contenido, como las publicaciones de Facebook o de Vídeos de YouTube. Sin embargo, eso no significa que no pueda mostrar contenido de estas fuentes en iFrames.
En lugar de ello, sólo tiene que acceder a los códigos de incrustación necesarios para hacerlo. Veamos cómo funciona esto en YouTube como ejemplo. Diríjase al vídeo que desea incrustar, ya sea suyo o de otro creador. Debajo del reproductor de vídeo, debería ver un botón Compartir:
Haga clic en este botón y se abrirá una ventana que mostrará las distintas opciones de uso compartido disponibles. Uno de ellos es Embedded:
Al seleccionar la opción Incrustar, YouTube mostrará un fragmento HTML que puede utilizar para añadir el vídeo a un iFrame. Incluye ciertos parámetros de iFrame, que puede copiar y utilizar si lo desea. De lo contrario, también puede optar por copiar simplemente la URL de origen:
Cuando utilice el código de incrustación, el vídeo se mostrará en su iFrame en lugar del error que vería si intentara utilizar la URL estándar.
Para añadirlo a una página o mensaje en el Editor de bloques, puede utilizar un bloque HTML personalizado:
En el Editor Clásico, tendrá que cambiar al editor de texto y añadir su código en el punto relevante:
El resultado debería ser un iFrame que funcione:
Puede seguir un proceso similar para insertar una entrada de Facebook en su sitio. Navegue hasta el mensaje que desea compartir y haga clic en el icono de tres puntos en la esquina superior derecha del mensaje:
A continuación, seleccione la opción Insertar:
Esto mostrará un fragmento de HTML muy parecido al del vídeo de YouTube que vimos anteriormente. Una vez más, la URL de origen es la parte más importante de este código, aunque también se pueden utilizar los parámetros predeterminados:
Añada este código a su página web y el mensaje se mostrará sin problemas:
Muchos sitios populares de medios sociales, incluyendo LinkedIn, Instagram y Twitter, también ofrecen códigos para insertar sus mensajes. Normalmente encontrará esta opción en la configuración de cada entrada individual.
3. Añadir iFrames a WordPress usando un plugin
Por supuesto, los desarrolladores de WordPress siempre están trabajando para simplificar tareas como la integración de iFrames mediante el uso de plugins. Hay dos opciones que puede considerar si la inclusión de contenido externo en su sitio es algo que planea hacer con frecuencia. La solución más popular es el plugin iFrame:
Este plugin le permite agregar iFrames a su sitio de WordPress usando atajos. Puede especificar los mismos parámetros que cuando se agrega manualmente un iFrame a través de HTML. Sin embargo, usted no tiene que preocuparse de manejar el código de sus páginas directamente.
Alternativamente, también puede probar la opción Plugin avanzado de iFrame:
Una vez más, este plugin le permite añadir iFrames a su sitio usando atajos. Sin embargo, también incluye varias características adicionales, como códigos de seguridad para evitar que otros usuarios incrusten iFrames sin su permiso, opciones de estilo personalizadas y mucho más.
Por $20, usted puede actualizar a una Licencia avanzada de iFrame Pro de seis meses. Esta versión produce iFrames sensibles, y permite características como la funcionalidad de zoom y lazy loading. Dependiendo de la frecuencia con la que planee utilizar iFrames en su sitio, estas opciones podrían valer la pena.
Resumen
Mantener el buen funcionamiento de su sitio web y el cumplimiento de la ley es vital. Los iFrames no sólo le ayudarán a compartir el contenido de los demás de una manera ética, sino que también le permitirán mostrar archivos de vídeo y audio sin tener que alojarlos en su sitio web. En este artículo, hemos analizado tres métodos para usar iFrames con WordPress:
- Incorpore sitios de WordPress e iFrames manualmente.
- Utilice códigos de incrustación para crear iFrames.
- Agregue iFrames usando un plugin de WordPress, como iFrame o iFrame avanzado.
¿Tiene alguna pregunta sobre los iFrames o cómo utilizarlos en su sitio de WordPress? Háganoslo saber en la sección de comentarios a continuación!
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta