Cómo añadir un feed de redes sociales a Framer (sin código)

Ahora puedes añadir un feed de redes sociales en vivo, reseñas de Google y UGC a cualquier sitio Framer arrastrando un componente desde el panel Insert. Sin código personalizado, sin depender de un desarrollador.

Este es el problema: un sitio Framer puede lucir impecable y aun así perder el trato. Un diseño pulido dice “somos profesionales.” No dice “gente real confía en nosotros.”

Antes, cerrar esa brecha significaba pegar JavaScript en un bloque de Custom Code y rezar para que sobreviviera al próximo rediseño. Los clientes no técnicos odiaban tocarlo, y una pegada mal hecha podía romper toda la página.

EmbedSocial acaba de cerrar esa brecha con el componente EmbedSocial en el Framer Marketplace, y este artículo te guía paso a paso, desde tu primera cuenta de EmbedSocial hasta un widget publicado.

Por qué los sitios Framer estáticos pierden ventas

Los visitantes deciden si confían en un negocio en cuestión de segundos, y buscan una sola cosa: la prueba de que alguien más ya asumió el riesgo.

Un sitio sin reseñas, sin feed social y sin clientes visibles se lee como no probado, aunque el diseño sea impecable. Las agencias sienten esta presión con más fuerza, porque el sitio de un cliente tiene que convertir desde el primer día, no eventualmente.

En cambio, un feed de redes sociales en vivo y reseñas reales de Google le dicen a un visitante, en medio segundo, que este negocio es real y que a otros les gusta.

Para una visión más amplia de cómo funciona la prueba social más allá de Framer, consulta nuestra guía sobre las mejores herramientas de prueba social.

Plugin de Framer vs. componente de Framer: cuál es la diferencia

Framer tiene dos sistemas distintos para extender un sitio, y es fácil confundirlos. Entender esto es importante, porque cambia dónde buscarás EmbedSocial.

Dónde vive cada uno en la interfaz de Framer

Un plugin de Framer vive en su propio panel lateral. Lo abres, ejecutas una acción y lo cierras. No se coloca en tu canvas como un elemento de diseño.

Un componente de Framer aparece directamente en el panel Insert, junto al texto, las imágenes y los stacks. Lo buscas, lo arrastras a tu página y lo estilizas como cualquier otra capa.

Por qué EmbedSocial se distribuye como componente, no como plugin

EmbedSocial se distribuye como componente porque ese es el formato que se comporta como un verdadero elemento de diseño: redimensionable, arrastrable y visible directamente en el canvas.

Un plugin implicaría salir de tu página para ejecutar una herramienta aparte. Un componente se queda donde ya estás trabajando, lo que resulta más rápido para las agencias que construyen varias páginas por semana.

Qué es el componente de EmbedSocial (y dónde encontrarlo en el Framer Marketplace)

El componente widget de EmbedSocial aparece bajo Components > Embeds en el Framer Marketplace, creado y mantenido por el equipo de EmbedSocial.

Tras pulsar ‘Copy Component’, solo tienes que pegarlo en tu proyecto de Framer.

También puedes buscar “EmbedSocial” desde el panel Insert de cualquier proyecto Framer y el tile aparecerá, del mismo modo que Cal.com, Intercom y Hubspot aparecen en sus categorías.

Sin embargo, antes de copiarlo o arrastrarlo a una página, necesitas algo de EmbedSocial: un widget ref. Así lo obtienes.

Configura primero tu widget de EmbedSocial

El componente de Framer solo muestra un widget que ya has creado en EmbedSocial. Tres pasos rápidos te llevan desde cero hasta un widget ref.

Paso 1: Crea tu cuenta de EmbedSocial

Regístrate para una cuenta de prueba de EmbedSocial. También puedes echar un vistazo a nuestro plan gratuito, que admite una fuente de Google Business Profile con un badge de reseñas que muestra cinco reseñas aleatorias.

Nota: También puedes conectar una fuente de Instagram, TikTok o Facebook.

Paso 2: Conecta tu Google Business Profile, Instagram, TikTok u otras fuentes

En ‘Sources’, conecta la fuente que quieras mostrar: tu Google Business Profile para reseñas, tu cuenta de Instagram o TikTok para un feed, o varias fuentes a la vez para un muro combinado.

No necesitas ninguna API key ni cuenta de desarrollador. EmbedSocial mantiene las integraciones API oficiales, así que conectar una fuente es un inicio de sesión, no un proyecto de configuración.

Paso 3: Personaliza tu widget y copia tu widget ref

