Cómo incrustar Instagram Stories en tu sitio web? [Guía completa + Ejemplos]

ChatGPT
o
Perplejidad

Insertar historias de Instagram en sitios web se está volviendo más popular en estos días, ya que es una gran manera para que las marcas mantengan su sitio web fresco y atraigan a sus visitantes.

Además, puedes llevar fácilmente a tus seguidores de Instagram a tu sitio web a través de aplicaciones link-in-bio o simplemente añadiendo el enlace de su sitio web a sus entradas mediante un enlace adhesivo.

Para añadir este contenido de Instagram a tu sitio web, tienes que utilizar un Widget del sitio web de Instagram, que puede personalizarse totalmente a su gusto y se actualiza automáticamente.

Te contaré todo sobre ese proceso en las secciones siguientes y por qué necesitas hacerlo cuanto antes. Además, encontrarás las mejores herramientas y ejemplos para ello.

Consejo: Puede incrustar widget de historias de Instagram automáticamente en tu sitio web y mostrar tus historias de Instagram en segundos. Pruébalo ahora.

Image

Muestra automáticamente las historias de Instagram en tu sitio web

Genera e incrusta automáticamente historias de Instagram para desbloquear el potencial de ventas de tu sitio web.

7 días de prueba gratuita

Guía rápida: Inserta las historias de Instagram en tu sitio web en pocos pasos

Incrustar historias de Instagram en páginas web es muy sencillo con las herramientas adecuadas. Por ejemplo, al utilizar EmbedSocial, Sólo tiene que seguir unos pocos pasos:

  1. Inscríbete para un widget de historias de Instagram y un Una plataforma de gestión de contenido generado por el usuario (UGC).
  2. Ir a Fuentes‘Gestionar cuentas’ y pulse Añadir nueva cuenta.
  3. Toque ‘Añadir cuenta de Instagram’ y aprueba la conexión de EmbedSocial a tu Instagram.
  4. Volver a 'Fuentes' → 'Añadir nueva fuente' y pulsar Instagram.
  5. Elija @Historias como fuente y elige tu cuenta IG de la lista.
  6. Toque Crear widget, Selecciona tu plantilla de widget y diseña tu widget.
  7. Copie el código del widget de Pestaña "Incrustar y péguelo en su sitio web.

Si aún no sabes qué hacer, echa un vistazo a este vídeo interactivo sobre el proceso:

Eso es todo lo que tenías que hacer, y cuando termines, obtendrás algo como esto:

El widget anterior también incluye nuestro CGU comprable que ayuda a sus clientes a navegar inmediatamente a las páginas de sus productos para comprar su aspecto.

Sin embargo, antes de proceder, hay algunas cosas que debes tener en cuenta para que la incrustación de la historia de Instagram sea un éxito, que te resumo a continuación, y luego también tendrás la guía completa.

¿Qué hay que saber para incrustar historias en Instagram?

Antes de incrustar las historias de Instagram en tu sitio web, entiende que la API de Instagram requiere que tu La cuenta de Instagram debe ser de empresa o de creador.

Tener una cuenta profesional de Instagram es necesario para autorizar cualquier aplicación de terceros como EmbedSocial-para acceder a tus historias y visualizarlas.

También, sólo historias activas (en directo) de las últimas 24 horas se pueden extraer de Instagram. Las historias archivadas y destacadas no están disponibles a través de la API.

Por último, una vez establecida la conexión, el sistema obtiene y actualiza automáticamente tus últimas historias mientras permanezcan activas en Instagram.

Nota: A diferencia de algunos competidores, EmbedSocial puede conectarse directamente a tu cuenta profesional de Instagram sin pasando primero por tu página de Facebook. Dicho esto, ya debe haber iniciado sesión en su cuenta de Instagram en el escritorio.

Guía completa: Cómo incrustar Instagram Stories en una página web paso a paso

A continuación se detallan los pasos para crear un Widget de historias de Instagram, personalícelo, genere su código incrustable e incrústelo en su sitio web:

Paso 1: Inscríbete en la plataforma EmbedSocial UGC

Antes de hacer nada, necesitas una cuenta EmbedSocial. No se preocupe, también ofrecemos una 7 días de prueba gratuita para que puedas comprobar todas nuestras funciones antes de comprometerte.

Paso 2: Añade tu cuenta de Instagram

A continuación, debe navegar hasta Fuentes y pulsar Añadir nueva cuenta:

navigating to the social accounts section in embedsocial

Paso 3: Aprueba la conexión de EmbedSocial a tu Instagram

Una vez hecho esto, tienes que pulsar ‘Añadir cuenta de Instagram’ y apruebe la conexión:

adding an instagram account to embedsocial

Paso 4: Añadir Instagram como fuente en EmbedSocial

Ahora que Instagram está conectado, es hora de añadir una fuente específica de Instagram, lo que puedes hacer a través de 'Fuentes' → 'Añadir nueva fuente' y pulsando Instagram:

adding instagram as a source in embedsocial

Paso 5: Elige @Stories como fuente y elige tu cuenta

Tendrá que toque @Stories en este punto y, a continuación, seleccione su cuenta IG conectada:

selecting instagram stories as a source in embedsocial

Paso 6: Cree y diseñe su widget

Una vez que pulse Crear widget, se te pedirá que elijas una plantilla de widget y accederás al editor de widgets de EmbedSocial.

Allí puedes cambiar todos los detalles de la apariencia de tu widget, desde el diseño hasta los colores, las fuentes y los elementos que incluirá:

editing your widget in the embedsocial editor

Paso 7: Copie y pegue el código del widget en su sitio web

Por último, sólo tienes que copiar el código del widget incrustable, que encontrarás en la sección del Editor Incrustar (esquina superior izquierda). Una vez allí, haga clic en Copiar código:

copying the embedsocial widget code

Naturalmente, el último paso es pegar ese código en su sitio web. A continuación, cubro el proceso de hacer que a través de todos los constructores de sitios web populares y plataformas CMS.

Vídeo guía: Cómo incrustar un widget de historias de Instagram fácilmente

Si prefieres ver un vídeo sobre cómo incrustar feeds de Instagram, aquí tienes uno:

¿Cómo añadir un muro de Instagram a tu sitio web a través de diferentes plataformas CMS?

El proceso de pegar el código del widget de tu historia de Instagram es similar en todos los creadores de sitios web populares. A continuación te explicamos cómo mostrar las publicaciones de Instagram en la mayoría de ellos:

¿Cómo incrustar UGC en Shopify?
shopify logo

Aquí te explicamos cómo incrustar UGC en sitios de Shopify:

  1. Accede a tu cuenta de Shopify después de copiar el código del widget incrustable en EmbedSocial;
  2. Navegue hasta el Páginas y haz clic en Añadir página;
  3. En el Contenido el código incrustable;
  4. Seleccione la página en la que desea que aparezca el código y pulse Guardar.
Steps to embed social media feed in Shopify
¿Cómo incrustar UGC en Squarespace?
Squarespace icon

Aquí te explicamos cómo incrustar UGC en sitios Squarespace:

  1. Copia el código del widget EmbedSocial e inicia sesión en tu cuenta de Squarespace;
  2. Elija la página en la que desea que aparezcan las reseñas;
  3. Haz clic en Añadir nueva sección y luego Añadir bloque donde desea mostrar el widget;
  4. En la lista de bloques, seleccione 'Embed‘;
  5. Haga clic en el bloque, seleccione ‘Fragmento de código", y haz clic en ‘Incrustar datos";
  6. Por último, en el cuadro de código, pegue el código de revisión copiado;
  7. Asegúrate de guardar y publicar los cambios en Squarespace.
embed a code snippet in squarespace
¿Cómo incrustar UGC en Wix?
Wix Logo

Aquí te explicamos cómo incrustar UGC en sitios Wix:

  1. Accede a tu editor Wix y elige la página y la ubicación para añadir el widget;
  2. Haz clic en el botón Icono "+". en la esquina superior izquierda para añadir un nuevo elemento;
  3. Encuentra el Embed & Social y pulse Código de incrustación;
  4. Pegue el código y pulse Actualizar.
