Cómo insertar un feed de Instagram en tu sitio web (Guía paso a paso)

Si tu sitio web sigue luciendo igual que hace tres meses, los visitantes lo notarán. Y una de las maneras más rápidas de solucionarlo sin modificar ni una sola línea de código es integrar directamente tu contenido de Instagram en tu sitio web.

Un feed de Instagram integrado cumple dos funciones a la vez: mantiene tu página de inicio o páginas de destino con un aspecto dinámico y ofrece a los visitantes pruebas sociales que pueden ver y explorar, no solo leer. El problema es que Instagram no lo facilita por sí solo. Aquí te explicamos qué funciona realmente y cómo configurarlo correctamente.

Respuesta rápida:

Para insertar un feed de Instagram en tu sitio web, puedes copiar el código de inserción de cada publicación y pegarlo en tu sitio web o conectar tu cuenta de Instagram a un agregador de redes sociales como TagembedLuego, elige si deseas mostrar las publicaciones por nombre de usuario, hashtag o mención, personaliza el diseño del widget y copia el código de inserción generado en tu CMS (WordPress, Shopify, Squarespace, Webflow, Wix o HTML simple). No se requiere configuración de desarrollador ni de API.

¿Cuáles son las ventajas de integrar un feed de Instagram en tu sitio web?

Antes de entrar en el cómo, conviene tener claro el por qué, porque eso determina qué método debes elegir.

Un feed de Instagram en directo en tu sitio web:

• Mantiene las páginas actualizadas automáticamente. Publica en Instagram y tu sitio web se actualizará sin que nadie toque el CMS.
• Genera confianza más rápido que las fotos de archivo. Publicaciones reales, clientes reales, momentos reales.
• Ofrece a los visitantes un motivo para permanecer más tiempo, especialmente en las páginas de productos, las páginas de destino y las páginas de inicio.
• Convierte tus seguidores de Instagram en tráfico web y viceversa, ya que la mayoría Widgets de feeds de redes sociales Enlace a la publicación original o a tu perfil.

Nada de eso sucede si te ves obligado a hacer capturas de pantalla de las publicaciones manualmente cada semana, que es por donde empieza la mayoría de la gente antes de darse cuenta de que no es escalable.

Las tres formas de integrar Instagram en un sitio web:

En realidad, solo hay tres rutas posibles, y cada una resuelve un problema diferente.

1. Incrustaciones nativas de Instagram (solo para publicaciones individuales)

Instagram te permite insertar una publicación o reel a la vez. Abre la publicación en tu ordenador, haz clic en el menú de tres puntos, selecciona «Insertar» y copia el código que aparece. Pégalo en un bloque HTML de tu sitio web.

Esto funciona bien si quieres insertar una publicación específica dentro de un artículo de blog. El problema surge cuando necesitas un feed completo, ya que no hay forma de mostrar varias publicaciones, filtrar por hashtag ni configurarlo para que se actualice automáticamente. Tendrías que volver aquí cada semana para cambiar manualmente los códigos de inserción. Además, es importante saber que las inserciones nativas cargan los scripts de seguimiento de Instagram en tu página, lo que puede complicar el cumplimiento del RGPD según tu audiencia.

2. API de gráficos de Instagram (créala tú mismo)

Para desarrolladores, API Graph de Instagram Te permite obtener datos de feeds directamente y crear una visualización totalmente personalizada. Obtienes control total sobre el diseño, pero también heredas el mantenimiento: actualizaciones de tokens, límites de velocidad, cambios de versión de la API y el trabajo de frontend para renderizarlo todo. Esta opción tiene sentido si tienes recursos de ingeniería disponibles y requisitos de diseño muy específicos. Para la mayoría de los equipos de marketing, es excesivo.

3. Un agregador de redes sociales (El punto medio práctico)

Aquí es donde terminan la mayoría de los sitios web, y con razón. Una herramienta como Tagembed Se conecta a Instagram, extrae automáticamente las publicaciones por perfil, hashtag o mención, y te ofrece un widget listo para usar que puedes personalizar e insertar en cualquier sitio web con una sola línea de código. No requiere gestión de tokens API, ni desarrolladores, y el feed se actualiza automáticamente en segundo plano.

Aquí te mostramos cómo se comparan los tres métodos:

Método	Uso recomendado	Esfuerzo técnico	Automatización
Integración nativa de Instagram	Presentar una sola publicación dentro de un blog o página.	Bajo (copiar y pegar)	Ninguno, actualizado manualmente
API de gráficos de Instagram	Sitios empresariales que requieren un diseño totalmente personalizado.	Alto, requiere un desarrollador	Completamente automatizado
Agregador de redes sociales (Tagembed)	Equipos de marketing, pequeñas empresas y la mayoría de los sitios web	Bajo, no se requiere código	Completamente automatizado

Paso a paso: ¿Cómo inserto un feed de Instagram usando...? Tagembed?

Aquí está el proceso real, de principio a fin.

Paso 1: Crea un Tagembed Cuenta

Regístrate para obtener una cuenta gratuita. No necesitas escribir código en ningún momento del proceso.

Paso 2: Añade Instagram como fuente.

Haz clic para crear un nuevo widget y elige Instagram como fuente. Tienes tres formas de obtener contenido:

• Por Handle – muestra publicaciones de un perfil específico de Instagram.
• Por Hashtag – Recupera publicaciones etiquetadas con un hashtag específico, útil para campañas o contenido generado por el usuario.
• Por mención – Muestra publicaciones en las que se ha etiquetado tu cuenta, lo cual funciona bien para mostrar el contenido de los clientes.

Una cosa que vale la pena señalar desde el principio: los perfiles públicos funcionan sin ninguna configuración adicional, pero si la cuenta de la que está extrayendo es privada, debe cambiarse a un Creador o cuenta de negocios y conéctate correctamente para que tus publicaciones aparezcan. De todos los problemas de configuración que la gente suele encontrar, este es el más común, y rara vez se trata de un error. Si tu feed aparece vacío justo después de conectarte, verifica tu tipo de cuenta antes que nada.

Paso 3: Personalizar el diseño del feed

Una vez que su fuente esté conectada, obtendrá una vista previa en vivo que podrá ajustar. Elija entre cuadrícula, carrusel, control deslizante, mampostería o un muro social El diseño depende de dónde lo coloques. También puedes controlar:

• Número de publicaciones mostradas
• Número de columnas y filas
• Colores, fuentes y espaciado que coincidan con su marca.
• Si los subtítulos, los "me gusta" o los nombres de usuario son visibles
• Configuración de moderación, para que puedas aprobar u ocultar publicaciones específicas antes de que se publiquen.

Paso 4: Obtén el código de inserción.

Una vez que el widget tenga el aspecto deseado, haga clic en el botón Publicar. Seleccione la galería que prefiera y, a continuación, elija el diseño que desee entre las opciones disponibles. Haga clic en el botón «Generar código».

Paso 5: Pégalo en tu sitio web.

Una vez que hayas generado el código de inserción de Instagram, simplemente debes pegarlo en el panel de administración de tu sitio web. Sin embargo, los pasos exactos a seguir dependen de dónde se encuentre tu sitio, lo cual se explica a continuación.

Cómo agregar código de inserción de feed de Instagram en diferentes plataformas web:

Una vez que hayas generado tu código de inserción desde TagembedPuedes añadirlo a casi cualquier creador de sitios web o CMS. El proceso es prácticamente el mismo en todas partes: copia el código, busca un bloque de HTML personalizado o de inserción en tu plataforma, pégalo y publica.

1. Integrar el feed de Instagram en un sitio web HTML

Añadiendo un Publicación de feeds de Instagram en un sitio web HTML Es sencillo y funciona en prácticamente cualquier sitio estático. Sigue estos pasos para que el feed aparezca en tu página.

