--- title: "Comment intégrer des flux de médias sociaux en direct dans Lovable ?" date: 2025-09-30 modified: 2025-10-03 canonical_id: how-to-embed-live-social-media-feeds-in-lovable author: "osogovo" category: - blog - widgets locale_slug: "comment-integrer-flux-medias-sociaux-lovable" summary: "Apprenez à intégrer du contenu de médias sociaux dans Lovable en utilisant l'API EmbedSocial pour un affichage personnalisé et dynamique." draft: false seo: og_image: "https://embedsocial.com/wp-content/uploads/2025/09/embed-social-media-feed-lovable-embedsocial-api.jpg" og_image_alt: "embed social media feed from EmbedSocial API to Lovable and design your own widget" og_image_width: 1200 og_image_height: 630 title: "Comment intégrer des flux de médias sociaux en direct dans Lovable ?" description: "Apprenez à intégrer du contenu de médias sociaux dans Lovable en utilisant l'API EmbedSocial pour un affichage personnalisé et dynamique." structured_data: article --- Dans ce tutoriel, nous vous montrerons comment utiliser l'[API EmbedSocial](/help/en/articles/10922940-understanding-sources-in-embedsocial) et synchroniser du contenu à partir de différentes sources et types de médias dans Lovable. De plus, nous vous montrerons les types de widgets que vous pouvez créer avec Lovable, comment gérer le cloud Lovable et comment améliorer l'affichage des widgets avec l'IA. C'est un excellent tutoriel pour les agences qui construisent sur Lovable ou les développeurs web qui souhaitent créer du contenu dynamique très personnalisé pour leurs sites web. Suivez la démo ci-dessous : Ou consultez ces étapes pour plus de détails : ## Étapes pour intégrer un flux de médias sociaux dans Lovable - [Étape 1 : Créer un site web Lovable](#h-step-nbsp-1-create-a-lovable-website) - [Étape 2 : Activer Lovable Cloud](#h-step-nbsp-2-enable-lovable-cloud) - [Étape 3 : Obtenir la clé API EmbedSocial et la documentation](#h-step-nbsp-3-get-embedsocial-api-key-and-documentation) - [Étape 4 : Fournir le contexte API à Lovable](#h-step-nbsp-4-provide-api-context-to-lovable) - [Étape 5 : Créer la table de base de données](#h-step-nbsp-5-create-the-database-table) - [Étape 6 : Ajouter la clé API dans Lovable](#h-step-6-add-the-api-key-in-lovable) - [Étape 7 : Ajouter le code de référence du widget dans Lovable](#h-step-7-add-the-widget-reference-code-in-lovable) - [Étape 8 : Tester l'intégration](#h-step-nbsp-8-test-the-integration) - [Étape 9 : Afficher les publications](#h-step-nbsp-9-display-the-posts) - [Disposition en grille](#h-grid-layout-prompt) - [Disposition en carrousel](#h-slider-layout-prompt) - [Disposition en maçonnerie](#h-masonry-layout-prompt) - [Améliorations optionnelles](#h-optional-enhancements) - [Premiers pas](#h-get-started) - [FAQ](#h-faq) ## Étape 1 : Créer un site web Lovable Commencez une demande de configuration initiale pour la page web qui chargera le flux de médias sociaux. Vous pouvez utiliser une invite comme > **Invite :** *« Créer une page web qui affichera un flux de médias sociaux en direct en utilisant l'API EmbedSocial pour récupérer les publications de TikTok, Facebook, YouTube, Instagram, LinkedIn, Pinterest ou Twitter »* ## Étape 2 : Activer Lovable Cloud Une fois le projet créé, activez le backend en ouvrant le panneau **Cloud** dans le menu supérieur et en sélectionnant **« Activer le cloud. »** Attendez que Lovable complète la configuration automatique de la base de données. ![Activer la base de données Lovable Cloud](https://embedsocial.com/wp-content/uploads/2025/09/enable-lovable-cloud-database-1024x576.jpg) ## Étape 3 : Obtenir la clé API EmbedSocial et la documentation Ensuite, vous aurez besoin des instructions de mise en œuvre de l'API EmbedSocial que vous obtiendrez à partir du compte EmbedSocial. Pour ce faire, vous devez avoir un compte EmbedSocial actif avec le plan Premium pour obtenir vos propres identifiants d'API. Une fois que vous avez le compte et que vous êtes connecté, vous pouvez **aller à Menu bas à droite du profil > Intégrations > Documentation API** - où vous trouverez toutes les informations sur l'API, plus la clé API. À partir de la documentation de l'API EmbedSocial, vous obtiendrez toutes les informations nécessaires - incluant l'URL du point de terminaison, les paramètres requis et un exemple de réponse. Ayez votre clé API et votre numéro de référence d'album (ID du widget) prêts pour une saisie sécurisée. ![Obtenir la clé API d'EmbedSocial](https://embedsocial.com/wp-content/uploads/2025/09/get-embedsocial-api-key-1024x576.jpg) > À partir de la documentation API fournie - copiez les instructions pour la mise en œuvre et notez que vous aurez également besoin de la clé API qui se trouve sur la même page que la documentation. ## Étape 4 : Fournir le contexte API à Lovable Maintenant, vous devrez fournir les instructions de l'API au chatbot Lovable avec l'invite suivante : > Invite : *« Je dois intégrer l'API EmbedSocial. Elle utilise un point de terminaison que je fournirai ci-dessous et retourne des publications avec identifiant, caption, image\_url, lien, created\_at et d'autres chaînes. Voici les détails de la documentation sur la requête et la réponse : (collez la documentation ou les extraits clés pour que Lovable comprenne comment appeler l'API. Page d'intégration EmbedSocial) » ## Étape 5 : Créer la table de base de données Ensuite, vous devrez inviter le système à préparer la base de données en fonction des informations de la documentation de l'API : > **Invite :** *« Maintenant, essayez de créer les tables dans la base de données avec les informations de médias générées à partir de l'API »* Lovable générera le schéma en utilisant la base de données Cloud. ## Étape 6 : Ajouter la clé API dans Lovable Ensuite, ajoutez le secret EMBEDSOCIAL\_API\_KEY lorsque vous y êtes invité par le système. ![Fournir la clé API EmbedSocial à Lovable](https://embedsocial.com/wp-content/uploads/2025/09/embedsocial-api-lovable-step3-enter-api-key-1024x576.jpg) ## Étape 7 : Ajouter le code de référence du widget dans Lovable De la même manière, vous recevrez une invite dans le chat pour fournir le secret EMBEDSOCIAL\_WIDGET\_REF. Vous pouvez obtenir n'importe quel widget que vous voulez afficher dans Lovable en allant simplement dans votre éditeur de widget et en obtenant le grand code dans son URL. ![Obtenir le numéro de référence du widget EmbedSocial dans l'éditeur de widget](https://embedsocial.com/wp-content/uploads/2025/09/embedsocial-widget-reference-number-1024x576.jpg) ## Étape 8 : Tester l'intégration Invoquez manuellement la fonction edge ou via un bouton dans l'interface utilisateur pour confirmer que les publications sont récupérées et stockées dans la table. Vérifiez les entrées de la base de données pour en vérifier l'exactitude. ## Étape 9 : Afficher les publications C'est tout. Une fois que les publications sont générées, vous pouvez faire beaucoup de personnalisations du widget et créer un flux de médias sociaux vraiment personnalisé et attrayant. [Consultez la démo.](https://embedsocial-shoppable.lovable.app/news) > Invite : *« Sur la page SocialFeed, créez une grille réactive de cartes qui lit à partir de la table social\_posts, affiche l'image de la publication, une légende tronquée et un lien « En savoir plus ». »* ## Invites pour concevoir le widget dans Lovable ### Invite pour disposition en grille ``` Créez un composant appelé SocialFeedWidgetGrid. Extrayez les publications de la table social_posts et affichez-les dans une grille réactive : - Bureau : 3 colonnes - Tablette : 2 colonnes - Mobile : 1 colonne Chaque carte doit inclure : - Image (couverture, largeur complète, rapport 16:9, arrondie-xl, ombre-sm) - Légende (tronquée à 100 caractères, affiche "...plus" si plus long) - Bouton de lien "Afficher la publication" → ouvre le lien permanent dans un nouvel onglet Cartes de style : - Coins arrondis (xl) - Shadow-md - Padding-3 - Effet au survol : légère mise à l'échelle sur l'image - Police : Inter, taille de base ``` * * * ### Invite pour disposition en carrousel ``` Créez un composant appelé SocialFeedWidgetSlider. Utilisez un carrousel/curseur pour afficher les publications horizontalement avec des flèches de navigation. Chaque diapositive inclut : - Image (couverture, largeur complète, hauteur 300px, arrondie-xl) - Légende ci-dessous (tronquée à 80 caractères) - Lien "Afficher la publication" qui ouvre le lien permanent Style : - Centrez la diapositive active légèrement plus grande (échelle 1,05) - Ajouter une animation de glissement fluide - Arrondie-xl + ombre-lg - Utiliser la police Inter, taille de base ``` * * * ### Invite pour disposition en maçonnerie ``` Créez un composant appelé SocialFeedWidgetMasonry. Extrayez les publications de la table social_posts et affichez-les dans une disposition de maçonnerie réactive. Disposition : - Bureau : 3 colonnes - Tablette : 2 colonnes - Mobile : 1 colonne Chaque carte de publication inclut : - Image (largeur complète, hauteur auto, arrondie-xl) - Légende (tronquée à 120 caractères) - Petit lien "Afficher la publication" ci-dessous Style : - Utilisez les colonnes CSS pour l'effet de maçonnerie - Écart entre les éléments : 16px - Arrondie-xl + ombre-sm ``` * * * ### Améliorations optionnelles #### Invite pour lightbox ``` Améliorez le widget pour que lorsqu'un utilisateur clique sur une image, elle s'ouvre dans une modal lightbox. La modal affiche : - Image en taille réelle - Légende (texte complet, défilable si long) - Bouton de lien "Afficher sur Instagram" (ou plateforme source) Style modal avec superposition sombre, contenu centré et bouton de fermeture (X). ``` #### Invite pour boutons CTA ``` Ajoutez un bouton CTA personnalisable sous chaque carte de publication. - Si une publication a un champ appelé cta_url, affichez un bouton "Acheter maintenant" qui le lie. - Bouton de style : arrière-plan de couleur primaire, texte blanc, arrondi-complet, opacité au survol-90. ``` ### Pourquoi synchroniser vos médias sociaux via l'API avec Lovable Cloud Lorsque votre entreprise s'appuie sur du contenu généré par l'utilisateur, une simple intégration n'est pas toujours suffisante. En connectant l'API EmbedSocial à Lovable Cloud, vous déverrouillez un ensemble d'avantages qui vont bien au-delà d'un flux statique. - L'accès direct à l'API récupère les médias frais à la demande, assurant que votre site présente les dernières publications et avis sans intervention manuelle. - Le stockage du contenu dans Lovable Cloud vous donne le contrôle des données. Vous pouvez filtrer, trier et fusionner plusieurs sources, créant des flux uniques adaptés à votre audience. - L'IA de Lovable vous aide à créer un design de widget sur mesure. Grâce à des invites claires, vous pouvez ajuster les mises en page, les couleurs, la typographie et le comportement réactif sans écrire de CSS à la main. - Les fonctions edge prennent en charge l'automatisation backend telle que les synchronisations programmées et la gestion des erreurs, pour que votre widget reste à jour et robuste. - Les widgets personnalisés peuvent inclure des fonctionnalités comme la pagination, la recherche, les filtres de catégorie ou les boutons d'appel à l'action, augmentant l'engagement et la conversion des utilisateurs. - L'intégration de plusieurs flux via l'API vous permet de créer des tableaux de bord unifiés ou des galeries multiplateforme qui correspondent à votre esthétique et à votre message de marque. En mariage la flexibilité de l'API avec les outils de conception pilotés par l'IA de Lovable, vous pouvez créer un flux de médias sociaux dynamique, entièrement personnalisé qui se démarque sur votre site web. ## Premiers pas Pour commencer, inscrivez-vous à un compte EmbedSocial et obtenez votre clé API et votre ID de widget. Créez ensuite un nouveau projet dans Lovable, activez Lovable Cloud et suivez les étapes ci-dessus pour intégrer votre flux de médias sociaux. Avec ces outils, vous pouvez créer des widgets dynamiques qui synchronisent directement votre contenu de médias sociaux sur votre site web. ## FAQ Quel plan ai-je besoin sur EmbedSocial pour accéder à l'API ? L'accès à l'API est disponible sur [les plans premium d'EmbedSocial](/admin/continue_plugin_purchase/socialfeed_premium99/trial). Consultez leur page de tarification pour plus de détails. Lovable Cloud est-il gratuit à utiliser ? Lovable Cloud offre un niveau gratuit avec une allocation d'utilisation mensuelle. L'utilisation au-delà de la limite gratuite nécessite de recharger votre solde. Ai-je besoin d'une expérience de codage ? Non. Le processus repose sur des invites descriptives et Lovable génère le code pour vous. Cependant, la compréhension des concepts de base vous aidera à affiner vos invites. Quelle est la sécurité de mes clés API ? Les clés sont stockées dans le gestionnaire de secrets de Lovable et injectées dans les fonctions de manière sécurisée. Ne collez jamais les clés directement dans les invites. Puis-je intégrer plusieurs flux ? Oui. Créez des tables et des fonctions edge séparées pour chaque flux ou modifiez votre fonction pour gérer plusieurs identifiants.