embedding a code snippet in wix
¿Cómo incrustar UGC en Webflow?
Webflow logo

He aquí cómo incrustar UGC en los sitios Webflow:

  1. Después de crear el widget en EmbedSocial, inicie sesión en su cuenta Webflow;
  2. Vaya a la vista de edición de su sitio web dentro de Webflow;
  3. Elija Añadir elemento en Webflow y seleccione la opción Elemento "Embed;
  4. Arrástrelo y suéltelo donde quiera que aparezcan sus reseñas;
  5. En el campo de entrada, pegue el código EmbedSocial copiado.

How to embed Twitter in Webflow

¿Cómo incrustar UGC en Pagecloud?

He aquí cómo incrustar UGC en sitios Pagecloud:

  1. Después de copiar el código de EmbedSocial, inicia sesión en tu cuenta de Pagecloud cuenta;
  2. Comience a editar la página web en la que desea que aparezcan las reseñas;
  3. Desde tu perfil, pulsa Aplicaciones en el menú de la cinta de la izquierda y seleccione Incrustar;
  4. Pega el código de EmbedSocial en el campo emergente y haz clic en Ok para completar el proceso.
Embed Google reviews in PageCloud
¿Cómo incrustar UGC en Google Sites?

A continuación te explicamos cómo incrustar contenido generado por los usuarios en Google Sites:

  1. Una vez que hayas copiado el código del widget incrustable en EmbedSocial, accede a tu cuenta de Google Sites;
  2. Navegue hasta la página en la que desea incrustar el widget;
  3. Utiliza el Pestaña "Insertar en Google Sites y elige dónde quieres colocar el widget;
  4. Elige 'Insertadel menú y pegue el código copiado en el cuadro de diálogo;
  5. Haz click enSiguientey despuésInserte' para finalizar la incrustación.
adding an embeddable widget in google sites
¿Cómo incrustar UGC en Elementor?

A continuación te explicamos cómo incrustar UGC en Elementor:

  1. Inicie sesión y navegue hasta la página en la que desea añadir las reseñas;
  2. Pulse una sección vacía y elija la opción Bloque "HTML de la sección izquierda de la cinta;
  3. Arrástrelo y suéltelo en la página y pegue el código del widget en el campo vacío;
  4. Actualice y publique la página para ver el widget en directo.
pasting the widget code in elementor
¿Cómo integrar UGC en Notion?

A continuación te explicamos cómo incrustar UGC en Notion:

  1. Después de copiar el código del widget, conectarse a Notiony vaya a la página correspondiente;
  2. Escriba el /embed y, en la lista desplegable, elija el comando Opción "incrustar;
  3. Pegue la URL y haga clic en "Incrustar enlace para añadir sus opiniones a Notion.
embed Google reviews in Notion embed link
¿Cómo incrustar CGU en sitios web HTML?

Cómo incrustar CGU en sitios HTML

  1. Copie la reseña del widget EmbedSocial de la sección Pestaña "Incrustar en la esquina superior izquierda del Editor;
  2. Abra el archivo HTML de su sitio web, que puede ser una página nueva o una ya existente;
  3. Pega el código EmbedSocial copiado donde quieras que se muestren las opiniones.
Steps to embed Google reviews in a HTML website

Por qué mostrar Instagram Stories en tu web?

Cuando añades un muro de Instagram a tu sitio web que incluye Stories, publicaciones, vídeos, etc., impulsas la participación de tus usuarios y obtienes beneficios adicionales:

