Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Comment intégrer Instagram à son site Webflow ?

L'équipe Digidop
L'équipe Digidop
February 13, 2022
logo webflow et instagram avec écran d'ordinateur blanc sur fond rose et bleu

Tables des matières

Voici 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.

Clonez notre modèle en 1 clic sur le Webflow showcase : Lien du feed à cloner.

Etape 1. Créer une collection Instagram dans Webflow

Pour commencer, vous devrez tout d’abord créer une nouvelle collection 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
  • Donnez un nom et un URL à votre collection. Par exemple “Instagram”
Collection du CMS webflow avec champs name et url entourés en bleu
  • 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

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

Lien du feed à cloner.

  • Clonez le projet
  • Copiez/collez le dans votre designer
  • Connectez le à votre collection CMS
  • Intégrez le code Finsweet Slider Attributes dans le <Head> code de votre page
  • Vérifiez que les attributs sont bien placés sur le slider
  • Publiez !

Etape 3. Automatiser Instagram et Webflow avec 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 Integromat.

3.1 Connecter Instagram et 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

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 à 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.

3.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é à Integromat, vous pourrez choisir votre projet et choisir la collection que vous souhaitez connecter.

paramètre du module webflow dans integromat

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.3 Limiter les doublons

Afin de ne pas publier deux fois la même image sur votre site vous devrez programmer deux choses :

  1. 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

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

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions