Iframe: Qué es, para qué sirve y cómo usarlo en tu WordPress
Categoría:
Desarrollo web para WordPress,
WordPress,
Desarrollo web
Fecha:
21/08/2019
“Inserta un código iframe” es una de las frases que seguramente hayas oído, leído o empleado a la hora de desarrollar un proyecto de diseño web. Y es que, el uso de estos elementos html está más que extendido en este mundillo.
Estos iframes, te dan la posibilidad de mostrar elementos externos, como por ejemplo videos, mapas, feeds de redes sociales… dentro de tu página web, lo que puede ayudar a mejorar la navegabilidad en tu web y aumentar el ratio de tiempo en tu sitio. ¿Verdad que no está nada mal?
Si quieres saber cómo usarlos en tu provecho, continúa leyendo el post.
[elementor-template id="80835"]
Qué es un iframe y para qué sirve
Un iframe, estrictamente hablando, es la abreviatura de Inline Frame y se trata de un marco (llamado frame) que permite insertar un documento html dentro de otro. Como si se tratase de mostrar una web dentro de otra web. Por norma general, se compone de un código escrito en lenguaje html simple, que empieza siempre con la etiqueta <iframe>. Su estructura posterior indica la dirección del contenido que deseas incrustar en tu página web y otros parámetros como por ejemplo la altura o anchura del cuadro a mostrar. Estos iframes permiten mejorar la experiencia del usuario dentro de una página web e incluso aumentar el tiempo de permanencia en un site. No en vano, los iframes de Youtube, Google maps o Facebook son los más empleados a la hora de diseñar páginas web por los motivos anteriormente comentados. Sin embargo, el consejo que te voy a dar es que no abuses mucho de su uso por estos tres principales motivos:- Ralentizan la carga de la página. Ten en cuenta que tu página web estará realizando una llamada extra a un sitio externo de tu alojamiento web contratado, por lo que al añadir procesos extras, evidentemente, tu web tardará un tiempo extra en cargar esos recursos.
- Pueden suponer un riesgo de seguridad. Como todo en esta vida, si algo es sospechoso, mejor no usarlo. Con los iframes y su procedencia ocurre lo mismo. Mejor curarse en salud.
- No controlas el contenido publicado. Al estar incorporando contenido de otro site, no tienes el poder de lo que hay publicado, por lo que si por alguna razón el autor original de dicho contenido lo modifica o eliminase, esto afectaría a tu página web.
Iframe de Google Maps
En la gran mayoría de los sitios web que visites, podrás ver cómo muestran la localización física mediante un incrustado de Google Maps, ya sea vía API, plugin o iframe. Lo bueno de emplear la API o un plugin para insertar Google Maps es que te permite realizar múltiples funcionalidades como marcadores, imágenes, globos de información, etc… lo malo es que desde 2018 la API es de pago. Por ello, son muchas las páginas web que se han pasado al uso de iframes de Google Maps. El cual es gratuito. Como ves en la imagen anterior, mediante el iframe de Google maps, se consigue insertar el pedazo de mapa que nosotros queremos, tal y como se vería desde la propia plataforma de Google, pero sin salir de tu página web. Lo que es de gran utilidad para los visitantes de tu sitio. Para hacerlo, simplemente hay que seguir los siguientes pasos:- Accede a Google Maps y carga la dirección que deseas mostrar.
- Pincha en el icono de tres rayas en la barra izquierda para abrir el menú y selecciona: "Compartir o insertar el mapa".
- En el cuadro Compartir abre la pestaña "Insertar un mapa".
- Escoge el tamaño y presiona "COPIAR HTML", para copiar el código del iframe.
- Pega ese código en tu página web.
<iframe src="https://www.google.com/maps/embed?pb=" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Iframe de Youtube
Otro de los códigos iframes más empleados, sin lugar a dudas, es el de Youtube. Gracias a este iframe puedes incorporar a en tu propia página web o entrada de blog, un reproductor de vídeo propio de la plataforma Youtube. De este modo, podrás añadir contenido audiovisual a tu página, sin necesidad de instalarte ningún reproductor multimedia, ni subir archivos pesados a tu alojamiento web. Una gran ayuda de cara a la reducción del rebote, la retención de usuarios en tu página y la ampliación de contenidos multiformato. Para añadir este iframe de Youtube en tu web, simplemente has de seguir estos pasos:- Escoger el video que deseas incorporar en tu sitio.
- Pinchar en la opción “Compartir” y posteriormente sobre “Insertar”.
- Una vez aparece el código iframe de youtube, lo copias.
- Por último, pega ese código en tu página web.
<iframe width="560" height="315" src="https://www.youtube.com/embed/AxB0eEDz0KY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Iframe de Facebook
Otra opción interesante es la de incrustar en tu página web el feed de tu página de Facebook. De esta forma, el usuario no tiene que salir de tu web, entrar en facebook y registrarte para visualizar el contenido de tu feed o interactuar con él. Esto es muy útil para conseguir aumentar la masa sociales de tu fanpage y enseñar a los visitantes de tu web, lo que se están perdiendo si no te siguen en las redes sociales. Seguro que más de uno se arrepiente de no haberte seguido todavía. Este proceso es muy sencillo de realizar, si sigues estos pasos:- Entra en esta url https://developers.facebook.com/docs/plugins/page-plugin
- En el cuadro diálogo introduce la url de tu página de facebook.
- Pincha en el botón de “Obtener el código”.
- Ve a la pestaña “Iframe” y copia el código iframe de Facebook.
- Pégalo en tu web.
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRaiolaNetworks%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2380804625480211" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
Cómo insertar un iframe en WordPress o en cualquier CMS a mano
Ahora que ya conoces un poquito mejor qué es un iframe y algunos de los iframes más empleados en el desarrollo de páginas web, te voy a enseñar a insertar un iframe en WordPress. Aunque si no empleas WordPress, esto también puede servirte de ayuda. Para evitar plugins, y el aumento de velocidad de carga de páginas que ello conlleva, puedes incorporar un iframe en WordPress de manera manual. Y aunque no tengas mucha idea de código, te aseguro que es muy sencillo de hacer. Como te he explicado al principio de este post, un iframe tiene siempre una estructura básica, la cual podría ser algo así:<iframe src="//www.dominioquequeremosmostrar.com" width="100%" height=“900"></iframe>Pues bien, para introducir este iframe bastaría con irse a la pestaña “HTML” de tu página o entrada de WordPress y pegar el código, tal y como se muestra en la siguiente imagen. Al publicar dicha página o entrada, se mostrará el iframe del contenido que deseas. Sencillo ¿verdad? Pues con la versión del editor Gutenberg de WordPress, ya existe una funcionalidad concreta de inserción de iframes a la hora de crear y editar entradas o páginas. Pinchando sobre el botón “+” situado en la parte superior izquierda del editor de Gutenberg, te aparecerá la opción de “Incrustar”. Ahora, únicamente has de elegir el tipo de incrustado que vas a necesitar (Facebook, Instagram, Youtube…) y pegar en el bloque correspondiente la url que vaya a mostrar.
david
29/01/2020 a las 00:47hola una pregunta que es o para que se usa el atributo ( accelerometer ) de youtube?
Responder a david
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *