Cómo insertar un feed de Instagram en Webflow y dejar de publicar contenido duplicado

¿Sigues subiendo manualmente el contenido de Instagram a Webflow? Publicas en Instagram, luego abres Webflow y repites todo el proceso.

Cada publicación de Instagram se ha convertido en una tarea más para Webflow.

¡Hay una forma mejor!

Integrar un feed de Instagram mediante un widget puede automatizar todo el proceso por ti. Publica una vez en Instagram y aparecerá automáticamente en tu sitio de Webflow. Olvídate de sincronizaciones manuales, de copiar pies de foto o de contenido desactualizado. Configúralo en 15 minutos y no vuelvas a preocuparte.

Esta guía te explica paso a paso cómo añadir un feed de Instagram en tiempo real a tu sitio de Webflow. Aprenderás qué widget elegir, cómo personalizarlo, dónde pegar el código de integración y cómo solucionar los problemas más comunes que suelen romper los feeds de Instagram en Webflow.

4 métodos para integrar feeds de Instagram en Webflow

Tienes cuatro opciones para mostrar contenido de Instagram en Webflow:

• Carga manual (control total, máximo esfuerzo)
• Integración nativa de Instagram (sin cuentas adicionales, diseño básico)
• Automatización con Zapier (automatización de flujos de trabajo mediante conexión API; ideal para equipos que ya usan el ecosistema de Zapier)
• Servicios de widgets (automatización de "configurar y olvidar" con mantenimiento mínimo)

El mejor método es utilizar servicios de widgets, que sincronizan automáticamente el contenido de Instagram con Webflow sin intervención manual, actualizando los feeds cada 24-48 horas según los programas de caché. Esto elimina el flujo de trabajo de doble publicación que requieren las cargas manuales, manteniendo el contenido del sitio al día sin mantenimiento constante.

¿Qué necesitas para insertar feeds de Instagram en Webflow? Requisitos clave para configurar el widget

Necesitas un plan de Webflow con acceso a código personalizado (planes de sitio de pago o planes de Workspace específicos), una cuenta pública de Instagram, 15-20 minutos para la configuración y, opcionalmente, una cuenta en un servicio de widgets (gratuita o de pago).

Estos requisitos aseguran que el elemento de inserción funcione y que el widget pueda extraer tu contenido de Instagram a través de la API sin barreras de autenticación.

Antes de empezar, verifica que tienes todo esto.

Acceso a código personalizado de Webflow (obligatorio)

El elemento de inserción solo funciona en:

• Planes de sitio de pago: CMS, Business o Ecommerce
• Planes de Workspace: Core, Growth, Agency o Freelancer

Las cuentas gratuitas de Webflow no pueden añadir código personalizado. Revisa tu plan en Configuración del proyecto → Planes y facturación. Si tienes un plan gratuito, deberás actualizarlo para que los códigos de inserción de widgets funcionen.

Cuenta pública de Instagram (o de empresa/creador)

Los servicios de widgets extraen contenido a través de la API de Instagram. Las cuentas privadas bloquean el acceso a la API, por lo que tu feed no se cargará.

Si necesitas mantener tu cuenta personal privada:

• Crea una cuenta pública independiente para el contenido de tu negocio
• O cambia a una cuenta de Instagram para empresas o creadores (Configuración → Cuenta → Cambiar a cuenta profesional)

Las cuentas de empresa desbloquean funciones adicionales, como el etiquetado de ubicación y las estadísticas, que son compatibles con algunos servicios de widgets.

Cuenta de servicio de widgets (gratuita o de pago)

Necesitarás una cuenta en un servicio de widgets para generar el código de inserción.

La mayoría ofrece pruebas gratuitas o planes sin costo con funciones básicas:

Elige SociableKIT para feeds básicos gratuitos, Elfsight para una gran variedad de plantillas y facilidad de uso, EmbedSocial para moderación de contenido y publicaciones con compra directa, o Curator para feeds multiplataforma que combinan Instagram, X (antes Twitter) y Facebook.

Cada servicio equilibra funciones, precios y complejidad de configuración; elige la herramienta según tu caso de uso específico en lugar de irte siempre a la opción más popular. El servicio de widget que elijas depende de tres factores: presupuesto, las funciones que necesitas y cuánto control quieres tener sobre la moderación del contenido.

Para esta guía, usaremos Elfsight como ejemplo porque ofrece la experiencia de configuración más fluida.

5 pasos para insertar un feed de Instagram en Webflow mediante un widget

