Cómo incrustar feeds en directo de Instagram y subir de nivel tu sitio web
Inicio Blog Cómo incrustar feeds en directo de Instagram y subir de nivel tu sitio web

Cómo incrustar feeds en directo de Instagram y subir de nivel tu sitio web

Cómo incrustar en vivo Instagram Feed en su sitio web fácilmente

Con una transmisión en vivo de Instagram en tu sitio web, puedes captar la atención de las personas, aumentar tus seguidores en Instagram e impulsar tus ventas con la prueba social.

Pero seamos sinceros, incrustar un feed de Instagram puede ser un verdadero dolor de cabeza, especialmente si no estás acostumbrado a programar.

Si eres como yo y quieres incrustar feeds en vivo de Instagram en tu sitio sin la molestia de codificar, esta guía es para ti.

Todo el proceso es sencillo, por lo que podrás seguirlo aunque seas nuevo en WordPress. Solo necesitas una herramienta como Instagram Feed Pro y podrás tener un feed con contenido de Instagram en cuestión de minutos.

En este artículo:

¿Se pueden incrustar feeds en directo de Instagram sin un plugin?

Sí, pero este método tiene muchas desventajas que debes tener en cuenta:

  • Tendrás que estar constantemente lidiando con códigos de inserción para mantener actualizado el feed de Instagram.
  • Incrustar una sola publicación lleva mucho tiempo y requiere ir y venir entre dos sitios web.
  • Cada vez que publiques algo nuevo en Instagram, tendrás que repetirlo una vez más.
  • Tampoco puedes personalizar realmente tu feed de Instagram sin tener que trastear con el código.

Para aquellos de ustedes con un sitio web cuidadosamente diseñado que coincida con su marca, esto puede ser un gran rompedor de tratos.

Si eres como yo y quieres evitar todas esas molestias, puedes optar por un plugin de Instagram para WordPress. Simplemente deja que el plugin incruste las publicaciones por ti y emplea el tiempo y esfuerzo ahorrados en tu negocio.

¿Cómo añado un feed en directo de Instagram a WordPress?

De todas las opciones, Instagram Feed Pro es fácilmente la mejor herramienta para cualquiera que quiera mostrar feeds de Instagram en directo con facilidad.

instagram feed pro página de inicio

Con la ayuda de esta increíble herramienta, podrás:

  • Muestra impresionantes feeds de Instagram que se adaptan automáticamente a tu diseño, sin necesidad de programar.
  • Anima a los visitantes de tu sitio web a seguir tu cuenta de Instagram con botones de llamada a la acción
  • Aumente sus ventas con la prueba social positiva de los contenidos generados por los usuarios (CGU)
  • Obtenga ayuda directamente de un equipo de expertos en WordPress
  • Muestra toneladas de publicaciones de Instagram mientras tu sitio carga tan rápido como siempre
  • Personaliza fácilmente el diseño de tu feed de Instagram con unos pocos clics utilizando el editor de feeds en directo.
instagram haz clic en el botón incrustar

Creo que la calificación de4,9/5 estrellas y los millones de usuarios activos dejan claro por qué Instagram Feed Pro es la opción número uno para incrustar feeds de Instagram en directo.

¿Listo para añadir contenido de Instagram a tu sitio web? ¡Consigue hoy mismo tu copia de Instagram Feed Pro!

Nota: Instagram Feed Pro está diseñado y construido para WordPress, por lo que puede no funcionar con otras plataformas web como Wix, Squarespace o Shopify. Pero es perfectamente compatible con los constructores de páginas de WordPress como Divi constructor y Elementor.

Paso 1: Instalar el plugin Instagram Feed Pro

En primer lugar, usted puede obtener su propia copia de Instagram Feed Pro aquí. Después de descargar este plugin WordPress Instagram en su ordenador, instalarlo en su sitio web.

Siempre puede consultar esta guía paso a paso sobre cómo instalar un plugin de WordPress para obtener más detalles.

Paso 2: Crea tu feed de Instagram en directo

La belleza de usar Instagram Feed Pro es que es muy fácil crear tu feed de Instagram.

Para empezar, ve a tu panel de WordPress y navega hasta Instagram Feed " All Feeds.

A continuación, puede crear un feed haciendo clic en el botón Añadir nuevo.

crear nuevo feed instagram feed pro

