Cómo mostrar Instagram Stories en tu página web (Guía paso a paso)
Inicio Blog Cómo mostrar Instagram Stories en tu página web (Guía paso a paso)

Cómo mostrar Instagram Stories en tu página web (Guía paso a paso)

cómo mostrar las historias de instagram en tu sitio web

Las Historias de Instagram son una poderosa herramienta para compartir actualizaciones puntuales e interactuar con tu audiencia en el momento. Aportan a tu marca una sensación dinámica y personal difícil de captar en una entrada de blog estándar.

El problema es que ese contenido atractivo está encerrado en Instagram. Todo ese gran material que tienes será completamente invisible para los visitantes de tu sitio web.

Para solucionarlo, he encontrado una forma sencilla de incrustar Instagram Stories directamente en un sitio web de WordPress.

Este simple cambio tuvo un gran impacto, y voy a guiarte a través de los pasos exactos. Aprenderás a mostrar Instagram Stories en tu sitio web para ofrecer a los visitantes una visión completa.

En este artículo:

Por qué mostrar Instagram Stories en tu sitio web?

Añadir Instagram Stories a tu sitio web crea un puente entre los visitantes de tu sitio web y el contenido de tus redes sociales. Muchas empresas pierden esta oportunidad de mostrar su contenido más atractivo donde puede llegar a un público más amplio.

Estas son las principales ventajas de incrustar Instagram Stories en tu página web:

  • Aumente la participación en su sitio web: Las historias hacen que los visitantes permanezcan más tiempo en su sitio mostrando contenido fresco y dinámico que se actualiza automáticamente.
  • Genere confianza y pruebas sociales: Los comentarios de clientes reales y el contenido entre bastidores ayudan a los clientes potenciales a conectar con tu marca.
  • Convierte visitantes en seguidores: Los visitantes del sitio web pueden previsualizar tus Stories y decidir seguirte en Instagram sin salir de tu sitio.
  • Ahorra tiempo en la creación de contenidos: Tus Historias de Instagram existentes aparecen automáticamente en tu sitio web, lo que te proporciona más contenido sin trabajo adicional.
  • Mejora la experiencia del usuario: Añadir Instagram Stories ofrece a tus visitantes más formas de interactuar con tu sitio web y consultar tu contenido.

Método Manual vs. Plugin: ¿Cuál elegir?

A la hora de incrustar Instagram Stories en tu página web, tienes dos opciones principales:

  • Manera manual: Maneje la codificación y la API de Instagram usted mismo para obtener sus Historias y mostrarlas en su sitio web.
  • Vía plugin (automático): Utiliza un plugin de WordPress que pueda obtener automáticamente las Historias de Instagram e incrustarlas por ti.

Por qué la incrustación manual se queda corta para los principiantes

La incrustación manual requiere trabajar directamente con la API de Instagram, lo que implica crear aplicaciones para desarrolladores, gestionar tokens de acceso y escribir código personalizado.

Incluso los desarrolladores experimentados encuentran este proceso lento y propenso a romperse cuando Instagram actualiza su API. Para los principiantes, es aún más abrumador.

Además, Instagram cambia periódicamente los requisitos de su API. Esto significa que tu solución codificada manualmente podría dejar de funcionar sin previo aviso y requerir correcciones técnicas inmediatas.

La ventaja de Instagram Feed Pro

Instagram Feed Pro elimina todos los dolores de cabeza técnicos mediante el manejo de las conexiones API, actualizaciones y mantenimiento de forma automática.

instagram feed pro página de inicio

Con una calificación de 4,9/5 estrellas y más de 1 millón de usuarios, ha demostrado ser fiable y fácil de usar para principiantes. Estas son las características clave que hacen de Instagram Feed Pro la mejor opción para mostrar Instagram Stories:

  • No requiere programación: Sencilla configuración guiada en 3 pasos que funciona para principiantes.
  • Adaptación automática del tema: copia los colores de tu sitio web para que el contenido de Instagram se integre a la perfección con tu diseño.
  • Ligero y rápido: Código optimizado que no ralentizará la velocidad de carga de tu sitio web.
  • Muchas opciones de personalización: Controla los diseños, los colores, el diseño de los botones y mucho más a través de un personalizador en vivo.
