La solution pour publier tous vos posts Instagram sur votre site Webflow ! 🤩 Voici un tutoriel pour connecter votre page et posts Instagram à votre site Webflow. Un slider Instagram natif Webflow et 100% SEO.
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.
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”
- Donnez un nom et un URL à votre collection. Par exemple “Instagram”
- 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)
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.
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.
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.
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.
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.
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é.
.jpg)