A continuación, el plugin te pedirá que elijas el tipo de feed de Instagram. Las opciones aquí incluyen:

  • Línea de tiempo del usuario: Utiliza el feed para mostrar solo las publicaciones de tu cuenta de Instagram
  • Hashtag público: Incrusta fotos y vídeos de Instagram que tengan hashtags específicos.
  • Publicaciones etiquetadas: Muestra las publicaciones de Instagram en las que otros usuarios han @mencionado tu cuenta.

Seleccionando varias opciones a la vez, puedes incluso combinar diferentes tipos de feed de Instagram para un único feed.

Una vez que haya seleccionado el tipo de alimentación, haga clic en Siguiente.

Paso 3: Conecta tu feed de Instagram a tu cuenta de Instagram

Después de crear tu feed, este plugin de WordPress para Instagram te pedirá que conectes tu cuenta de Instagram.

De este modo, tu nuevo feed puede mostrar contenido de Instagram en tu sitio web.

Para continuar, pulse aquí el botón Añadir fuente .

instagram añadir fuente para feed

Después de eso, verás una ventana emergente que te pedirá que decidas entre conectar tu cuenta básica o tu cuenta de empresa.

Una cuenta básica de Instagram te permite incrustar un feed de Instagram sólo de tu propia cuenta.

Por su parte, una cuenta de empresa de Instagram te permite añadir feeds de hashtags de Instagram, vídeos de Instagram, feeds etiquetados, feeds shoppable y mucho más.

Para este tutorial, usaré una cuenta básica y haré clic en Iniciar sesión con Instagram.

Elige tu tipo de cuenta para Instagram.

A continuación, el plugin te pedirá acceso de sólo lectura a Instagram para terminar de conectar tu cuenta.

Este acceso permitirá a Instagram Feed Pro ver la información de Instagram, pero en realidad no puede hacer ningún cambio.

Como puedes ver, los plugins de Smash Balloon como Instagram Feed Pro son completamente seguros de usar.

En la ventana emergente, haga clic en Permitir para dar acceso de sólo lectura.

permitir el acceso a instagram

Por último, puedes hacer clic en Siguiente para confirmar esta cuenta como fuente de tu feed de Instagram.

confirma tu fuente de instagram

Paso 4: Personaliza tu feed de Instagram en directo

Una vez que hayas terminado de conectar tu cuenta de Instagram, el plugin abrirá el editor de feed en directo.

Desde este editor, puedes configurar fácilmente el diseño de tu feed de Instagram utilizando las opciones de personalización de la izquierda.

También puedes cambiar el diseño de tu feed, el diseño de la cabecera, la combinación de colores, el diseño de los botones, el estilo de las entradas y muchas más funcionalidades.

A la derecha, tienes una vista previa en directo de tu feed de Instagram donde puedes seguir tus cambios en tiempo real.

Consejo de experto: ¿Quieres personalizar rápidamente? Instagram Feed Pro tiene temas de feeds de Instagram listos para usar, que te permiten crear feeds impresionantes y atractivos con un mínimo de tiempo y esfuerzo. Solo tienes que elegir un tema que te guste y transformar al instante el diseño, los botones, el estilo de la publicación, el diseño del encabezado y mucho más, ¡todo con un solo clic!

live feed editor for instagram feed pro

Como hay muchas opciones aquí, voy a repasar las opciones de personalización con las que suelo juguetear.

En primer lugar, haga clic en la opción Diseño de la fuente de la izquierda.

seleccionar opciones de diseño de feed live feed editor instagram

Instagram Feed Pro tiene plantillas de diseño ya preparadas entre las que puedes elegir: cuadrícula, carrusel, mampostería y resaltado.

opciones de diseño de feed instagram feed pro

Para este tutorial, voy a elegir el diseño destacado . Este diseño muestra tus publicaciones de Instagram en imágenes recortadas cuadradas con las publicaciones destacadas mostradas el doble de grandes, como esta:

instagram feed destacados diseño

También puedes cambiar ajustes adicionales aquí, como el número de entradas, filas y columnas. Yo prefiero el aspecto por defecto, así que voy a dejarlo como está.

Después de elegir el diseño de tu feed, haz clic en el botón Guardar de la parte superior.

A continuación, puede hacer clic en el pequeño botón de personalización para volver a las opciones principales.

volver a las principales opciones de personalización instagram

