Cómo insertar iframe en WordPress
Ya sea que quieras incrustar un video de Youtube, un audio, un mapa de Google Maps o un trozo de otra web, aquí te explico varias formas muy fáciles de insertar iframe en WordPress, manualmente con HTML o con plugin.
¡Tú decides!
Qué es un iframe en HTML
Un iframe es un inline frame, es decir, un elemento HTML con el que incrustamos otra página web dentro de una página principal. A efectos prácticos funciona como una ventana dentro de tu sitio que muestra contenido de otro lugar.
Eso sí, de manera dinámica, aquí no estamos hablando de una imagen congelada, ya que los visitantes pueden interactuar con el otro sitio web sin necesidad de abandonar la página actual.
Por ejemplo, podemos usar un iframe para mostrar un video de YouTube, incorporar un formulario interactivo de Google Forms, un mapa de Google Maps o incluso visualizar una página completa de otro sitio.
¿Es lo mismo un iframe y un codigo embed?
No, si bien es verdad que un iframe y un código embed sirven para incorporar contenido externo en un sitio web, lo cierto es que difieren en su uso y función. Un iframe actúa como una ventana que puede mostrar cualquier página web dentro de otra, siendo versátil pero potencialmente pesado en rendimiento.
En cambio, un código embed está diseñado para insertar contenido multimedia específico, como videos o widgets sociales, pero optimizado para una integración ligera y segura. Ambos métodos son útiles dependiendo del tipo de contenido que se desee mostrar y las necesidades específicas del sitio web.
¿Qué podemos insertar con un iframe?
A través de un iframe, podemos insertar una amplia variedad de contenido de otras páginas web directamente en tu propio sitio. Aquí te dejo algunos ejemplos de lo que puedes incorporar usando un iframe:
- Páginas web completas: Puedes mostrar una página web entera dentro de otra. Esto es útil para mostrar contenido que quieres que tus usuarios accedan sin necesidad de dejar tu sitio.
- Videos: Aunque existen códigos embed específicos para videos, también puedes utilizar iframes para insertar videos de plataformas como YouTube o Vimeo.
- Mapas: Puedes incrustar mapas de Google Maps o de otros servicios de mapas para proporcionar direcciones o mostrar ubicaciones específicas.
- Documentos: Documentos como PDFs o presentaciones de Google Slides pueden ser visualizados directamente en tu sitio a través de un iframe.
- Formularios: Puedes incrustar formularios de Google Forms, encuestas, o cualquier otro tipo de formulario web para facilitar la interacción sin salir de la página.
- Redes Sociales: Muchas plataformas sociales ofrecen la opción de incrustar contenido como tweets de Twitter, publicaciones de Facebook o imágenes de Instagram mediante iframes.
- Aplicaciones web: Herramientas y aplicaciones web interactivas, como calculadoras en línea o herramientas de reserva, también pueden ser integradas mediante iframes.
- Juegos: Juegos desarrollados para navegadores web pueden ser insertados en tu sitio a través de iframes, permitiendo a los visitantes jugar directamente desde la página.
Estructura de código de un iframe
Vista ya la teoría, vamos pasar a la acción. Eso sí, antes de incluir un iframe en WordPress debemos comprender su estructura, que es la siguiente:
<iframe src="url-de-la-web" width="ancho" height="alto" frameborder="borde" allowfullscreen="pantallacompleta" scrolling="desplazamiento"></iframe>No le tengas miedo al comando de arriba, pero si te impone mucho, abajo te explico como implementar un iframe con un plugin.
Atributos del código iframe:
- src: Especifica la URL del documento que se va a incrustar.
- width: Define el ancho del iframe en píxeles o porcentaje.
- height: Define la altura del iframe en píxeles o porcentaje.
- frameborder: Especifica si se debe mostrar un borde alrededor del iframe. Usualmente se establece como «0» para no mostrar borde.
- allowfullscreen: Permite que el contenido incrustado sea puesto en pantalla completa (muy útil para videos).
- scrolling: Controla si se muestran barras de desplazamiento. Puede ser «yes», «no» o «auto».
- name: Proporciona un nombre para el iframe, que puede ser utilizado como destino de un enlace o formulario.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Cómo insertar iframe en WordPress manualmente
Aunque existen plugins que te generan fácilmente el iframe code para su inserción en una entrada de Wordpress, más fácil me parece insertarlos manualmente a través de un bloque HTML de Gutenberg.
Para verlo bien vamos a ver un ejemplo muy sencillo y luego iremos subiendo la dificultad con otros casos.
Cómo meter en WordPress un iframe SEO
Para integrar integrar un iframe en HTML solo tienes que seguir los siguientes pasos:
- Empezamos yendo a nuestro editor de texto y haciendo clic en el símbolo (+).
- Se nos abrirá un buscador.
- Escribe en él la palabra "html".
- En este momento, se abrirá el bloque de Gutenberg HTML donde debemos incluir nuestro i-frame.
Para incluir el iframe en WordPress vamos a recordar su estructura, que es la siguiente:
<iframe src="url-de-la-web" width="ancho" height="alto" frameborder="borde" allowfullscreen="pantallacompleta" scrolling="desplazamiento"></iframe>Entonces, lo que vamos a hacer es incluir la URL https://sergiocanales.com/asap-theme/ y editar el resto de parámetro según queramos:
<iframe src="https://sergiocanales.com/asap-theme/" width="100%" height="500" frameborder="0" allowfullscreen="true" scrolling="auto"></iframe>Y el resultado sería el siguiente:
Con el código de arriba, hemos incrustado la URL https://sergiocanales.com/asap-theme/ dentro de un iframe de ancho completo, alto 500 px, sin borde, permitiendo la pantalla completa y mostrado las barras de desplazamiento
Vale, el ejemplo de arriba está bien, pero vamos a profundizar un poco más y lo que vamos a hacer es meter un mapa dentro de nuestra web.
Sigue leyendo para desbloquear este logro.
Cómo meter un mapa con un iframe
Para insertar un mapa en nuestro contenido, como ejemplo, vamos a coger uno de mis restaurantes favoritos de Madrid, llamado Chuka Ramen (tu puedes escoger el tuyo).
Entonces, lo primero de todo, nos vamos a Google Maps y buscamos el lugar que queramos, hacemos clic en él y tras ello en el botón de Share.
Tras ello, debemos ir a Embed a map y copiar el enlace, a través del botón COPY HTML:
Ahora lo llevamos a nuestro bloque de Gutenberg en Wordpress y listo, ya tenemos nuestro restaurante de confianza incluido. El código sería el siguiente:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.624004341668!2d-3.7046966887824664!3d40.4171795595601!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42288109016667%3A0xc09135bcc8238ea9!2sChuka%20Ramen%20Bar!5e0!3m2!1sen!2ses!4v1712602178567!5m2!1sen!2ses" width="100%" height="300" style="boder:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>Cómo meter un video en html con un iframe
Vamos a ver ahora, a modo de ejemplo, cómo insertar un video de Youtube en WordPress. Y ya que estamos, vamos a tomar la entrevista que me hizo Emilio García, de Campamento Web, que siempre me ha hecho mucha ilusión.
La forma más fácil consiste en copiar la URL de Youtube y tal cual pegarla en WordPress. Haciendo eso, te generará un embebed con el video para que puedas reproducirlo, como ves abajo.
Simplemente haciendo esto, ya veremos el video embebido (con su código embed y todo).
Cómo insertar iframe en WordPress con plugins
Si bien, yo no instalaría un plugin expresamente para insertar un iframe, también es cierto que siempre uso un plugin llamado Ultimate Shortcode que me permite incluir iframes de una forma muy sencilla.
Así pues, te voy a explicar como podemos insertar mapas, videos y audios con este plugin:
Insertar iframe de mapa
Para insertar el iframe de una mapa solo tenemos que ir al editor de Gutenberg, crear un bloque de tipo shortcode y hacer clic en los corchetes.
En este momento se nos abrirá el menú de ultimate shortcodes para que podamos elegir el elemento a integrar, en nuestro caso el Mapa de Google.
En la ventana que se abre, solo tienes que indicar el nombre o dirección del sitio en la sección Marcador:
Adicionalmente también puedes configurar otras opciones, como el ancho o el alto. Yo, por ejemplo, he creado un iframe con las siguientes especificaciones:
[su_gmap width="300" height="200" address="chuka ramen" zoom="5" title="Mejor restaurante"]Y el resultado es el siguiente
Insertar iframe de video
Vamos a ver ahora como insertar un video con un iframe a través del plugin de ultimate shortcodes. Y para ello, vamos de nuevo al editor de Gutenberg, creamos un bloque de tipo shortcode y hacemos clic en los corchetes.
Ahora, sí te fijas, tenemos 2 opciones para insertar nuestro video en Wordpress: con el shortcode Youtube y el Youtube avanzado, el cual ofrece mayores funcionalidades de cara a la reproducción. Ahí te aconsejo probar las 2 opciones y quedarte con el que más te guste.
Así mismo, me gustaría comentarte que con este plugin también puedes insertar un video propio, de Vimeo o Dailymotion. De igual forma, esta herramienta también te permite insertar audio.
Y con esto, ya hemos terminado de ver cómo podemos crear iframes en HTML. Quédate con el método que más te gusta e incrusta tanta información como quieras.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!