Comment ajouter un flux de réseaux sociaux à Framer (sans code)

Vous pouvez désormais ajouter un flux de réseaux sociaux en direct, des avis Google et du contenu UGC à n’importe quel site Framer en glissant un composant depuis le panneau Insert. Sans code personnalisé, sans mobiliser un développeur.

Voici le problème : un site Framer peut avoir un design impeccable et pourtant perdre la vente. Un design soigné dit “nous sommes professionnels.” Il ne dit pas “de vraies personnes nous font confiance.”

Auparavant, combler cet écart voulait dire coller du JavaScript dans un bloc Custom Code et espérer qu’il survive au prochain redesign. Les clients non techniques détestaient y toucher, et un mauvais collage pouvait casser toute la page.

EmbedSocial vient de combler cet écart avec le composant EmbedSocial dans le Framer Marketplace, et cet article vous guide étape par étape, de votre premier compte EmbedSocial à un widget publié.

Pourquoi les sites Framer statiques perdent des ventes

Les visiteurs décident s’ils font confiance à une entreprise en quelques secondes, et ils cherchent une seule chose : la preuve que quelqu’un d’autre a déjà pris le risque.

Un site sans avis, sans flux social et sans clients visibles se lit comme non testé, même si le design est superbe. Les agences ressentent cette pression le plus fort, parce que le site d’un client doit convertir dès le premier jour, pas plus tard.

À l’inverse, un flux de réseaux sociaux en direct et de vrais avis Google disent à un visiteur, en une demi-seconde, que cette entreprise est réelle et que d’autres personnes l’apprécient.

Pour une vue plus large sur le fonctionnement de la preuve sociale au-delà de Framer, consultez notre guide des meilleurs outils de preuve sociale.

Plugin Framer vs. composant Framer : quelle est la différence

Framer dispose de deux systèmes distincts pour étendre un site, et il est facile de les confondre. Bien comprendre cela compte, car cela change l’endroit où vous chercherez EmbedSocial.

Où chacun se trouve dans l’interface de Framer

Un plugin Framer vit dans son propre panneau latéral. Vous l’ouvrez, exécutez une action et le fermez. Il n’apparaît pas sur votre canvas comme un élément de design.

Un composant Framer apparaît directement dans le panneau Insert, aux côtés du texte, des images et des stacks. Vous le recherchez, le glissez sur votre page et le stylisez comme n’importe quel autre calque.

Pourquoi EmbedSocial est livré comme un composant, pas comme un plugin

EmbedSocial est livré comme un composant parce que c’est le format qui se comporte comme un vrai élément de design : redimensionnable, déplaçable et visible directement sur le canvas.

Un plugin obligerait à quitter votre page pour lancer un outil séparé. Un composant reste là où vous travaillez déjà, ce qui est plus rapide pour les agences qui construisent plusieurs pages par semaine.

Ce qu’est le composant EmbedSocial (et où le trouver dans le Framer Marketplace)

Le composant widget EmbedSocial est listé sous Components > Embeds dans le Framer Marketplace, créé et maintenu par l’équipe EmbedSocial.

Après avoir cliqué sur ‘Copy Component’, il suffit de le coller dans votre projet Framer.

Vous pouvez aussi chercher “EmbedSocial” dans le panneau Insert de n’importe quel projet Framer et la tuile apparaît, de la même façon que Cal.com, Intercom et Hubspot apparaissent dans leurs catégories.

Avant de le copier ou de le glisser sur une page, il vous faut cependant une chose côté EmbedSocial : un widget ref. Voici comment l’obtenir.

Configurez d’abord votre widget EmbedSocial

Le composant Framer n’affiche qu’un widget que vous avez déjà créé dans EmbedSocial. Trois étapes rapides vous mènent de zéro à un widget ref.

Étape 1 : Créez votre compte EmbedSocial

Inscrivez-vous pour un compte d’essai EmbedSocial. Vous pouvez aussi consulter notre plan gratuit, qui prend en charge une source Google Business Profile avec un badge d’avis affichant cinq avis aléatoires.

Note : Vous pouvez aussi connecter une source Instagram, TikTok ou Facebook.

Étape 2 : Connectez votre Google Business Profile, Instagram, TikTok ou d’autres sources

Dans ‘Sources’, connectez la source que vous voulez afficher : votre Google Business Profile pour les avis, votre compte Instagram ou TikTok pour un flux, ou plusieurs sources en même temps pour un mur combiné.

Aucune API key ni compte développeur ne sont nécessaires de votre côté. EmbedSocial détient les intégrations API officielles, donc connecter une source est une simple connexion, pas un projet de configuration.

Étape 3 : Personnalisez votre widget et copiez votre widget ref