• Una vez configurado tu feed, haz clic en "Publicar" y, a continuación, elige "HTML" como plataforma.
• Haz clic en el botón "Copiar código" para copiar el código de inserción generado.
• Abre el archivo HTML de tu sitio web en un editor de texto y navega hasta la sección donde debería aparecer el feed.
• Pega el código y guarda el archivo.
• Recarga la página para ver la transmisión en directo.

2. Agregar el feed de Instagram al sitio web de Shopify

Las tiendas Shopify se benefician de los feeds de Instagram, especialmente en las secciones de productos y página de inicio, donde la prueba social se encuentra cerca del botón de compra. Aquí te mostramos cómo insertar un Feed de Instagram en Shopify sitio web.

• Haz clic en Publicar y elige Shopify como tu CMS, luego copia el código.
• Inicia sesión en tu panel de administración de Shopify y ve a la Tienda Online.
• Seleccione Temas y, a continuación, haga clic en Personalizar.
• En el panel izquierdo, seleccione Contenido personalizado.
• Añade un bloque Liquid personalizado y pega el código de inserción en él.
• Haga clic en Guardar.

3. Mostrar el feed de Instagram en un sitio web de WordPress

WordPress es la plataforma más común para este tipo de incrustación, y Tagembed ranuras a través del editor de bloques estándar. Estos son los pasos para agregar un Widget de Instagram para un sitio web de WordPress.

• Ve a Publicar y selecciona WordPress de la lista de plataformas, luego copia el código de inserción.
• Inicie sesión en su panel de administración de WordPress.
• Abre la página, publicación o sección donde quieras que aparezca el feed.
• Haz clic en el botón (+) Agregar bloque y elige HTML personalizado.
• Pega el código y haz clic en Actualizar.

4. Insertar el feed de Instagram en el sitio web de Elementor

Si estás creando páginas con Elementor, el feed se inserta a través de su widget HTML en lugar del editor estándar de WordPress. Este es el proceso para insertar un Widget de Instagram en un sitio web de Elementor.

• Haz clic en Publicar y selecciona "Otra" como plataforma, luego copia el código.
• Inicia sesión en tu sitio de Elementor y abre la página o entrada que deseas editar.
• En el editor de Elementor, busca el widget HTML o arrastra uno nuevo a la página.
• Pega el código de inserción en el widget HTML.
• Guarde sus cambios.

5. Integrar el feed de Instagram en el sitio web de Squarespace

Squarespace requiere que el código se coloque en un bloque de código dedicado en lugar de una sección de texto general. Siga estos pasos para Agregar feed de Instagram al sitio web de Squarespace correctamente.

• Haz clic en Publicar, elige Squarespace y haz clic en “Obtener código” para generar el código de inserción.
• Copie el código en su portapapeles.
• Inicia sesión en tu cuenta de Squarespace y navega hasta la página de destino.
• Edita la página y añade un nuevo bloque de contenido.
• Seleccione “Código” en las opciones del bloque y pegue el código de inserción.
• Guarde sus cambios.

6. Incluir el feed de Instagram en el sitio web de Webflow

Webflow renderiza los elementos incrustados en vivo dentro del Diseñador, para que puedas previsualizar la ubicación antes de publicar nada. Aquí te mostramos cómo configurar un Widget de Instagram en el sitio web de Webflow.

• Haz clic en Publicar y elige "Otro" como tu plataforma CMS.
• Establezca el ancho y la altura del widget y, a continuación, haga clic en Copiar código.
• Inicia sesión en tu panel de administración de Webflow y ve a la página que deseas editar.
• Haz clic en Agregar elemento, desplázate hasta "Insertar" y arrástralo a la página.
• Pega el código y guarda los cambios.

7. Insertar el feed de Instagram en el sitio web de Wix

Wix maneja las incrustaciones a través de su elemento iFrame en lugar de un bloque de código simple, lo que confunde a la gente la primera vez. Estos son los pasos a seguir para incluir el Feed de Instagram en Wix.

• Haz clic en Publicar, selecciona Wix como tu plataforma, ajusta el ancho y la altura, y copia el código.
• Inicia sesión en Wix y abre la página donde debería aparecer el feed.
• Haz clic en el botón '+Añadir', luego en 'Más' y selecciona 'HTML iFrame' entre las opciones de inserción.
• Pegue el código generado en el campo de código.
• Haz clic en 'Aplicar' para guardar.