mind map showcasing the benefits of embedding instagram stories on website
  • Mostrar actualizaciones de contenido en tiempo real-Mantenga vivo su sitio web con sincronizaciones automáticas de historias que muestren sus últimos eventos, lanzamientos o momentos entre bastidores;
  • Aumentar el compromiso de los usuarioslleve el conocido formato de las historias a su sitio web para cautivar a los visitantes con pegatinas interactivas, elementos visuales y narraciones breves;
  • Garantizar una experiencia de marca unificada.extienda su estética y tono de Instagram a su sitio web, creando una experiencia fluida en ambas plataformas;
  • Llegue a más personas e impulse el crecimiento de las redes sociales.Convierte a los visitantes de tu sitio web en seguidores de Instagram promocionando tu feed de historias activas en tu sitio web;
  • Maximizar el rendimiento de la creación de contenidosda a tus historias una vida más larga mostrándolas más allá del límite de 24 horas de Instagram y asegurándote de que más gente las ve;
  • Reutiliza tu historia de Instagramreutiliza tus mejores historias directamente en tu sitio web mediante un widget profesional que te ayuda a gestionarlas y mostrarlas;
  • Convierta las historias en un nuevo formato publicitarioutilice sus reportajes incrustados como banners digitales para destacar campañas o presentar promociones en sitios y portales web asociados;
  • Amplíe el alcance de su historiamostrar historias a audiencias que quizá no te sigan en Instagram, desbloqueando nuevas oportunidades de exposición e impulsando la participación;

Cuando incrustas publicaciones o historias de Instagram en tu sitio web, no solo muestras tu contenido. Conectas tu narrativa social con la presencia digital de tu marca, impulsando una interacción coherente en todos los canales que posees.

Nota: Puedes mostrar todos los formatos de historias en un widget-.reportajes fotográficos, historias en vídeo, e incluso combinarlos con un Pinterest Pin stories feed en un único widget interactivo.

¿Por qué utilizar EmbedSocial para añadir widgets de historias de Instagram a tu sitio web?

Si quieres que incrustar historias de Instagram no suponga ningún esfuerzo, esté automatizado y sea totalmente personalizable, necesitas una plataforma como EmbedSocial que optimiza su flujo de trabajo:

embedsocial instagram stories widget landing page

He aquí por qué es la solución preferida de marcas y creadores:

  • Conexión oficial a la API de InstagramEmbedSocial se conecta directamente a la API oficial de Instagram, lo que garantiza que tus historias se obtengan siempre en tiempo real;
  • Actualización automática de historias.Las nuevas historias se sincronizan automáticamente cada 24 horas, manteniendo el contenido de su sitio web actualizado sin cargas manuales;
  • Widgets personalizablesajuste el diseño, el tamaño, los colores y las fuentes para que se adapten perfectamente al diseño de su sitio web y a la identidad de su marca;
  • Diseño receptivoLos widgets se ven muy bien en todos los dispositivos, adaptándose automáticamente a las pantallas de ordenadores de sobremesa, tabletas y móviles;
  • Múltiples opciones de visualizaciónElige entre ventanas emergentes, deslizadores, carruseles o cuadrículas para mostrar tus historias con diferentes estilos;
  • Centro de contenidos todo en unocombina historias de varias cuentas de Instagram o mezcla fotos, vídeos y otros formatos de historias en un único feed de Instagram;
  • Compatibilidad entre plataformasfunciona a la perfección con creadores de sitios web populares como WordPress, Shopify, Wix y Squarespace;
  • Análisis avanzadosHaz un seguimiento de las visualizaciones de las historias y de las métricas de participación directamente desde tu panel de EmbedSocial para medir el rendimiento.

Como puedes ver, con EmbedSocial, incrustar un feed de historias de Instagram es una configuración de una sola vez con varios beneficios: ahorro de tiempo, mejora del diseño y aumento de la participación.

Además, puedes crear y añadir un muro de Instagram a tu sitio web que contenga más que tus Stories. También puedes combinarlas con Reels y posts.

Ejemplos de widgets de Historias de Instagram

EmbedSocial ofrece varios servicios listos para usar Plantillas de widgets de Historias de Instagram que puedes adaptar totalmente a tus necesidades. O incluso puedes crear una plantilla nueva desde cero.

Estos son algunos de los widgets para insertar historias de Instagram que ofrecemos:

Conclusión: ¡Maximiza el alcance de tus historias de Instagram más allá de las 24 horas!