Insertar un feed de Instagram en Webflow requiere crear una cuenta en el widget, personalizar el diseño y estilo del feed para que combine con tu marca, copiar el código generado, pegarlo en el elemento Embed de Webflow dentro de un contenedor y publicar en un dominio real para verificar que se visualice correctamente.

Todo el proceso toma entre 15 y 20 minutos y requiere un plan de pago de Webflow con acceso a código personalizado. Los planes gratuitos no pueden usar el elemento Embed que permite la integración de widgets.

Paso 1: Crea tu widget de feed de Instagram para insertarlo en Webflow

Crea una cuenta en elfsight.com y selecciona Instagram Feed en el menú de aplicaciones.

Luego, elige una plantilla (cuadrícula, carrusel o mosaico) y conecta tu fuente de Instagram: ya sea tu nombre de usuario (por ejemplo, @webflow), un hashtag específico (por ejemplo, #webflow) o una ubicación. Este paso inicial define qué contenido extraerá el widget y cómo se mostrará visualmente antes de que ajustes los detalles de estilo.

Elige tu plantilla

Las plantillas determinan el diseño base:

• Cuadrícula: El diseño clásico de Instagram, ideal para galerías de fotos y portafolios
• Carrusel: Un pase de diapositivas que alterna publicaciones, funciona muy bien en secciones principales o barras laterales
• Mosaico: Diseño estilo Pinterest con alturas variables, genial para contenido mixto (fotos y videos)
• Tarjetas con encabezado: Incluye la información del perfil de Instagram sobre el feed

Elige la plantilla que mejor encaje con el lugar donde vas a poner el feed. Para las secciones principales de la página de inicio, el slider va genial. Para las páginas de portafolio, la cuadrícula. Y para las barras laterales del blog, las tarjetas con encabezado.

Conecta tu fuente de Instagram

En la pestaña Fuentes, introduce tu fuente de Instagram directamente; no hace falta conectar ninguna cuenta:

1. Nombre de usuario de la cuenta: Escribe @tuinstagram para obtener todas las publicaciones públicas de una cuenta específica
2. Hashtag: Escribe #tuhashtagdemarca para recopilar publicaciones que usen esa etiqueta (ideal para campañas de contenido generado por el usuario)
3. Ubicación: Escribe el nombre de un lugar (por ejemplo, "California" o "Times Square") para obtener publicaciones etiquetadas con esa ubicación

Ejemplo: Si tienes una cafetería, podrías usar #NombreDeTuCafetería para mostrar las fotos de tus clientes. Si quieres mostrar tu propio trabajo, usa el nombre de usuario de tu cuenta.

La cuenta o el hashtag deben ser públicos. Las cuentas privadas no devuelven ninguna publicación, aunque sean tuyas.

Después, haz clic en Crear feed para generar el widget. Este cargará tus publicaciones más recientes al instante para que puedas previsualizar el diseño.

Paso 2: Personaliza tu widget de feed de Instagram para integrarlo en Webflow

Una vez creado el widget, navega por las pestañas de personalización del panel izquierdo:

• La pestaña Diseño controla los elementos estructurales (columnas, filas, espacios y visibilidad del encabezado)
• La pestaña Publicación determina qué detalles de la publicación se muestran (me gusta, comentarios, pies de foto)
• La pestaña Estilo ajusta la estética visual (colores, efectos de superposición, fondos)

Estas personalizaciones garantizan que el widget se integre a la perfección con el sistema de diseño de tu sitio en Webflow, en lugar de parecer un elemento externo evidente.

Cuando estés satisfecho con el aspecto de la vista previa, pasa al siguiente paso.

Paso 3: Obtén el código de inserción para tu widget de feed de Instagram en Webflow

Tras personalizar tu widget, necesitarás el código de inserción para añadirlo a Webflow.

Haz clic en el botón "Publicar" en la parte superior derecha del editor de Elfsight. Esto guardará tus ajustes y activará el widget.

Aparecerá una ventana emergente con tu código de instalación. Se ve más o menos así:

<!-- Elfsight Instagram Feed | Untitled Instagram Feed -->
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-a1b2c3d4-e5f6-7890-abcd-ef1234567890" data-elfsight-app-lazy></div>

Haz clic en "Copy code" para copiarlo al portapapeles.

Notas importantes sobre este código:

• La <script> etiqueta carga el script de la plataforma Elfsight (se requiere una vez por página)
• La
   etiqueta con el ID de clase único es tu widget específico
• Este código es exclusivo de tu widget; si creas varios widgets, cada uno tendrá un ID diferente
• El código contiene todos tus ajustes de personalización (colores, diseño, filtros)

Ten este código a mano. Lo pegarás en Webflow en el siguiente paso.

Opcional: Si quieres compartir el feed mediante un enlace directo o solicitar la instalación gratuita al equipo de soporte de Elfsight, esas opciones aparecen en la misma ventana emergente. Para esta guía, utilizaremos el método del código de inserción.

Paso 4: Inserta tu feed de Instagram en Webflow con el elemento Embed

Ahora que tienes el código de inserción, es hora de añadirlo a tu sitio de Webflow.

Abre tu Webflow Designer

Inicia sesión en Webflow y abre el proyecto donde quieres el feed de Instagram.

Navega hasta la página específica (por ejemplo, la página de inicio, la página de contacto o la de quiénes somos).

Añade el elemento Embed

Así es como se añade el elemento de inserción a tu página:

1. Haz clic en el icono + (Add Elements) en la barra lateral izquierda
2. Desplázate hasta la sección Components
3. Arrastra “Code Embed” al lienzo, justo donde quieras que aparezca el feed

Ubicaciones habituales:

• Sección principal de la página de inicio (usa la plantilla de control deslizante)
• Sección "Nuestro trabajo" de la página Acerca de (usa la plantilla de cuadrícula)
• Pie de página (usa una cuadrícula pequeña, 3 columnas × 1 fila)
• Barra lateral del blog (usa la plantilla de tarjetas con encabezado)

No sueltes el elemento Embed directamente en la página. Envuélvelo en un contenedor o sección para que se adapte bien a los dispositivos.

Estructura estándar:

• Sección (fondo de ancho completo)

• Contenedor (centrado, ancho máximo)

• Encabezado (opcional: "Síguenos en Instagram")
• Elemento Embed (pega el código aquí)

Esto garantiza que el feed se mantenga centrado y se adapte a cualquier pantalla.

Con el elemento Embed seleccionado:

1. La ventana del editor de código Embed se abre automáticamente
2. Pega tu código de Elfsight (el que copiaste en el paso 3)
3. Activa el ajuste de línea en la parte inferior del editor (opcional, facilita la lectura del código)
4. Haz clic en Guardar y cerrar

Asegúrate de pegar el código completo, es decir, tanto la etiqueta <script> COMO la etiqueta

Preguntas frecuentes

¿Se pueden integrar Historias y Reels de Instagram en los feeds de Webflow?

Sí, la mayoría de los servicios de widgets admiten Historias, Reels y publicaciones en carrusel de Instagram, además de las fotos estándar. Elfsight, EmbedSocial y SociableKIT gestionan los formatos modernos de Instagram sin problemas: los vídeos se reproducen automáticamente, los carruseles permiten deslizar entre varias imágenes y los Reels se muestran en su formato vertical.

¿Se actualizarán automáticamente los feeds de Instagram integrados en Webflow?

Sí, los servicios de widgets se sincronizan automáticamente en intervalos basados en sus programas de caché. Elfsight se actualiza cada 48 horas, por lo que las nuevas publicaciones de Instagram aparecerán en tu sitio de Webflow en un plazo de 2 días sin que tengas que hacer nada. SociableKIT ofrece tanto auto-actualización en sus planes de pago como un botón manual de "Solicitar sincronización" en todos los planes para actualizaciones inmediatas. El feed obtiene las nuevas publicaciones a través de la API de Instagram, así que no requiere trabajo manual.

¿Se puede filtrar qué publicaciones de Instagram aparecen en el embed de Webflow?

Sí, todos los servicios de widgets importantes ofrecen herramientas de filtrado y moderación. Puedes mostrar u ocultar publicaciones por palabra clave (ocultar publicaciones que contengan "sorteo" o "concurso"), por hashtag (mostrar solo publicaciones etiquetadas con #TuMarca, incluso si extraes contenido de toda tu cuenta), por rango de fechas (solo publicaciones posteriores al 1 de enero de 2025) o mediante aprobación manual, donde seleccionas individualmente qué publicaciones se muestran.

¿Integrar un feed de Instagram ralentiza tu sitio de Webflow?

El impacto es mínimo si se configura correctamente. Los scripts de los widgets suelen añadir entre 50 y 100 KB y se cargan de forma asíncrona, lo que significa que no bloquean la carga de la página mientras se obtiene el contenido de Instagram. Un feed de Instagram bien optimizado debería añadir menos de 0,5 segundos al tiempo de carga de tu página, según Google PageSpeed Insights.