# Comment intégrer Instagram à son site Webflow ? Tutoriel3 minPublié le Feb 13, 2022Dernière mise à jour le ![logo webflow et instagram avec écran d'ordinateur blanc sur fond rose et bleu](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671260181bba921722a54d45_64760069e93084646c9ef180_6209853b787324d845505be6_Open-Graph-webflow-instagram.png)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'articleVoici comment créer un slider Instagram natif dans Webflow. Dans ce tutoriel, on vous montre comment automatiser la publication de tous vos posts Instagram dans votre site web. Nous utiliserons pour ça l'outil d'automatisation no-code Integromat. ## Etape 1 : Créer une collection Instagram dans Webflow Pour commencer, vous devrez tout d’abord créer une nouvelle collection [Webflow](https://try.webflow.com/webflow), dédiée à vos posts Instagram. Pour cela connectez vous au **mode designer** de votre projet. - Depuis vos collections, cliquez sur l’icone “Create New Collection” ![designer webflow avec boutons de création d'une nouvelle collection entourés en bleu](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712601a1bba921722a55048_64760069e93084646c9eed76_6209809b062bb8eef5eb8499_ajout-collection-webflow.png) - **Donnez un nom et un URL **à votre collection. Par exemple “Instagram” ![Collection du CMS webflow avec champs name et url entourés en bleu](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712601a1bba921722a55041_64760069e93084646c9eed73_620980c1a7300387f284800d_nouvel-item-webflow.png) - Ajoutez des **champs personnalisés ** **Plain text** : pour la description Instagram **Image** : pour la photo Instagram **Link** : pour le lien de votre post Instagram **Plain text **: pour la balise Alt de l’image (qui ne sera pas automatisée) ![champs personnalisé d'une collection webflow entourés en bleu](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712601a1bba921722a55045_64760069e93084646c9eed77_6209810d48f65bd2715f9a0d_ajout-champs-personalises-item-webflow.png) ## Etape 2 : Créer un slider Instagram dans Webflow Nous avons développés le slider Instagram avec la méthode Client First, vous pouvez aller le récupérer gratuitement sur la [Webflow Showcase Digidop](https://webflow.com/@Digidop) Lien du [feed à cloner](https://webflow.com/made-in-webflow/website/Instagram-Embed-Webflow-Widget). - Clonez le projet - Copiez/collez le dans votre designer - Connectez le à votre collection CMS - Intégrez le code Finsweet Slider Attributes dans le code de votre page - Vérifiez que les attributs sont bien placés sur le slider - Publiez ! ## Etape 3 : Automatiser Instagram et Webflow avec Make (Integromat) Cette étape va vous permettre d’**automatiser la création de nouveaux items **dans votre collection Instagram et de les **publier en direct sur votre site**. Pour automatiser votre slider Instagram, nous utiliserons l’[outil d’automatisation no-code Make](https://www.make.com/en/register?pc=digidop) (Integromat). ### 1. Connecter Instagram et Make (Integromat) Ajouter un nouveau module Instagram comme trigger. Vous aurez la possibilité de choisir le module Instagram par défaut, ou le module pour entreprise, qui vous permet notamment d’automatiser vos pages Instagram. Dans cette exemple, nous utiliserons le **module “Instagram for Business”**. Sélectionnez ensuite le **déclencheur “Watch Média”**. Ce déclencheur ira récupérer, à un intervalle de temps défini, les différentes données de vos posts Instagram. ![paramètre du module instagram dans integromat](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712601a1bba921722a5504b_64760069e93084646c9eed78_620981523122227316bf641d_parametrage-instagram-integromat.png) Voici comment paramétrer pas à pas votre module Instagram : - **Connection **: cliquez sur “Add” pour ajouter une nouvelle connexion. Rentrez vos identifiants de connexion pour permettre à [Make](/fr/tools/make-integromat) (Integromat( d’accéder à vos données Instagram. - **Page **: Sélectionnez la page Instagram que vous souhaitez connecter à votre site Webflow - **Limit **: Indiquez le nombre maximum de résultats que le module Instagram va aller récupérer à chaque intervalles de temps. C’est à dire le nombre de > Tips💡Vous pouvez paramétrer des intervalles de temps personnalisés en cliquant sur l’horloge du déclencheur. ### 2. Ajouter un module Webflow Ajoutez un nouveau module webflow avec pour action “Create Item”, pour créer un nouvel item dans votre collection Instagram. Une fois votre compte Webflow relié à Make (Integromat), vous pourrez **choisir votre projet** et **choisir la collection** que vous souhaitez connecter. ![paramètre du module webflow dans integromat](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712601a1bba921722a5506f_64760069e93084646c9eed74_620981760668889620bf5dff_parametrage-webflow-integromat.png) Vous retrouverez les différents champs de votre collection Webflow, et pourrez les compléter avec les balises du précédent module Instagram. - **URL **: *Media URL* - **Lien Instagram** : *Permalink* - **Description short** : *Caption* - **Name **: *Media ID* - **Slug **: Media ID La dernière section “Live” doit être programmé sur “Yes” afin de permettre à l’item d’être automatiquement publié sur votre site. ### 3. Limiter les doublons Afin de ne pas publier deux fois la même image sur votre site vous devrez programmer deux choses : - **Ajoutez un filtre **: créez un filtre entre le module Instagram et le module Webflow pour ne laisser passer que les images de vos publication. Vous pourrez ainsi exclure les vidéos et diaporama Instagram, ce qui ne pausera pas de problème dans la création de l’item. Le champ Webflow étant un champ “image” prévu pour recevoir uniquement des images. ![système de filtrage integromat](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712601a1bba921722a55072_64760069e93084646c9eed75_620982a438f0cf94c7a683cc_filtrage-integromat-instagram.png) 2. **Ajoutez un Flow Control** : lorsque votre automatisation ajoutera deux fois la même image, le module Webflow va la refuser. En effet, un item Webflow doit avoir un slug unique. Pour que cela ne pause pas de problème dans votre automatisation, vous devrez **ajouter le flow “Ignore”**. Celui-ci ne prendra pas en compte l’erreur, et votre automatisation continuera de fonctionner correctement. Aucun doublon ne sera ainsi ajouté. ![outils integromat avec module ignore entouré en bleu](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712601a1bba921722a5506b_64760069e93084646c9eed79_620982fd9edfbc3a155a0ae2_fonctionnalite-integromat-ignor.png)[ ](#)![Digidop](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/670d65d7d25b0b7faea756ef_64760069e93084646c9ef274_icon-digidop.svg)DigidopAgence Web[ ](/fr/team/lequipe-digidop)[ ](https://fr.linkedin.com/company/digidop)[ ](https://x.com/digidop_com)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)