editor de feeds en directo para el plugin instagram feed pro
  • Plantillas y temas fáciles: Copia al instante plantillas y temas para crear feeds de contenido de Instagram con diseños únicos.
  • Adaptable a móviles: Las historias se ven perfectamente en todos los dispositivos sin necesidad de configuración adicional.
  • Actualizaciones automáticas: El plugin gestiona todos los cambios de la API de Instagram y las actualizaciones de seguridad por ti.
  • Visualización de Historias con un solo clic: Los visitantes pueden abrir y consultar Historias directamente en tu sitio web.

Además de mostrar historias de Instagram, puedes utilizar esta increíble herramienta para mostrar tus publicaciones de Instagram, carretes, feeds de hashtags y mucho más.

¿Listo para integrar tu sitio web con Instagram? Puedes empezar con Instagram Feed Pro aquí.

Paso a paso: Cómo mostrar Instagram Stories en tu página web

Ahora te guiaré a través del proceso completo para agregar Instagram Stories a tu sitio web de WordPress.

Cada paso es sencillo y está diseñado para principiantes, por lo que no es necesario tener experiencia técnica para seguirlo.

Paso 1: Descargar e instalar Instagram Feed Pro

En primer lugar, tendrás que conseguir el plugin Instagram Feed Pro aquí y descargarlo en tu ordenador....

Instale y active el plugin (consulte nuestra guía para principiantes) en su sitio web WordPress.

Una vez activado, verás un nuevo elemento de menú llamado Instagram Feed en tu panel de WordPress.

Paso 2: Crea tu primer feed de Instagram Stories

Para crear tu feed de Instagram Stories, puedes seguir el sencillo proceso de configuración guiada del plugin.

En primer lugar, ve a Instagram Feed " All Feeds desde el panel de control de WordPress y haz clic en el botón Añadir nuevo.

crear nuevo feed instagram feed pro

El plugin te pedirá que elijas el tipo de feed de Instagram que quieres mostrar en tu sitio. Verás opciones para la línea de tiempo del usuario, hashtag público y publicaciones etiquetadas.

Para este tutorial, seleccione el tipo de feed Línea de tiempo del usuario y, a continuación, haga clic en Siguiente para continuar.

selecciona tu tipo de feed instagram feed pro

Paso 3: Conecta tu cuenta de Instagram

Al conectar tu perfil de Instagram, tu feed puede obtener automáticamente tu contenido más reciente de Stories para tu sitio web.

Necesitarás una cuenta de Instagram de empresa o de creador para mostrar Stories en tu sitio web.

Haga clic en el botón Añadir nuevo para empezar a conectar su cuenta.

añade una fuente para tu nuevo feed de instagram

A continuación, el plugin te pedirá que elijas tu tipo de conexión a Instagram: Business Basic o Business Advanced.

  • La conexión básica es perfecta para mostrar tus publicaciones habituales de Instagram.
  • La conexión avanzada desbloquea funciones adicionales como feeds de hashtags, Stories y publicaciones etiquetadas.

Para esta guía, seleccione la conexión Avanzada y haga clic en el botón Conectar.

elige el tipo de conexión a instagram

Ahora haz clic en el botón Conectar con Facebook, que abrirá Facebook en tu navegador web para completar el proceso de conexión.

conecta tu cuenta de facebook para recibir hashtags

Facebook te pedirá acceso de sólo lectura a la información de tu cuenta. El complemento solo podrá ver tu contenido y no podrá realizar ningún cambio en tu cuenta, por lo que su uso es completamente seguro.

Haz clic en Continuar en la ventana emergente de Facebook para conceder los permisos necesarios.

botón de continuar en facebook

Después de conectarte, Facebook te redirigirá de nuevo a tu sitio web de WordPress, donde podrás confirmar esta cuenta como fuente de tu feed de Instagram Stories.