Insertar historias de Instagram en tu sitio web te ayuda a ampliar su visibilidad y mantén a tu audiencia enganchada incluso después de que desaparezcan de la aplicación.

Cuando conectas tu presencia en las redes sociales con tu sitio web de esta forma, ofreces a los visitantes contenidos frescos y dinámicos que explorar y que se actualizan por sí solos.

Es decir, si se inscribe en una plataforma como EmbedSocial que sincroniza, personaliza y muestra automáticamente sus historias en cualquier lugar en línea sin ningún tipo de codificación.

Por lo tanto, si quieres ahorrar tiempo y obtener más valor de cada historia que crees en tu cuenta de Instagram, incrusta el widget de historias de Instagram en tu sitio web.

Amplía el alcance de tus historias de Instagram hoy mismo con EmbedSocial!

Consejo: Puede incrustar widget de historias de Instagram automáticamente en tu sitio web y mostrar tus historias de Instagram en segundos. Pruébalo ahora.

Image

Muestra automáticamente las historias de Instagram en tu sitio web

Genera e incrusta automáticamente historias de Instagram para desbloquear el potencial de ventas de tu sitio web.

7 días de prueba gratuita

Preguntas frecuentes sobre la incrustación de historias de Instagram en un sitio web

Cómo incrustar historias de Instagram en un sitio web?

Puedes incrustar las historias de Instagram en un sitio web utilizando herramientas como EmbedSocial. Solo tienes que conectar tu cuenta de empresa de Instagram, empezar a recopilar tus IG Stories, diseñar tu widget incrustable, generar un código de incrustación y pegarlo en el HTML de tu sitio.

Cómo incrustar Instagram Stories en un sitio web de WordPress?

Puedes incrustar las historias de Instagram en una página de WordPress copiando el código de incrustación de tu EmbedSocial y pegarlo en un bloque HTML. El widget mostrará automáticamente tus últimas historias y se actualizará cada vez que se publiquen nuevas.

¿Puedo incrustar varios tipos de contenido en un mismo canal de redes sociales?

Sí. Con EmbedSocial, puedes mezclar historias con fotos de Instagram, vídeos e incluso pines de Pinterest en un único widget, creando un feed de redes sociales unificado e interactivo.

Puedo integrar Instagram Stories sin una cuenta Business?

Para integrar las historias de Instagram en un sitio web, necesitas una cuenta de empresa o de creador conectada a una página de Facebook. Esto lo requiere la API de Instagram para autorizar aplicaciones de terceros como EmbedSocial para acceder a tus historias y mostrarlas.

¿Puedo incrustar Instagram Stories de otros usuarios?

No. La API de Instagram no te permite incrustar historias en Instagram de otros usuarios. Solo puedes incrustar y mostrar historias de tu propia cuenta conectada. Sin embargo, puedes cargar manualmente historias públicas (con permiso) y recrearlas en tu widget mediante las opciones de personalización de EmbedSocial.

Cómo incrustar los destacados de las historias de Instagram?

Actualmente, la API de Instagram no permite que herramientas de terceros recopilen o incrusten directamente los destacados de las historias. Sin embargo, con EmbedSocial, puedes recrear tus mejores momentos de Instagram seleccionando y subiendo manualmente tus historias para mostrarlas a través de un widget personalizado de Instagram. Esto tiene el mismo efecto y mantiene tus mejores historias visibles más allá del límite de 24 horas.

¿Por qué no puedo incrustar historias de Instagram más antiguas?

Instagram solo permite incrustar historias en directo de las últimas 24 horas. Las historias archivadas no se pueden sincronizar automáticamente debido a las restricciones de la API de Instagram, pero puedes subirlas y mostrarlas manualmente con una herramienta de incrustación de historias como EmbedSocial.


Autor

SEO y editor de contenidos @EmbedSocial 

¡SEO & Content Editor con amplia experiencia en ayudar a las PYMES a entender cómo establecer y nutrir su presencia en línea, escribir y editar entradas de blog útiles sobre sus productos y servicios, y construir, gestionar y optimizar sus sitios web para el éxito!