8. Integrar el feed de Instagram en el sitio web de Weebly

El editor de Weebly utiliza su propio panel de inserción, separado de sus elementos de contenido estándar. Aquí le mostramos cómo agregar un Widget de Instagram para el sitio web de Weebly.

• Haz clic en Publicar, elige "Otro" como tu CMS, ajusta el ancho y la altura si es necesario y copia el código.
• Navega hasta la página de tu sitio Weebly donde debería aparecer el feed.
• Abre la opción 'Código incrustado' en el editor.
• Seleccione el elemento 'Cuadro HTML' y elija 'Editar HTML personalizado'.
• Pega el código y guarda.

9. Incluir el feed de Instagram en el sitio web de BigCommerce.

BigCommerce es una opción común para tiendas online, y el feed puede ir en una página independiente o directamente en una plantilla de tema. Sigue estos pasos para añadir un Widget de Instagram para la aplicación BigCommerce:

• Haz clic en Publicar, selecciona "Otra" como plataforma y copia el código.
• Inicia sesión en tu cuenta de BigCommerce.
• Para acceder a una página específica, vaya a Tienda > Páginas web, o a Tienda > Tema para la página de un producto o la página de inicio.
• Haz clic en Editar en la página y luego cambia al editor HTML (busca el botón “<>” o “Código fuente”).
• Pega el código, previsualízalo y publica la página.

10. Insertar el feed de Instagram en Google Sites

Google Sites tiene una opción de inserción dedicada integrada en su editor de páginas, lo que la convierte en una de las plataformas más sencillas de usar. Sigue estos pasos para Agregar feed de Instagram a los sitios de Google.

• Haz clic en Publicar y selecciona “Otra” como plataforma. Ajusta el ancho y la altura, y luego copia el código.
• Inicia sesión en Google Sites y abre la página que deseas editar.
• Haz clic en “Insertar” en el editor de páginas.
• Seleccione “Insertar código” y pegue el código.
• Guarde sus cambios.

11. Incluir el feed de Instagram en el sitio web de HubSpot

El editor de páginas de destino de HubSpot inserta el código de inserción en la configuración HTML del pie de página, en lugar de en un bloque de contenido visible. Este es el proceso.

• Haz clic en Publicar, selecciona "Otra" como plataforma y copia el código.
• Inicia sesión en HubSpot, ve a la sección de Marketing y abre Páginas de destino.
• Seleccione la página y haga clic en Editar.
• Vaya a Archivo > Configuración de página > Avanzado.
• Pega el código en el campo HTML del pie de página, guarda y publica.

12. Incrustar el sitio web de Discord de Instagram Reel

Discord no admite la inserción de contenido como lo hace un sitio web, por lo que las publicaciones aparecen como enlaces compartidos en lugar de una transmisión en vivo. Aquí tienes la solución.

• Ve a Instagram, busca la publicación, haz clic en los tres puntos y selecciona "Copiar enlace".
• Abre Discord y ve al servidor o canal donde quieras compartir.
• Pega el enlace en el cuadro de chat.
• Pulsa “Enter” para compartir la publicación.

13. Insertar el feed de Instagram en OpenCart

OpenCart gestiona las incrustaciones a través de su panel de Extensiones en lugar de un editor de páginas, ya que la mayoría de las páginas se generan desde plantillasEstos son los pasos.

• Inicia sesión en tu panel de administración de OpenCart.
• Ve a Extensiones > Extensiones > Contenido > Contenido HTML.
• Haz clic en Agregar nuevo y pega el código de inserción.
• Guárdalo y asígnalo a una plantilla, como la página de inicio, de producto o de categoría.
• Actualiza tu tienda para confirmar que la fuente de noticias está activa.

14. Insertar feed de Instagram en un sitio React

En un sitio web de React, el feed se inserta como un componente renderizado en lugar de un texto estático, ya que React no permite HTML sin formato por defecto. Aquí te mostramos cómo agregarlo.