A la izquierda, haz clic en Combinación de colores para seguir adelante y establecer los colores de tu feed de Instagram.

seleccione la opción de combinación de colores

Con Instagram Feed Pro, hay 4 esquemas de color que usted puede elegir:

  • Heredar del tema: Copia automáticamente los colores del tema de tu sitio web.
  • Claro: Muestra un fondo claro y una fuente oscura para tu feed de Instagram.
  • Oscuro: elige un fondo más oscuro junto a un color de fuente claro.
  • Personalizado: Elige todos los colores manualmente
opciones de combinación de colores live instagram feed

Sólo tienes que elegir la combinación de colores que prefieras y volver a pulsar el botón Guardar .

No soy demasiado exigente con los colores del feed, así que aquí suelo optar por heredar del tema del sitio.

Usted puede ir a través de las otras opciones al igual que y terminar de personalizar su feed en vivo Instagram. Asegúrate de hacer clic en Guardar al final.

Paso 5: Insertar tu feed de Instagram en directo

Es hora de incrustar tu feed en directo de Instagram en tu página web. Tienes 2 formas de hacerlo:

  1. Utiliza el bloque Instagram Feed para añadir tu feed a tu post o página
  2. Utiliza el widget Instagram Feed para añadir tu feed a la barra lateral o al pie de página.

A continuación hablaremos de ambas opciones.

Cómo incrustar Instagram en vivo en la página de WordPress

Con el editor de feeds en directo, puedes incrustar directamente feeds de Instagram en directo en las páginas de tu sitio web de WordPress: página de inicio, página sobre, página de entradas de blog, etc.

En primer lugar, haz clic en el botón Incrustar de la esquina superior derecha para empezar.

instagram haz clic en el botón incrustar

Se abrirá una ventana emergente en la que podrás seleccionar la ubicación de tu transmisión en directo de Instagram.

De momento, haz clic en el botón Añadir a una página .

añadir feed de instagram en directo a la página

En la ventana emergente, sólo tiene que seleccionar la página de WordPress en la que desea el feed y hacer clic en Añadir.

añadir feed de instagram a una página

Instagram Feed Pro abrirá ahora esa página en el editor de WordPress.

Desde ahí, haz clic en el icono Más (+ ) para añadir un nuevo bloque de contenido.

añadir nuevo bloque de contenido en wordpress

A continuación, escribe "instagram" en la barra de búsqueda y haz clic en Instagram Feed para añadirlo a tu página.

instagram feed block en wordpress page

Por último, haz clic en el botón Publicar de la parte superior derecha para que tu página esté activa.

De este modo, cuando los visitantes de su sitio consulten la página publicada, podrán ver el feed incrustado en directo en su sitio web.

ejemplo de feed de instagram en directo

Como puedes ver, es súper fácil incrustar feeds de Instagram en tus páginas de WordPress.

A continuación, vamos a ver cómo puedes mostrar los feeds de Instagram en tu barra lateral o en el pie de página.

También puedes mostrar tu feed de Instagram en las zonas de tu barra lateral como widget de Instagram.

En primer lugar, ve al menú Instagram Feed " All Feeds desde el panel de control de WordPress.

Todos los feeds de Instagram que crees aparecerán en esta página.

Para continuar, selecciona el feed en directo de Instagram que creaste anteriormente.

abre tu feed de instagram

Una vez hecho esto, el plugin abrirá esa fuente en el editor de fuentes en directo.

Como antes, puedes hacer clic en el botón Incrustar de la parte superior.

botón de inserción de feed de instagram

Para continuar, simplemente copia el shortcode, o puedes seleccionar fácilmente la opción Añadir a un Widget en la nueva ventana emergente.

añadir feed de instagram en directo al widget

Una vez hecho esto, Instagram Feed Pro abrirá la página de widgets de tu sitio WordPress.

Desde aquí, haz clic en el panel Sidebar para gestionar los widgets de tu barra lateral.

abre el panel de la barra lateral para insertar el feed de instagram en directo

O, en su lugar, puedes gestionar tus widgets de pie de página haciendo clic en el panel Pie de página . Para este tutorial, usaremos una barra lateral para tu feed de Instagram.

abrir panel de pie de página para insertar feed de instagram en directo

A continuación, haz clic en el icono de signo más (+) para añadir un nuevo widget antes de seleccionar el widget de Instagram Feed entre las opciones.

añade el widget de instagram a tu barra lateral

