Si alguna vez te has preguntado cómo incrustar mapas, vídeos, feeds de redes sociales u otros elementos valiosos en tu propio sitio web, la respuesta está en una tecnología llamada «iFrames».
Estas ingeniosas herramientas hacen que sea notablemente sencillo compartir y mostrar contenido externo dentro de sus páginas web, abriendo un mundo de posibilidades para los desarrolladores web y propietarios de sitios.
Esta guía te ayudará a entender:
- ¿Qué es un iframe?
- ¿Cómo usar iframes HTML en tu sitio web de WordPress?
- ¿Por qué y cómo debes proteger tu sitio web iframe?
¿Qué es un iframe?
Un iframe (abreviatura de marco en línea) es un elemento de la página web que permite compartir contenido entre sitios. Permite a los propietarios de sitios web agregar contenido visualmente atractivo a sus sitios web y dar contexto a sus publicaciones.
Cuando vea videos incrustados de YouTube y otro contenido en sitios web, lo más probable es que el diseñador web haya insertado un elemento iframe dentro de esa página web.
Un iframe HTML es un documento HTML incrustado dentro de una página web. Es como tener otra ventana del navegador dentro de tu página web. El documento puede contener CSS (hojas de estilo en cascada) o JavaScript, que se carga cuando el navegador del usuario analiza correctamente la etiqueta iframe.
Varios sitios web de terceros, como YouTube y Google, utilizan iframes en su código de inserción. Puede poner sus códigos iframe en un elemento iframe en su sitio web.
Esto es lo que es un iframe como código HTML:
El atributo src especifica la URL de origen (localizador uniforme de recursos) para el contenido que estará en el elemento iframe.
Consejo profesional: Los visitantes leerán el contenido del iframe, así que incluya siempre un atributo de título para el iframe.
¿Para qué se utiliza un iFrame HTML?
Ahora que ya sabes qué es un iframe, vamos a explorar para qué se pueden utilizar. Los iFrames son los únicos navegadores de contenido entre sitios que proporcionan componentes HTML independientes.
Los iframes HTML también le permiten:
- Inserte recursos útiles de sitios web externos en el suyo.
- Aloje videos y otros medios en su sitio web sin utilizar su espacio de almacenamiento y ancho de banda.
- Evitar la infracción de los derechos de autor. El contenido incrustado mantiene su conexión con el sitio web del que lo obtuvo.
- Haz que sea más fácil para los visitantes del sitio web encontrar la ubicación física de tu negocio. El código iframe de Google Maps le permite mostrar un mapa de su ubicación en su sitio web.
- Crea anuncios gráficos. Los anuncios pueden ser más atractivos con un documento HTML totalmente incrustado.
- Mantén actualizado el contenido incrustado de tu sitio web. El iframe se actualiza automáticamente con cada cambio realizado en el contenido original.
Para qué se usa un iframe no termina con esta lista. Muchos desarrolladores utilizan iframes para secuencias de comandos remotas, un proceso que permite el intercambio de datos entre una aplicación del lado del cliente y la del lado del servidor sin tener que volver a cargar la página.
Atributos de etiqueta iFrame
La etiqueta HTML
| Atributos | Valor | Descripción |
| conceder | Denota una política de características para | |
| Permitir pantalla completa | VerdaderoFalso | True, si |
| allowpaymentrequest | VerdaderoFalso | True, si se permite que un origen |
| altura | Píxeles | Define la altura de |
| Ancho | Píxeles | Significa el ancho de |
| arenero | Allow-formsAllow-pointer-lockAllow-popupsAllow-same-originAllow scriptsallow-top-navigation | Define una lista de características que se deben permitir o restringir para el contenido de |
| Fuente | URL | Define la dirección de la página que se va a poner en el archivo |
| srcdoc | HTML_code | Define el contenido HTML de la página que se va a mostrar en |
| carga | Con entusiasmo | Define si un navegador debe cargarse |
| nombre | Mensaje de texto | Define el nombre de un iframe |
| ReferrerPolicy | no-referrerno-referrer-when-downgradeorigin-when-cross-originsame-originstrict-origin-when-cross-originunsafe-url | Define la información de referencia que se enviará al recuperar el iframe |
Hay más atributos de etiqueta iframe, como:
frameborder: Se establece en 1 (que es de forma predeterminada) si el navegador debe dibujar un borde entre este
Pero esto ya no se usa como frontera: ninguno; en tu CSS da un mejor efecto.
Algunos atributos adicionales ya no son compatibles con HTML5, una versión actualizada de HTML con nuevas y mejores funcionalidades.
¿Qué navegadores son compatibles con iFrame?
Todos los navegadores modernos admiten el elemento iframe HTML, incluidos:
- Google Chrome
- Internet Explorer
- Mozilla Firefox
- Safari
- Ópera
Cómo incrustar un iFrame HTML en WordPress
La mayoría de los sitios web utilizan WordPress como sistema de gestión de contenidos (CMS). Entonces, para la mayoría de los propietarios de sitios web, aquí hay tres formas fáciles de crear un iframe en su sitio web.
Adición de un iFrame incrustando el código fuente
Varios sitios web populares, como YouTube, ofrecen código iframe que puedes incrustar en tu sitio web para mostrar su contenido.
Para insertar un vídeo de YouTube en tu sitio web:
1. Vaya al video que desea agregar a su sitio web y haga clic en el botón Compartir.
2. Elija Incrustar en la ventana emergente que se muestra.
3. Aparecerá un cuadro. Verás lo que es un iframe en HTML. Desplázate hacia abajo y marca las casillas «Mostrar controles del reproductor» y «Habilitar el modo de privacidad mejorada».
4. Copie el código iframe. Puede utilizar el botón Copiar.
5. Pega el código en tu sitio web. Puedes añadirlo a una página existente o crear una nueva página haciendo clic en Añadir páginas > nuevas en tu panel de control de WordPress.
6. Añade un bloque HTML.
7. Pega el código iframe de YouTube en el bloque.
8. Obtenga una vista previa de su página y verifique que el nuevo contenido esté incrustado correctamente.
9. Publique sus cambios.
Añadir un iFrame con un plugin de WordPress
Con el plugin iframe, puedes incrustar contenido sin un código iframe HTML. No tienes que averiguar cómo se supone que debe verse un iframe en HTML.
1. Instala el plugin iframe en WordPress. Una vez activado, el plugin comenzará a funcionar (no se requiere configuración).
2. Agregue una nueva página o vaya a una publicación existente.
3. Añade un bloque de shortcode.
4. Ingrese el código corto a continuación para agregar un iframe. Incluya la dirección URL de origen del contenido que se va a incrustar.
[ iframe src=»La URL va aquí» ]
5. Obtenga una vista previa y publique su nuevo contenido iframe.
Crear e incrustar manualmente el código iFrame
Si no quieres usar un plugin, puedes crear manualmente el código HTML iframe e incrustarlo en tu blog de WordPress.
1. Ve al editor de WordPress y añade un bloque HTML
2. Introduzca este código en el bloque HTML:
3. Incluya la URL de origen del contenido que se va a incrustar donde diga «La URL va aquí».
Puede incluir atributos adicionales a la etiqueta iframe. Utilice tamaños de altura y anchura estándar (300p de alto, 600p de ancho) para limitar el iframe a un espacio pequeño:
Cómo hacer que un iFrame sea responsivo
A medida que más visitantes se desplazan por su sitio web, debe asegurarse de que todas sus interfaces de navegación sean receptivas. Deben funcionar correctamente en diferentes dispositivos y tamaños de pantalla.
¿Cómo te aseguras de que un iframe HTML incrustado en tu página web sea responsivo?
Estos son los pasos:
1. Pega el código de incrustación iframe en tu página HTML.
2. Establezca los atributos de altura y anchura de <iframe> en 100%.
3. Cambie la posición CSS de <iframe> a absoluta. Establezca los parámetros CSS (izquierda y arriba) en 0.
4. Agregue un div alrededor del <iframe>. El valor del parámetro padding-bottom depende de la relación de aspecto del contenido.
Por ejemplo, un vídeo de 16:9 será 9/16, lo que equivale a 0,5625.
Cuando es responsivo, esto es lo que es un iframe en código html:
style=»fondo de relleno:56.25%; posición:relativo; pantalla:bloque; Ancho: 100%»>
frameborder=»0″ allowfullscreen=»» style=»position:absolute; arriba:0; Izquierda: 0″>
Posibles amenazas de seguridad por el uso de iFrame
Los iFrames pueden plantear problemas de seguridad a los propietarios de sitios web. Pero el elemento iframe en sí mismo no plantea riesgos de seguridad para los sitios web.
Sin embargo, la naturaleza de lo que es un iframe hace posible que los virus informáticos se infiltren a través del código que lo incrusta en su sitio web. Estos virus pueden hackear tu sitio, instalar un virus en la computadora de tu audiencia o robar información delicada.
Para evitar problemas de seguridad, es crucial que solo incruste código iframe en su sitio web si proviene de una fuente confiable y segura.
Los iframes HTML también pueden afectar al rendimiento de tu sitio web si el contenido incrustado tarda mucho tiempo en obtenerse de su URL de origen. Los problemas de velocidad son peores cuando se utilizan varios iframes en una sola página web.
Si debe agregar varios iframes (tal vez en una publicación informativa), utilice el atributo load. La carga diferida permite que el iframe se cargue después de que el visitante llegue a la página, lo que reduce el tiempo de carga.
Los iFrames también pueden afectar a la optimización de los motores de búsqueda (SEO). Son más difíciles de indexar que los textos HTML sin formato, por lo que Google recomienda evitar los iframes en su sitio web.
Pero, si añades enlaces basados en texto al iframe, el robot de Google puede leerlos mejor, mejorando tu posicionamiento en los motores de búsqueda.
Es más seguro desarrollar tu sitio web sin iframes, por lo que no debes convertirlos en una parte integral de tu sitio web. Sin embargo, si eres cauteloso, puedes usar iframes para obtener excelentes resultados.
Un iframe es una de las mejores formas de incrustar contenido en un sitio web. Si ese contenido proviene de sitios web confiables, responsivos y se usa con moderación, los iframes HTML pueden impulsar sus esfuerzos de marketing con un mayor tráfico y contenido atractivo. ¿Listo para optimizar tu sitio web de WordPress para mejorar la velocidad, la seguridad y el rendimiento del marketing? Echa un vistazo a nuestras soluciones de hosting gestionado hoy mismo.
Mejora de la interactividad web con iFrames
En conclusión, un iFrame, abreviatura de «marco en línea», es una tecnología web versátil que permite a los desarrolladores web incrustar contenido de un sitio web dentro de otro sin problemas.
Esta poderosa herramienta sirve para varios propósitos, desde mostrar contenido externo como mapas, videos o feeds de redes sociales hasta incorporar formularios de pago seguros.
Los iFrames ofrecen una forma única de mejorar la experiencia del usuario y la funcionalidad, haciendo que los sitios web sean más interactivos y dinámicos.
Preguntas frecuentes sobre los iFrames
HTML es un lenguaje para crear páginas web. iFrame es un elemento HTML que se utiliza para incrustar otro documento dentro de una página web.
Enmarcar un sitio sin permiso puede infringir los derechos de autor o los términos de servicio. Busque siempre el consentimiento y compruebe los «robots.txt» o términos del sitio.
Ambos incrustan contenido, pero mientras que «iframe» puede incrustar cualquier contenido web, «incrustar» suele ser para medios como vídeos, audio y medios interactivos.
Compruebe los encabezados HTTP para X-Frame-Options. Si se establece en «SAMEORIGIN» o «DENY», se restringe el iFraming. Además, consulte la configuración o la documentación del backend de su sitio web.
Escriba un comentario