Utiliser le widget Instagram sur une page web

Afficher les dernières publications de son compte Instagram sur une de vos pages web est possible grâce au widget Instagram. Boutique en ligne, Portfolio ou encore blog, vous avez la possibilité d'utiliser le widget Instagram sur une page web. Ce widget fait directement la liaison entre votre site internet et votre compte Instagram à l'aide de clés APIs. Dans ce tutoriel, nous allons aborder les différentes étapes à suivre pour générer les clés APIs de son compte, ainsi que la mise en place de l'affichage de vos publications.

Comment créer un compte sur Meta For Developers ?

Une des premières étapes avant de récupérer les clés APIs de son compte Instagram est de créer un compte sur Meta For Developpers. En effet, Meta For Developpers est une plateforme qui centralise toutes la gestion des comptes et des informations de vos comptes sur Meta, Instagram, ou encore Whatsapp.

Pour créer un compte sur Meta for Developpers, nous vous invitons à vous rendre sur la page d'accueil de la plateforme. Une fois arrivé sur la page d'accueil de Meta For Developers, appuyez sur "Se connecter" en haut à droite.

Créer un compte sur Meta

Comment créer une application Instagram Basic Display sur son compte Meta For Developers ?

Pour créer une application Instagram Basic Display, commencer par cliquer sur la fonctionnalité "Mes applications" visible dans le menu horizontal en haut de votre écran. Vous êtes ainsi redirigé vers la page de gestion de vos applications. Appuyez sur le bouton vert "Créer une app".

Une nouvelle fenêtre s'affiche et vous demande de choisir le type d'application que vous souhaitez créer. Choisissez l'option "Consommateur" puis défilez le curseur de votre page vers le bas pour atteindre le bouton "Suivant".

Dans l'étape suivante, renseignez les champs obligatoires que sont le nom de l'application et l'e-mail du contact. Lorsque cela est fait, appuyez sur le bouton "Créer une application" Une demande de confirmation de mot de passe vous sera alors demandée avant de passer à la suite.

Une nouvelle page avec le nom "Ajouter des produits à votre app" s'ouvre. Choisissez de configurer l'application "Instagram Basic Display".

Sur la page, vous pouvez apercevoir un bandeau rouge avec un message d'information s'afficher. Il s'agit d'un message d'alerte vous demandant de configurer vos paramètres. Appuyez alors sur le lien "Paramètres" afin d'atteindre les paramètres de votre compte Meta For Developers. (Voir photo 1)

Vous serez redirigé vers la page de configuration qu'il faudra remplir avec vos informations. Dans l'onglet "Général", renseignez les champs obligatoires. Quand cela est fait, appuyez sur "Ajouter une plateforme". (Voir photo 2)

Une nouvelle fenêtre s'affiche et cette fois-ci, sélectionnez l'option "Website". (Voir photo 3)

Ajoutez enfin l'URL de votre site que vous souhaitez lier à votre compte Instagram, puis terminer cette mainpulation en appuyant sur le bouton "Enregistrer les modifications". (Voir photo 4)

Une nouvelle fenêtre s'ouvre. Vous avez désormais accès à vos clés APIs. En-dessous des champs APIs, vous allez devoir intégrer 3 URLs dans les champs correspondants :

1. Une URL pour les paramètres d'authentification
2. Une URL sur l'annulation de l'autorisation
3. Une URL sur la demande de suppression de données

Pour renseigner ces 3 URLs, connectez-vous sur le Manager de votre site internet, puis accédez au Module "Configuration" pour ensuite atteindre la fonctionnalité "Instagram" depuis les réglages. Copiez l'URL de cette page puis collez-la dans les 3 champs correspondants.

N'oubliez pas d'enregistrer les modifications apportées sur la page Meta.

L'étape suivante consiste à relier son compte Instagram à votre compte Meta For Developers. Pour cela, pensez à vous connecter sur votre compte Instagram depuis votre ordinateur. 

Ensuite, revenez sur la plateforme Meta et cliquez sur la fonctionnalité "Instagram Basic Display" visible depuis le menu vertical à gauche de votre écran. Défilez la page vers le bas afin d'atteindre la section "User Token Generator". Cliquez alors sur le bouton bleu "Add or Remove Instagram Testers". Une nouvelle page sur la gestion des rôles s'affiche. Cliquez sur le bouton "Ajouter Testeurs Instagram". Renseignez le nom utilisateur de votre compte Instagram puis valider l'invitation.

Connectez vous sur la plateforme Instagram depuis votre ordinateur, puis dirigez-vous vers le bouton "Plus" visible en bas de la page à gauche de votre écran. En cliquant dessus, une liste déroulante de fonctionnalités s'affiche. Cliquez alors sur la fonctionnalité "Paramètres". (Voir photo 5)

Cliquez ensuite sur la fonctionnalité "Applications et site web". (Voir photo 6)

Enfin, appuyez sur l'onglet "Invitation à tester". (Voir photo 7)

Vous allez apercevoir votre invitation de votre compte Meta. Cliquez alors sur "Accepter" pour faire la liaison de votre compte Instagram et Meta For Developers.

Photo 5

Photo 6

Photo 7

Le test est ainsi concluant. Si la manipulation a échoué, n'hésitez pas à recommencer la connexion entre votre compte Meta et Instagram. Il peut y avoir des légers temps d'attente également pour voir apparaître l'invitation de son compte Meta vers son compte Instagram.

Une fois la liaison des comptes opérationnelles, nous allons récupérer les clés APIs générées sur Meta pour les intégrer sur le Manager de votre site internet. Pour obtenir les clés APIs de votre compte Instagram, accédez à la plateforme Meta For Developers, puis cliquez sur "Instagram Basic Display". Une nouvelle page s'affiche et cette fois-ci, défilez le curseur de votre page vers le bas afin d'atteindre la section "ID App Instagram".

Retournez alors sur votre Manager puis accédez à la gestion Instagram depuis le module "Configuration" puis "Réglages". Copiez l'ID de l'app Instagram" récupéré depuis la plateforme Meta et collez-le sur votre Manager. Faîte de même pour la clé secrète APIs.

Enregistrez les informations intégrées. Cliquez ensuite sur le bouton bleu "Se connecter à mon compte Instagram" puis connectez-vous à votre compte Instagram si cela n'est pas déjà fait. Un bandeau bleu confirme la réussite de la connexion entre votre compte Instagram et votre site internet. Nous allons alors pouvoir passer à la dernière étape de ce tutoriel, c'est-à-dire afficher son feed instagram sur une page de son site internet.

Comment afficher ses publications Instagram sur une page de son site internet ?

Pour afficher ses publications Instagram sur une page de son site internet, nous vous invitons à vous rendre sur le Module "Page" depuis votre Manager puis à cliquer sur la page de votre choix en appuyez sur "Modifier". Une fois que vous avez atteint la page que vous souhaitez modifier, ajoutez une ligne puis choissisez l'option "Autres Widgets". Cherchez le widget "Instagram" puis cliquez sur le widget correspondant.

Déterminez le nombre de publications que vous souhaitez faire apparaître sur votre page web puis cliquez sur le bouton bleu "Enregistrer" en bas de la page. Le widget Instagram est désormais intégré sur votre page et n'oubliez pas de sauvegarder les modifications apportées sur cette page en cliquant sur le bouton "Enregistrer" tout en bas de la page.

Vous pouvez ainsi voir apparaître vos publications Instagram sur une page de votre site internet.