Seleccione las cuentas que desea conectar y haga clic en Añadir.

añade tus cuentas conectadas a instagram feed pro

Por último, puede hacer clic en Siguiente para completar el proceso de conexión.

selecciona tu cuenta de instagram para conectarte

De este modo, habrás conectado correctamente tu cuenta de Instagram y podrás reutilizar esta fuente para futuros feeds sin salir de tu sitio web.

Paso 4: Elige el diseño de tu feed de Instagram

Como tu feed de Instagram Stories copia automáticamente el diseño de tu sitio web, se verá genial de inmediato.

En caso de que quieras publicar contenido habitual de Instagram con tus historias, también puedes importar un tema.

Cada uno de estos temas ofrece un diseño único para tu feed de historias de Instagram:

  • Por defecto
  • Moderno
  • Muro social
  • Esquema
  • Solapamiento

Seleccione el tema que prefiera y haga clic en Siguiente.

selecciona tu tema de instagram

A continuación, puedes cambiar el diseño de tus publicaciones habituales de Instagram con una plantilla.

Como antes, elija la plantilla que mejor se adapte al estilo de su sitio web y haga clic en Siguiente para continuar.

plantilla feed instagram

Después de seleccionar tu plantilla, Instagram Feed Pro abrirá el personalizador en vivo en tu sitio web. En el lado izquierdo, encontrarás opciones para personalizar el diseño de tu feed, la combinación de colores, el encabezado y mucho más.

El lado derecho muestra una vista previa en vivo de tu feed de Stories, para que puedas ver tus cambios en tiempo real a medida que realizas ajustes.

live feed editor for instagram feed pro story feed

Dado que aquí hay un montón de opciones de personalización que podrían no ser relevantes para las historias de Instagram, te mostraré rápidamente algunas opciones principales:

Cambia el diseño de tus entradas

Si haces clic en Diseño, tendrás la opción de cambiar cómo aparecerán tus fotos y vídeos de Instagram en tu sitio web.

Puede elegir entre 4 diseños diferentes: Grid, Carousel, Masonry y Highlight.

opciones de diseño para tu feed de historias de instagram

¿Sólo quieres incrustar tu Historia de Instagram?

Puede desplazarse hasta aquí y establecer el número de entradas visibles en 0.

cambiar el número de publicaciones para el feed de historias de instagram

Después de realizar los cambios, haga clic en Guardar antes de continuar.

También puede hacer clic en el pequeño botón Personalizar de la parte superior izquierda para volver a las opciones principales de personalización.

volver a las principales opciones de personalización de su feed

Personaliza el pie de foto de tu publicación de Instagram

Si abres Publicaciones " Pie de foto en el menú de la izquierda, podrás cambiar el pie de foto que aparece debajo de las publicaciones de Instagram.

Aquí puede cambiar la longitud de la leyenda visible, así como el tamaño y el color de la fuente.

edita el pie de foto de tus publicaciones de instagram

Como antes, recuerda guardar los cambios después.

Edita la cabecera de tu historia de Instagram

También puedes personalizar el encabezado de tu feed de Instagram.

Aquí puede cambiar el diseño de la cabecera y su tamaño.

formas de editar la cabecera de tu feed de instagram

Es más, también puedes seleccionar un avatar personalizado en lugar de tu foto de perfil de Instagram.

Al igual que antes, guarda los cambios y vuelve a las opciones principales de personalización.

Como puedes ver, la personalización es bastante sencilla. También puedes personalizar otros elementos, como la combinación de colores, el diseño de los botones, los iconos y mucho más.

Cuando estés satisfecho con el aspecto de tu feed de Instagram Stories, haz clic en Guardar para finalizar el diseño.

Paso 5: Incrusta tu feed de Instagram Stories

Dado que Instagram Feed Pro es tan fácil de usar, puedes incrustar fácilmente tu feed de Stories sin necesidad de complicados códigos de incrustación o conocimientos técnicos.

Para empezar, haga clic en el botón Incrustar situado en la parte superior del editor.

empieza a incrustar tu feed de instagram desde el editor

