Qué es un iframe, es una de las frases que seguramente hayas escuchado, leído o empleado en el diseño web y otra es «insertar un código iframe«.
Dichos iframes, te ofrecen la posibilidad de mostrar elementos externos como videos, mapas o feeds de redes sociales dentro de tu página web mejorando la navegación del usuario.
Si quieres saber cómo puedes utilizarlos para sacarles provecho, continúa leyendo este post.
Qué es un iframe, para qué sirve y comó añadirlo en tu WordPress
Un iframe permite insertar un documento html dentro de otro.
Es compuesto por un código escrito en lenguaje html, que empieza siempre con la etiqueta <iframe>. Su posterior estructura indica el contenido que se desea incrustar en la web y otros parámetro como el alto o la anchura del cuadro a mostrar.
Permiten mejorar la experiencia de usuario dentro de la web e incluso aumentar el tiempo de permanencia. Los iframes de Google maps, Facebook o Youtube son los más empleados a la hora del diseño web.
Es importante no abusar mucho en su uso por tres motivos principalmente:
- Ralentizan la velocidad de carga de la página web.
- Pueden suponer un riesgo de seguridad web.
- No puedes controlar el contenido publicado al ser contenido de otro site.
Iframe de Google Maps
En una gran mayoría der las páginas web que visites, veras cómo se muestra la localización fisica de la empresa mediante un iframe de Google Maps ya que la API es de pago.
Como puedes observar en la imágen anterior, mediante el iframe de Google Maps, puedes insertar el mapa que nosotros queremos, igual que se vería desde el propio Google Maps, pero sin salir de la página web.
Esto supone una gran utilidad para los usuarios de tu web.
Para añadirlo en tu web, simplemente se tienen que seguir los siguientes pasos:
- Ir a Google Maps y buscar la dirección que quieres mostrar.
- Pinchar en el icono de las tres rayas que aparece en la barra izquierda para abrir el menú y selecciona lo siguiente «Compartir o insertar el mapa«.
- El en cuadro de compartir debes abrir la pestaña «Insertar un mapa«.
- Puedes elegir el tamaño del mapa y presiona «Copiar HTML«, para copiar el código del iframe.
- Por último, pega el código en la página web.
Para añadirlo en tu web, simplemente se tienen que seguir los siguientes pasos:
- Ir a Google Maps y buscar la dirección que quieres mostrar.
- Pinchar en el icono de las tres rayas que aparece en la barra izquierda para abrir el menú y selecciona lo siguiente «Compartir o insertar el mapa«.
- El en cuadro de compartir debes abrir la pestaña «Insertar un mapa«.
- Puedes elegir el tamaño del mapa y presiona «Copiar HTML«, para copiar el código del iframe.
- Por último, pega el código en la página web.
El código que deberás incluir será parecido a este que añado a continuación:
<iframe src=»https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11746.62448506712!2d-5.5628014!3d42.605039!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8ada8359825ead99!2sSociedad%20Canina%20Leonesa!5e0!3m2!1ses!2ses!4v1609405146633!5m2!1ses!2ses» width=»600″ height=»450″ frameborder=»0″ style=»border:0;» allowfullscreen=»» aria-hidden=»false» tabindex=»0″></iframe>
Iframe de Youtube
Uno de los códigos iframe más empleados es el de youtube. Te permite incorporar en la web o en una entrada de tu blog, un reproductor de vídeo propio de la plataforma de Youtube.
Este iframe te permite añadir contenido audiovisual a tu web sin necesidad de instalar ningún reproductor multimedia, ni subir directamente en vídeo en tui web lo que mejora la velocidad de carga.
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.
Sirve de gran ayuda de cara a la reducción del rebote, la ampliación de contenidos multiformato y ayuda a la permanencia de los usuarios en el sitio web.
Pasos a seguir para añadir el iframe de Youtube:
- Elegir el vídeo que deseas añadir en tu web.
- Pinchar en la opción «Compartir» y darle posteriormente a donle pone «Insertar«.
- Copiar el código de iframe que aparece.
- Por último, pegar el código en tu página web.
Iframe de Facebook
Otra opción a considerar es la de añadir en tu página web el feed de tu perfil de Facebook. De esta manera, el usuario no necesita salir de tu web para visualizar tu contenido de facebook y poder interactuar con el.
Es una buena opción para aumentar el volumen de seguidores de tu fanpage y enseñar a los visitantes de tu web el perfil de tu fanpage.
Pasos a seguir para añadir el iframe de Facebook:
- Poner el google la url https://developers.facebook.com/docs/plugins/page-plugin
- Introducir la url de perfil de facebook empresarial.
- Hacer click en el botón «Obtener el código«
- Copiar el iframe de facebook y añadirlo en la web.
El iframe que deberás introducir en la web será algo así:
<iframe style=»border: none; overflow: hidden;» src=»https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fasociacioncaninaleon%2F&tabs=timeline&width=340&height=397&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId» width=»360″ height=»397″ frameborder=»0″ scrolling=»no»></iframe>
Insertar un iframe en WordPress o en cualquier CMS a mano
Ahora que ya sabes lo que es un iframe y los iframes más utilizados en diseño web, te voy a contar como insertar un iframe en WordPress.
Para evitar tener plugins innecesarios que empeoren la velocidad de carga de la web, puedes incorporar un iframe en Wodpress de manera manual sin la necesidad de tener mucho ide de código.
Como te he mostrado en este post, un iframe tiene siempre una estructura básica, como podría ser esta:
<iframe src=»//https://carlosenriquegarcia.es/» width=»100%» height=“900″></iframe>
Cómo insertar un iframe en WordPress
Para introducir dicho iframe es necesario irse a la pestaña «HTML» de tu página o entrada de tu blog en WordPress y pegar el código.
El usuario al estar en dicha página o entrada vera el contenido del iframe que desees añadir.
Conclusión
Mediante la implementación de iframes, podrás añadir en tu web videos, mapas, feeds de redes sociales….un sin fin de funcionalidades. Debes utilizarlos con cabeza ya que los iframes pueden llegar a ralentizar la velocidad de carga web.
Su inserción en WordPress como has visto el sencilla. Simplemente consiste en copiar y pegar el código iframe que desees añadir en tu página web.
Con su utilización vas a mejorar la experiencia de usuario en tu web y aumentar el tiempo de permanencia de los usuarios.
Si necesitas ayuda para cualquier tema relacionado con el diseño web ponte en contacto conmigo.