Por último, ya puedes hacer clic en el botón Actualizar y habrás incrustado tu feed de Instagram.

Ahora, cuando visites tu sitio web, verás tu feed de Instagram en directo en tu barra lateral, así:

ejemplo de feed de instagram en directo en la barra lateral

Con estos sencillos pasos, ya puedes incrustar fácilmente un feed en directo de Instagram en tu sitio web.

Ahora, puedes mostrar la prueba social de tu contenido de Instagram en tu sitio web para conseguir más suscriptores, aumentar las conversiones y disparar tus ventas.

¿Quieres crear feeds de Instagram en directo para hacer crecer tu negocio? Empieza hoy mismo con Instagram Feed Pro.

Si quieres que tu contenido de Instagram llegue a la gente en el momento perfecto, consulta esta guía sobre cómo programar tus publicaciones de Instagram.

Preguntas frecuentes

¿Por qué debería incrustar contenido de Instagram?

Puedes conseguir que muchas más personas vean tus publicaciones de Instagram y que los visitantes de tu sitio te sigan utilizando Instagram embeds. Otro uso de las incrustaciones de Instagram que realmente me gusta es mostrar reseñas positivas y testimonios de Instagram para crear una mejor impresión de mi sitio.

¿Se pueden incrustar vídeos de Instagram?

Sí, puedes incrustar vídeos de Instagram además de fotos. En mi experiencia, mostrar vídeos puede hacer que la gente permanezca más tiempo en tu sitio, lo que también ayuda con el SEO.

¿Cómo personalizar una incrustación de Instagram?

Normalmente, no puedes personalizar tus incrustaciones de Instagram a menos que te sientas muy cómodo con la codificación. Como alternativa, puedes utilizar la herramienta Instagram Feed Pro para mostrar feeds de Instagram personalizables en tu sitio. También tiene un personalizador visual con una vista previa en vivo que es bastante útil.

¿Qué es un carrusel de Instagram?

Es una función de Instagram que te permite subir varias fotos y vídeos en una sola publicación. La gente puede deslizar el dedo por las fotos y vídeos para ver todo tu contenido. Yo soy muy fan de esta función, ya que me permite subir un montón de contenido a la vez.

Empieza a integrar feeds de Instagram en directo de forma sencilla

Cuando intenté por primera vez mantener un feed de Instagram «en vivo» en un sitio web utilizando incrustaciones manuales, fue agotador, sinceramente.

Una publicación a la vez, copiar, pegar, repetir.

Y luego volver a hacerlo cada vez que había una nueva publicación.

Puedes obtener códigos de inserción individuales de forma gratuita, pero rápidamente se convierte en una tarea tediosa. No tienes control real sobre el diseño, no puedes adaptarlo fácilmente a tu marca y nada se actualiza automáticamente.

Por eso confío en Smash Balloon Instagram Feed Pro ahora.

Con Instagram Feed Pro, he visto cómo los propietarios de sitios web han pasado de decir «esto es demasiado trabajo» a «mi feed se gestiona solo» con una sola configuración. El plugin:

  • Recopila automáticamente las nuevas publicaciones de Instagram.
  • Te permite diseñar tu feed con opciones sencillas en lugar de código.
  • Mantiene la velocidad de tus páginas mientras muestra muchas imágenes y vídeos.
  • Facilita el uso de cuadrículas, carruseles, feeds de hashtags y mucho más, todo desde el mismo lugar.

Esto es lo que te sugiero que hagas a continuación:

  • Empieza a utilizar Instagram Feed Pro y sigue los pasos de esta guía para crear tu primer feed en directo.
  • Incrústalo en una página clave (como tu página de inicio o tienda) y en tu barra lateral o pie de página.
  • Observa cómo los visitantes ven, hacen clic e interactúan con tu contenido de Instagram con mucha más frecuencia.

Tu feed de Instagram puede funcionar como un escaparate móvil en tu sitio web, mostrando siempre las novedades sin que tengas que hacer el mismo trabajo dos veces.

Los mejores tutoriales sobre feeds de redes sociales para WordPress

avatar de autor
Sajjan Sharma Redactor jefe
Sajjan lleva más de 10 años escribiendo sobre WordPress, marketing en redes sociales y negocios online. Sus intereses profesionales se extienden al marketing de influencers, la curación de contenidos y las estrategias de marketing digital.

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.