• Copie el código de inserción de React/JavaScript desde el Tagembed .
• Abre tu proyecto React y pega el código dentro de un componente usando dangerouslySetInnerHTML.
• Agregue el componente a la página donde debe aparecer el feed.
• Guarda y ejecuta la aplicación para confirmar que se muestra el feed.

Independientemente de la plataforma que utilices, el proceso subyacente es el mismo: genera el código, busca un bloque de HTML personalizado, Código o Incrustar, pégalo y publica.

Insertar feed de Instagram: Historias de éxito reales

Aquí hay algunos ejemplos reales de sitios web y marcas que utilizan Tagembed para insertar feeds de Instagram. 

1. ORT Universidad de Uruguay

El Universidad ORT de Uruguay La universidad integró un muro de Instagram en tiempo real en su sitio web para mostrar la vida en el campus, los logros estudiantiles y los eventos. En lugar de usar imágenes estáticas, la universidad exhibió contenido social actualizado que le dio al sitio web una apariencia más dinámica y auténtica. Esto animó a los visitantes a explorar el sitio con más detenimiento, a la vez que ofreció a los futuros estudiantes una visión genuina de la cultura del campus.

“La incorporación de un feed de Instagram en directo hizo que nuestra página web se viera mucho más dinámica. Los futuros estudiantes ahora pueden ver la vida en el campus, los eventos y los logros en tiempo real, lo que hace que la experiencia sea mucho más atractiva.”

2. Funne

Con una transmisión en vivo de Instagram integrada en su sitio web, Diversión Se aseguró de que cada nueva publicación en Instagram actualizara automáticamente su presencia en la web. El resultado fue un sitio web con una apariencia siempre activa, que ofrecía contenido visual novedoso y reforzaba la confianza del cliente mediante la prueba social constante.

“En lugar de actualizar manualmente las imágenes cada pocas semanas, nuestra página web ahora se actualiza automáticamente con nuevo contenido de Instagram. Es una forma sencilla de mantener el sitio con un aspecto dinámico y moderno.”

Errores comunes que comete la gente:

Algunos aspectos que suelen causar problemas y que conviene revisar antes de asumir que algo está roto:

• Intentando insertar un perfil privado sin cambiar al modo Empresa/Creador. El feed simplemente aparecerá vacío o mostrará un error.
• Sobrecargar la página con demasiadas publicaciones a la vez Ralentiza el tiempo de carga y perjudica la experiencia móvil.
• Saltarse la moderación, especialmente con los feeds de hashtags o menciones, donde no controlas lo que se etiqueta.
• No se está probando en dispositivos móviles. Un feed que se ve genial en la versión de escritorio puede arruinar el diseño en pantallas más pequeñas si el widget no es adaptable.
• Olvidar comprobar las implicaciones del RGPD Si utilizas una inserción nativa y tienes visitantes en la UE, ten en cuenta que las cookies de seguimiento de Instagram se cargan con ella.

Puntos Clave

Insertar una sola publicación de Instagram es sencillo y no requiere ninguna herramienta. Incrustar Un feed en vivo y actualizado es un problema diferente, y ahí es donde un agregador adecuado demuestra su valía. Si desea tener control total y cuenta con desarrolladores disponibles, la ruta de la API Graph funciona. Para todos los demás, una herramienta como Tagembed Obtén un feed de Instagram totalmente personalizado y que se actualiza automáticamente en tu sitio web en pocos minutos, sin el mantenimiento que implica crearlo tú mismo.

Próximos pasos una vez que tu canal esté activo:

• Comprueba la velocidad de tu sitio web en Google PageSpeed ​​Insights para confirmar que el widget se carga de forma asíncrona y no retrasa el contenido principal.
• Prueba la fuente en dispositivos móviles, no solo en ordenadores de escritorio, ya que los problemas de diseño suelen aparecer primero allí.
• Establece reglas de moderación si utilizas un hashtag o un feed de menciones, para que no se cuelen publicaciones no relacionadas.