Une fois vos sources connectées, rendez-vous dans la section ‘Widgets’ pour générer et personnaliser votre nouveau widget avec notre AI widget builder avancé.

L’AI widget builder gère l’essentiel via un prompt : décrivez les couleurs de votre marque, vos polices ou votre layout, et il applique les changements. Le widget est entièrement responsive, il s’adapte donc automatiquement aux breakpoints mobile, tablette et desktop de Framer sans configuration supplémentaire.

Une fois terminé, ouvrez l’onglet ‘Embed’ du widget et copiez la valeur data-ref. Cette chaîne est votre widget ref. Gardez-la sous la main, c’est la seule information dont Framer a besoin.

Ajoutez le composant EmbedSocial à votre site Framer

Avec un widget ref copié, l’installer dans Framer prend trois étapes et aucun éditeur de code.

Étape 1 : Collez le composant dans votre projet Framer

C’est simple : ouvrez votre projet Framer et appuyez sur coller pour ajouter le composant n’importe où sur la page. Vous pouvez ensuite le déplacer et le placer où vous voulez sur le canvas.

Étape 2 : Collez votre widget ref

Sélectionnez le composant et trouvez le champ Widget Ref dans le panneau de propriétés à droite. Collez la valeur que vous avez copiée depuis EmbedSocial.

Étape 3 : Prévisualiser et publier

Cliquez sur ‘Preview’ (le bouton play) en haut pour vérifier que votre flux ou vos avis se chargent correctement, ajustez la hauteur et la largeur à votre layout, puis publiez. C’est tout le processus.

Le composant n’est pas limité à un seul type de contenu. Il affiche le widget que vous lui indiquez. Voici à quoi cela ressemble sur les sources les plus demandées.

Ce que vous pouvez ajouter à votre site Framer

J’ai choisi trois templates en direct par source, pour que vous voyiez exactement ce que ça donne sur la page. Copiez le widget ref de n’importe lequel et il s’insère dans le composant Framer de la même manière.

Ajoutez des avis Google à votre site Framer

Affichez votre note en étoiles, votre nombre d’avis et les avis individuels avec photos et noms, tirés en direct de votre widget d’avis Google et synchronisés environ toutes les 10 minutes.

C’est le générateur de confiance le plus rapide sur un site Framer : une vraie note en étoiles à côté de vrais noms fait plus pour un visiteur qui arrive pour la première fois qu’un autre paragraphe de copy marketing.

Voir le template : Google Reviews Slider

Ajoutez des flux Instagram et TikTok à votre site Framer

Affichez vos derniers posts, reels ou vidéos TikTok dans une grille, un carrousel ou un layout autoplay, propulsés par les mêmes moteurs du widget Instagram et du widget TikTok utilisés dans les autres intégrations EmbedSocial.

Un flux en direct signale que l’entreprise est active aujourd’hui, pas seulement au moment où le site a été construit. C’est utile aussi bien sur les pages d’accueil que sur les pages portfolio.

Voir le template : Instagram Feed Widget

Ajoutez des témoignages et de l’UGC shoppable à votre site Framer

Combinez des avis de plusieurs plateformes dans un unique mur de témoignages, ou taguez des produits dans les posts UGC avec le widget shoppable pour transformer le flux en une galerie shoppable.

Voir le template : Testimonial Wall

Ancienne méthode custom code vs. le nouveau composant

Si vous avez déjà utilisé EmbedSocial sur Framer, vous colliez probablement un script dans un bloc Custom Code. Voici la comparaison avec le composant.

	Custom code (ancien)	Composant (nouveau)
Configuration	Coller du JavaScript dans un bloc Embed ou Custom Code	Copier le composant ou le glisser depuis le panneau Insert
Édition	Nécessite de rouvrir le bloc de code	S’édite visuellement dans le panneau de propriétés
Découvrabilité	Nécessite de savoir que le code d’embed existe	Recherchable dans le panneau Insert
Idéal pour	Personnalisation HTML complète	Configuration rapide, sans code

Les deux méthodes fonctionnent toujours. L’approche custom code est toujours disponible si vous avez besoin de plus de contrôle sur le placement. Mais pour la plupart des projets, le composant est plus rapide et plus difficile à casser.

Conclusion : Installez le composant EmbedSocial et transformez votre prochain site Framer en preuve

Un site Framer bien conçu a toujours besoin de la preuve que de vrais clients existent. Le composant EmbedSocial vous y amène sans une seule ligne de code, de la création du compte au widget publié en quelques minutes, pas en un sprint de dev.

Cherchez “EmbedSocial” dans le panneau Insert de votre prochain projet Framer et voyez ce qu’un flux de réseaux sociaux en direct ou une ligne d’avis Google réels apportent à une page qui était auparavant statique. Vous pouvez aussi le trouver via ce lien.