Como casi la mayoría de las personas que conocemos de internet sabemos, compartir contenido es algo común hoy en día. A pesar de ello, compartir en contenido creado por otra persona en nuestro sitio web tiene sus consecuencias legales potenciales, mientras que la exposición de archivos de gran peso como los videos puede afectar el rendimiento de nuestro sitio. Por suerte, existen soluciones sencillas para estos problemas, y eso por eso que hoy les mostraremos cómo insertar el iframe en wordpress.
Indice De Contenidos
¿Para qué sirve insertar el inframe en wordpress y sitios web en general?
El inframe es una manera de incrustar una página web al contenido de cualquier otra página. Para hacer esto, se utilizan etiquetas HTML, la URL de la página externa y las especificaciones para cómo se debe mostrar la ventana en nuestro sitio web.
Principalmente existen dos situaciones en las que es muy útil insertar el iframe en wordpress, veamos cuáles son:
En primero lugar, no encontramos con el caso cuando se desea compartir contenido que no nos pertenece en lo absoluto. La gran cantidad de veces, la incrustación de contenido por medio de un iframe no es considerada como una infracción de los derechos de autor. Esto entonces, generalmente se considera un método totalmente legal y mucho más ético de compartir que la mayoría de demás opciones.
Además, no es posible ingresar directamente al código dentro de un iframe. Lo que significa que un visitante de nuestro sitio no podrá copiar el contenido incrustándolo para ir a compartirlo en otro lugar.
En segundo lugar, tenemos la otra razón por la cual es necesario que sepamos cómo usar un inframe, y es para poder compartir archivos pesados o de gran tamaño, como pueden ser videos, audios o hasta imágenes de muy alta calidad. Y para eso tenemos un ejemplo perfecto aquí.
Con un iframe, es posible que mostremos el contenido de un archivo en nuestro sitio web sin necesidad de tener que alojarlo en el servidor, como en la biblioteca de medios de wordpress. Esto tiene mucha importancia, ya que este tipo de archivos multimedia por lo general suelen ocupar una cantidad notable de espacio en el almacenamiento, hasta incluso llegar a ralentizar nuestro sitio web.
Para poder alojar los videos en una plataforma como por ejemplo YouTube y posteriormente incrustarlos en nuestro sitio de wordpress en iframes, podemos evitarnos los inconvenientes de subirlos directamente a nuestro sitio web. Este es un método que nos va a ayudar a convertirnos en un miembro mucho más ético de la comunidad en línea, manteniendo nuestro sitio rápido y fácil de usar.
¿Cómo utilizar iframes con wordpress?
Así como ya explicamos que existen diversos escenarios en los que podemos usar un iframe si así lo deseamos, también existen diversos métodos para implementar uno. Es por eso que, a continuación expondremos tres de las formas más usadas de insertar un inframe en wordpress.
¿Cómo insertar un iframe en wordpress?
Generalmente, el código básico para insertar un iframe a una página es muy simple. Todo lo que necesitamos son las etiquetas HTML de apertura y de cierre, y por su puesto la URL de la página web que deseas incrustar:
Existen un par de limitaciones que debemos tener en cuenta con respecto a la URL de origen. Primero que nada, tengamos en cuenta que los iframes solamente pueden mostrar contenido de aquellos sitios que usan el mismo protocolo de transferencia de hipertexto que el suyo. Lo que quiere decir, es que si nuestro sitio web usa HTTPS, solamente podremos incrustar contenido de otros sitios HTTPS. De la misma forma, si este usa HTTP, solamente podremos incrustar URLS que también usen HTTP.
Además, hay unos cuantos sitios web famosos, como por ejemplo Facebook y YouTube que desactivan la incrustación de iframe manualmente. Por eso, si intentamos mostrar una página de un sitio que no permita incrustar iframe, lo que aparecerá en ese caso será un error en su ventana.
Pero, si logramos usar este método, es importante que sepamos que además podemos personalizar nuestras iframe para lograr satisfacer las necesidades de nuestro sitio. Allí en donde entrarán en juego los parámetros de iframe. A continuación veremos algunos de los más comunes y lo que estos incluyen:
Altura: el parámetro de altura, es el que determina el tamaño de la ventana iframe de la página web en píxeles.
Width: Al igual que el parámetro Altura, este nos permite establecer correctamente un ancho específico para el iframe en píxeles.
Permitir: Con este parámetro, vamos a poder establecer ciertos comportamientos o ciertas funciones predeterminadas para nuestro iframe, como por ejemplo cómo será la visualización a pantalla completa o el procesamiento de pagos.
Importancia: Este parámetro nos va a permitir especificar exactamente cuándo se deberá cargar un iframe.
Entonces, así es como se va vería el código para un iframe que tenga un tamaño de ventana de 900 píxeles por 700 píxeles, teniendo habilitada la visualización a pantalla completa, que está configurada para que se descargue luego del resto de la página web:
Mientras que en la interfaz, es seria lo que el iframe podría mostrar:
Existen otros parámetros que podemos tomar en cuenta para usarlos también, si es que lo deseamos. No obstante los que explicamos previamente deberían permitirnos crear iframes básicos para compartir videos de YouTube o cualquier otro tipo de contenidos en nuestro sitio.
¿Cómo usar códigos de incrustación para crear iframes?
Existen sitios que tienen ciertas restricciones sobre si se puede incrustar de manera manual nuestro contenido en iframes. Esto es algo que puede dificultar la presentación de algunos tipos de contenido, como por ejemplo las publicaciones de Facebook o los videos de YouTube. No obstante, eso no quiere decir que no se pueda mostrar contenido de estas fuentes en iframes.
En vez de eso, solamente tenemos que acceder a los códigos de incrustación requeridos para hacerlo. Pongamos un ejemplo, y veamos la manera en que esto funciona en YouTube:
Primero que nada debemos ubicarnos video que deseamos incrustar, bien sea, un video propio o de otro creador. Debajo de la barra de reproducción, nos aparecerá el botón que tiene la opción de “Compartir”.
Pues deberemos dar clic sobre ese botón para que se muestre una venta que nos mostrará las diferentes opciones de uso compartido disponible. Uno de estos es Embedded:
Una vez hayamos seleccionado la opción de “Incrustar”, YouTube nos va a mostrar un fragmento HTML que podemos usar para añadir el video de un iframe. Además, podemos incluir algunos parámetros de iframe, que podemos copiar y utilizar si así lo deseamos. Por el contrario, también podemos optar por copiar sencillamente la URL de origen.
Cuando usemos el código de incrustación, el video se va a mostrar en nuestro iframe en vez del error que aparecería si intentamos usar la URL estándar.
Para añadirlo a una página o mensaje en el Editor de bloques, podemos usar un bloque HTML personalizado:
En el Editor Clásico, tendremos que cambiar al editor de texto para añadir nuestro código en el punto con más relevancia:
Lo que dará como resultado, será un iframe que funcione de manera correcta:
También podemos seguir un procedimiento un poco similar para insertar una entrada de Facebook en nuestro sitio web. Debemos dirigirnos hacia el mensaje que queremos compartir y posteriormente hacer clic en el icono que tiene tres puntos y aparece en la esquina superior derecha del mensaje.
Y a continuación, procederemos a seleccionar la opción de “insertar”:
Al hacer esto, se mostrará un fragmento de HTML muy similar al del video de YouTube que vimos en una de las secciones anteriores. Y, nuevamente, la URL de origen será la parte más fundamental de este código, a pesar de que también se pueden usar los parámetros que vienen establecidos predeterminadamente.
Al agregar este código a nuestra página web el mensaje se va a poder mostrar sin problemas:
- Existen muchos sitios que son muy conocidos de medios sociales, como Linkedln, Instagram o Twitter, que tambien ofrecen códigos para insertar nuestros mensajes. Lo más común es que encontremos esta opción disponible en la configuración de cada entrada individual.
Insertar el iframe en wordpress utilizando un plugin
Claro está, que los desarrolladores de la plataforma wordpress constantemente están trabajando para simplificar labores como lo es la integración de iframes por medio del uso de plugins.
Principalmente, para esto existen dos opciones que se pueden considerar si nuestro plan es incluir contenido externo en nuestro sitio web de manera frecuente.
La primera solución, y la más popular es:
Plugin iframe
Este se trata de un plugin que nos permite agregar iframes a nuestro sitio de wordpress al usar algunos atajos. Ya que podemos especificar los mismos parámetros que al momento de agregar un iframde a través de HTML de manera manual. Sin embargo, en este caso no debemos preocuparnos por manejar el código de nuestras páginas directamente.
Por otro lado, una buena alternativa para esto es probar la opción:
Plugin avanzado de iframe
En realidad cumple casi que la misma función que el plugin anterior, este nos permite insertar un iframe a nuestro sitio web con la utilización de atajos. No obstante, este también incluye unas cuantas características adicionales, como por ejemplo códigos de seguridad, que tienen la función de evitar que otros usuarios puedan incrustar iframes sin nuestro permiso, también tiene opciones de estilos personalizados y varias cosas más, que podemos ir conociendo con el tiempo.
El plugin avanzado de iframe puede ser actualizado a si versión Pro, normalmente y en la mayoría de los países el valor es un aproximado a los 20 dólares y la valides de esta versión paga, sería de unos seis meses. Esta versión actualizada, cuenta con la particularidad de que puede producir iframes sensibles, y permite características como la opción de zoom y lazy loading. Tengamos en cuenta lo mucho que estas opciones pueden valer la pena para nuestro sitio, esto dependerá de la frecuencia con la que planeemos usar iframes en nuestro sitio.
Repasando aspectos general
Lograr mantener un buen y equilibrado funcionamiento de nuestro sitio web y respetar el cumplimiento total de la ley será algo de vital importancia para el futuro de nuestra labor.
Además, ahora que conocemos y sabemos cómo insertar el iframe en wordpress también debemos considerar que estos iframes no solamente nos van a ayudar a lograr compartir todo el contenido de los demás y el que queramos de una manera más ética, sino que también nos va a permitir mostrar todos los archivos de video y audio sin necesidad de que tengamos que alojarlos completamente en nuestro sitio web.
Con el objetivo de dejar completamente claro todo lo relacionado con esto, hemos decidido analizar a lo largo de este artículo tres de los principales métodos para usar iframes con wordpress
- Agregar sitios de wordpress e iframes de manera manual
- Utilizar códigos de incrustación para crear iframes
- Agregar iframes utilizando algún plugin de wordpress como iframe avanzado o plugin iframe
Hoy en día al ser grande la cantidad de personas que trabajan en esta plataforma no le prestan la atención que merece a la utilización de los iframes, pero sí de ahora en adelante tomas nota o empleas lo aprendido en este artículo, verás que insertar el inframe en wordpress no es algo del otro mundo.
La importancia de insertar el iframe en wordpress correctamente
Entonces, ahora sabemos cómo insertar el iframe en wordpress correctamente en nuestro sitio de manera correcta nos aporta y por supuesto nos sumará mucho de cara al rendimiento final que muestre nuestro sitio web, compartiendo contenido contenido de otros sitios, de otros creadores y, ya que como mencionamos al inicio, eso no se considera algo ilegal para nada, podemos realizarlo con frecuencia siempre que respetemos las normas dictadas y apliquemos los parámetros que deseemos de manera adecuada.
Pues de no ser así, lo que obtendremos como resultado final será un sitio web que muestre a los usuarios errores y fallas, y por ende, dichos errores y fallas no serán del agrado de los usuarios, lo que podría llegar a causar un éxodo de usuarios, si hablamos de usuarios constantes en nuestro sitio en wordpress. Si hablamos de usuarios novatos o usuarios potenciales, lo que ocasionamos al mostrar un sitio con defectos será un desinterés o mucha falta de él por parte de estos visitantes.
Como dijimos, muchos no le prestan la atención merecida, pero muchos son los que intentan postear o compartir contenidos externos de otros sitios web en sus propios sitios, y por lo tanto, los que se equivocan y cometen errores al implementarlos son muchos.
Sé diferente y marca la diferencia con tu labor dentro de esta plataforma, te hemos mostrado los detalles, las maneras en que se utilizan y también las herramientas que tienes a tu disposición para hacer uso correcto además de fácil y rápido de estos códigos iframes.
Si este artículo te gusto o te sirvió de ayuda, te invitamos a visitar nuestro blog oficial, en él también podrás encontrar más contenido similar de la plataforma wordpres, además de contenido de tecnología en general, cada semana, cada día agregamos nuevos artículos, y es por eso que a continuación te dejaremos tres enlaces a artículos subidos recientemente en los que tocamos temas de la plataforma wordpress.
Conoce cómo clonar WordPress de forma segura y rápida.
Aprende a cómo borrar el caché de WordPress fácil y rápido.
por último sepa cómo agregar atributos alt a imágenes en WordPress