El plugin te mostrará todas las opciones de incrustación en una ventana emergente, que incluye 2 formas de mostrar tu feed de Instagram Stories:

  • Añadir a una página: Perfecto para páginas dedicadas a redes sociales o páginas Acerca de
  • Añadir a un widget: Ideal para mantener las Historias visibles en todo tu sitio web.

Para este ejemplo, voy a ir con una página de WordPress para las Historias de Instagram.

Por lo tanto, puede proceder haciendo clic en la opción Añadir a una página.

añade el feed de historias de instagram a una página de tu sitio web

El plugin le mostrará todas las páginas de WordPress de su sitio web.

Seleccione la página en la que desea que aparezcan sus Historias y haga clic en Añadir.

elige una página donde quieras mostrar instagram

Esto abrirá esa página en el editor de bloques de WordPress. Ahora puedes incrustar tus Stories usando el cómodo bloque Instagram Feed.

Haga clic en el icono más (+) del editor para añadir un nuevo bloque de contenido.

añadir nuevo bloque wordpress

Utiliza la barra de búsqueda para buscar "instagram" y selecciona el bloque Instagram Feed en los resultados.

El bloque mostrará automáticamente tu feed de Instagram Stories recién creado.

incrustar página de feed de instagram

Haz clic en Publicar para que tu contenido de Instagram aparezca en tu sitio web.

Después, puedes abrir la página y comprobar cómo se verá tu contenido de Instagram para tus visitantes.

tu feed de instagram en tu sitio web

Si tienes una Historia de Instagram activa ahora mismo, solo tienes que hacer clic en tu foto de perfil para verla, ahí mismo, en tu página web.

echa un vistazo a tu feed de instagram mostrado en tu página web

Las mejores prácticas de Instagram Stories para tu sitio web

Conseguir que tus Stories se muestren correctamente es solo el principio. Para maximizar la participación y obtener los mejores resultados de tus Historias incrustadas, hay estrategias específicas que funcionan mejor que otras.

He probado diferentes enfoques con sitios web reales y he descubierto que estas prácticas consiguen sistemáticamente una mayor participación de los usuarios y un mayor crecimiento en las redes sociales.

  • Pruebe a colocar Historias cerca de la parte superior de su página de inicio o de la página Acerca de para ayudar a sus visitantes a hacerse una idea más clara de su marca.
  • La colocación en la barra lateral mantiene tus Stories visibles en varias páginas, lo que es perfecto para blogs o sitios web con mucho contenido.
  • Para las empresas de servicios, recomiendo incluir historias con testimonios de clientes en la página de contacto o de servicios para aumentar las conversiones.
  • Los sitios de comercio electrónico se benefician de colocar Historias en las páginas de productos para mostrar artículos en uso o testimonios de clientes.
  • Para que tu feed de Stories siga siendo atractivo, intenta publicar nuevas Stories al menos 2 o 3 veces por semana. Una publicación constante garantiza que tu sitio web siempre tenga contenido fresco.
  • Considere la posibilidad de crear historias pensadas específicamente para los visitantes de su sitio web. El contenido entre bastidores, los consejos rápidos y los artículos sobre clientes funcionan especialmente bien.

Empieza hoy mismo a mostrar tus Instagram Stories

Añadir Instagram Stories a tu sitio web de WordPress es una de las formas más sencillas de aumentar el engagement y crear conexiones más fuertes con tus visitantes.

Los visitantes de tu sitio web pueden ver ahora tus contenidos más actuales y conectar fácilmente contigo en Instagram, creando una valiosa interacción entre plataformas.

Con Instagram Feed Pro, puedes tener tus Historias mostrándose maravillosamente en tu sitio en sólo 10-15 minutos.

Y recuerde, la clave del éxito con Historias incrustadas es la coherencia y la colocación estratégica.

¿Listo para empezar? ¡ Consigue tu copia de Instagram Feed Pro hoy mismo!

¿Quieres más formas de aprovechar Instagram? Echa un vistazo a esta guía sobre las formas de utilizar Instagram para tu negocio.

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.