1. Créer un site
  2. Tutoriels
  3. Pages
  4. Utiliser le widget Instagram sur une page web

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.

Pré-requis :

 

 

  1. Avoir un compte Instagram Business ou Creator 
  2. Avoir créé un compte Meta for Developpers
  3. Créer une application Instagram et la paramétrer

 

Offres :

Toutes les offres E-monsite

Comment transformer mon compte personnel Instagram en compte Business ou Creator ?

Pour intégrer le widget Instagram à votre site, il est essentiel de disposer d'un compte Instagram Business ou Creator.

En effet l'utilisation de l'API Instagram est interdite aux comptes personnels. Il est donc nécessaire de convertir votre compte. Ces types de compte sont totalement gratuits.

Si vous possédez déjà un compte Business ou Creator, vous pouvez passer directement à l'étape suivante. 

Sinon, commencez par vous connecter à votre compte Instagram puis :

  • Cliquez sur "Plus" et "Paramètres" (voir Photo 1).
  • Dans le menu qui s'ouvre, cliquez sur "Type de compte et outils" dans la rubrique "Pour les professionnels" et choisissez "Passer à un compte professionel" (voir Photo 2).
  • Enfin, sélectionnez le type de compte qui vous correspond et suivez les étapes pour convertir votre compte (voir Photo 3).

(Photo 1)

(Photo 2)

(Photo 3)

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

Ensuite, renseignez vos informations de connexion Facebook afin d'atteindre la page de gestion des applications. Vous allez devoir confirmer :

  • Votre compte à partir d'un code reçu depuis votre numéro de téléphone
  • Votre adresse mail principal pour ce compte

Sélectionnez le type de profil que vous êtes selon les choix proposés par Meta puis cliquer sur le bouton "Terminer l'inscription". Votre compte Meta For Developpers est désormais créé.

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

Attention : Si vous disposez déjà d'une application (suite à une précédente intégration d'Instagram à E-monsite, par exemple), il est nécessaire de créer une nouvelle application, car l'application existante n'est pas compatible avec la nouvelle intégration.

Pour créer une application Instagram, commencez par cliquer sur le bouton vert "Créer une app", situé dans le coin supérieur gauche de la page d'accueil de votre compte.

  • Une fenêtre s'affichera vous demandant de saisir le nom de votre application ainsi qu'une adresse e-mail de contact.
  • Dans l'étape suivante, choisissez "Autre" parmi les cas d'utilisation proposés.
  • Un nouvelle fenêtre s'affichera ensuite, sélectionnez impérativement "Business" comme type d'application (sans quoi le widget ne pourra pas fonctionner sur votre site).
  • Enfin, dans le récapitulatif, cliquez sur le bouton "Créer une application".

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

Dans la fenêtre de configuration de l'application seules les étapes 1. Générez des tokens d'accès et 3. Configurez la connexion professionnelle Instagram sont nécessaires au bon fonctionnement du widget.

  • Cliquez sur "Ajouter un compte", une fenêtre de connexion Instagram va alors apparaitre.
  •  Saisissez les identifiants de connexion de votre compte Instagram
  • Une nouvelle fenêtre s'affiche, vous demandant d'autoriser votre application à accéder à votre compte Instagram. Cliquez sur le bouton bleu "Autoriser".

Le fenêtre se ferme automatiquement et votre compte Instagram devrait apparaitre dans l'onglet 1. Générez des tokens d'accès

Passez ensuite à l'étape 3 : Configurez la connexion professionnelle Instagram

  • Cliquez sur "Configurer", une fenêtre va s'ouvrir vous demandant une URL de redirection.
  • Pour renseigner cette URL, 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 le champ avant d'enregistrer.
  • Un nouveau bouton "Paramètres de connexion professionnelle" est apparu, cliquez dessus.
  • Dans la fenêtre, collez de nouveau l'url précédente dans les champs "
    URL de rappel pour les annulations d’autorisation"     et "URL de la demande de suppression des données" et enregistrez.

Votre application Instagram est maintenant prête à l'emploi

Vous pouvez d'ores et déjà noter les trois informations disponibles sur la page de configuration, qui seront nécessaires pour la suite :

  1. ID d'app Instagram
  2. Clé secrète Instagram (cliquez sur Afficher pour la rendre visible)
  3. Url d'intégration

 

Comment connecter mon site à mon application Instagram ?

Connectez vous à votre Manager E-monsite et accédez à la page "Instagram" depuis le menu "Configuration" puis "Réglages".

  • Si avez bien suivi le tutoriel de création de l'application Instagram, vous devriez être en possession des informations indiquées à l'étape 1 : ID d'app Instagram, Clé secrète Instagram et Url d'intégration. Cliquez sur "Configurer les informations", pour accéder à l'étape suivant.
  • A l'étape 2, saisissez les différentes informations requises puis cliquez sur "Enregistrer mes informations".
  • Dans l'étape suivante, cliquez sur "Me connecter à Instagram", une fenêtre de connexion apparaîtra: saisissez les identifants de votre compte Instagram. Une nouvelle fenêtre s'affichera, vous demandant d'autoriser votre application à accéder à votre compte Instagram. Cliquez sur le bouton bleu "Autoriser".
  • Vous serez ensuite redirigé vers votre manager à l'étape vous confirmant votre connexion.

La connexion à Instagram est maintenant opérationnelle. Vous pouvez désormais utiliser le widget Instagram pour afficher vos publications sur votre site.

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.