Cuando tus fuentes estén conectadas, entra en la sección ‘Widgets’ para generar y personalizar tu nuevo widget con nuestro avanzado AI widget builder.

El AI widget builder resuelve la mayor parte con un prompt: describes los colores de tu marca, las tipografías o el layout, y aplica los cambios. El widget es totalmente responsive, así que se adapta automáticamente a los breakpoints de móvil, tablet y escritorio de Framer sin configuración extra.

Cuando termines, abre la pestaña ‘Embed’ del widget y copia el valor data-ref. Esa cadena es tu widget ref. Guárdala a mano, es la única información que Framer necesita de ti.

Añade el componente de EmbedSocial a tu sitio Framer

Con un widget ref copiado, instalarlo en Framer toma tres pasos y ningún editor de código.

Paso 1: Pega el componente en tu proyecto Framer

Es sencillo: abre tu proyecto Framer y pulsa pegar para añadir el componente en cualquier lugar de la página. Después puedes moverlo y colocarlo donde quieras en el canvas.

Paso 2: Pega tu widget ref

Selecciona el componente y busca el campo Widget Ref en el panel de propiedades a la derecha. Pega el valor que copiaste de EmbedSocial.

Paso 3: Previsualiza y publica

Haz clic en ‘Preview’ (el botón de play) en la parte superior para confirmar que tu feed o tus reseñas cargan correctamente, ajusta el alto y el ancho a tu layout, y publica. Ese es todo el proceso.

El componente no se limita a un solo tipo de contenido. Renderiza el widget al que lo apuntes. Así se ve con las fuentes que la gente más pregunta.

Qué puedes añadir a tu sitio Framer

Elegí tres plantillas en vivo por cada fuente para que veas exactamente cómo queda en la página. Copia el widget ref de cualquiera de ellas y se coloca en el componente de Framer igual que el resto.

Añade reseñas de Google a tu sitio Framer

Muestra tu puntuación en estrellas, el número de reseñas y las reseñas individuales con fotos y nombres, extraídas en vivo de tu widget de reseñas de Google y sincronizadas aproximadamente cada 10 minutos.

Es el generador de confianza más rápido en un sitio Framer: una puntuación real junto a nombres reales hace más por un visitante que llega por primera vez que otro párrafo de copy de marketing.

Ver plantilla: Google Reviews Slider

Añade feeds de Instagram y TikTok a tu sitio Framer

Muestra tus últimos posts, reels o vídeos de TikTok en un grid, carrusel o layout con autoplay, impulsados por los mismos motores del widget de Instagram y del widget de TikTok que se usan en las demás integraciones de EmbedSocial.

Un feed en vivo indica que el negocio está activo hoy, no solo cuando se construyó el sitio. Es útil tanto en homes como en páginas de portafolio.

Ver plantilla: Instagram Feed Widget

Añade testimonios y UGC shoppable a tu sitio Framer

Combina reseñas de varias plataformas en un único muro de testimonios, o etiqueta productos dentro de posts UGC con el widget shoppable para convertir el feed en una galería shoppable.

Ver plantilla: Testimonial Wall

Método antiguo con código personalizado vs. el nuevo componente

Si ya has usado EmbedSocial en Framer, seguramente pegabas un script en un bloque de Custom Code. Así se compara con el componente.

	Custom code (antiguo)	Componente (nuevo)
Configuración	Pegar JavaScript en un bloque Embed o Custom Code	Copiar el componente o arrastrarlo desde el panel Insert
Edición	Requiere reabrir el bloque de código	Se edita visualmente en el panel de propiedades
Descubribilidad	Requiere saber que el código de embed existe	Buscable en el panel Insert
Ideal para	Personalización HTML completa	Configuración rápida y sin código

Ambos métodos siguen funcionando. El enfoque de custom code sigue disponible si necesitas más control sobre la ubicación. Pero para la mayoría de los proyectos, el componente es más rápido y más difícil de romper.

Conclusión: Instala el componente de EmbedSocial y convierte tu próximo sitio Framer en prueba

Un sitio Framer bien diseñado sigue necesitando evidencia de que hay clientes reales. El componente de EmbedSocial te lleva allí sin una sola línea de código, desde la creación de la cuenta hasta un widget publicado en minutos, no en un sprint de desarrollo.

Busca “EmbedSocial” en el panel Insert de tu próximo proyecto Framer y comprueba qué hace un feed de redes sociales en vivo o una fila de reseñas reales de Google por una página que antes era estática. También puedes encontrarlo en este enlace.