Vous avez besoin d’afficher les médias de votre compte Instagram sur une application ou un site? Plusieurs solutions existent comme :

  • Utiliser ce qu’on appelle un “social media aggregator” comme Curator.io, Taggbox ou Juicer.io
  • Si vous utilisez un CMS, installer une extension qui permet d’afficher un feed Instagram
  • Créer vous-même votre galerie avec l’API Basic Display d’Instagram

Utiliser un social media aggregator ou une extension implique qu’il faut donner l’accès à son compte Instagram à une application tierce. Pour des produits reconnus comme Taggbox cela ne devrait pas poser de problèmes mais pour une extension WordPress c’est autre chose. Ces produits sont, de plus, généralement payants et assez chers.

Dans cet article, nous allons obtenir un token pour pouvoir envoyer des requêtes et nous familiariser avec l’API Basic Display d’Instagram.

A savoir : Instagram propose aussi l’API Graph qui permet de récupérer plus d’informations mais aussi d’effectuer plus d’actions comme la gestion des posts. L’API Basic Display, comme son nom l’indique, permet seulement d’afficher des informations de base (profil, images).

Le guide

Je vous propose de suivre ce guide très complet Getting Started with the Instagram Basic Display API.

En résumé

C’est bon, vous avez tout lu? Voici les étapes résumées avec quelques précisions supplémentaires pour reproduire ce guide facilement et rapidement :

1. Création d'une application Facebook

Sur la plateforme Facebook for Developers , créer une application puis y ajouter le produit “Instagram”. Cela permettra d’avoir le duo ID de l’app Instagram et la clé secrète de l’app Instagram qui seront utiles pour demander un token. Dans le cadre du tutorial, on utilisera l’URL https://httpstat.us/200 

2. Demander l'accès au compte Instagram

Ajouter un testeur Instagram (dans le menu Rôles) qui sera le compte Instagram dont on souhaite récupérer les données. Il faut ensuite accepter l’invitation directement sur le site d’Instagram. 

Pour que notre application puisse accéder au compte Instagram, on génère le lien d’autorisation :

https://api.instagram.com/oauth/authorize?client_id={instagram-app-id}&redirect_uri=https://httpstat.us/200&scope=user_profile,user_media&response_type=code

Entrer ce lien dans votre navigateur en étant connecté avec le compte Instagram testeur. Récupérer ensuite le code d’autorisation qui est dans l’URL redirigée (le paramètre code).

3. Obtenir le token

Avec ce code d’autorisation, nous allons pouvoir faire des requêtes à api.instagram.com pour obtenir des tokens d’accès.

Si vous utilisez Postman, n’oubliez pas de sélectionner x-www-form-urlencoded car l’API utilise des url-encoded data. 

Première requête : obtenir un short-lived token
Type de la requête : POST
URL de la requête : https://api.instagram.com/oauth/access_token
Body : 

    • client_id : ID présent sur le site Facebook for Developers puis Produits > Instagram > Basic Display
    • client_secret : clé présente sur le site Facebook for Developers puis Produits > Instagram > Basic Display
    • grant_type : authorization_code
    • redirect_uri : https://httpstat.us/200
    • code : code obtenu à l’étape 2

Réponse : access_token et user_id (on aura besoin de ce dernier pour récupérer les informations liées au profil Instagram)

 

Deuxième requête : échanger le short-lived token pour un long-lived token
Le long-lived token a une durée de vie de 6 mois pour le moment, contrairement au short-lived token que nous venons d’obtenir qui ne dure qu’une heure.
Type de la requête : GET
URL de la requête : https://graph.instagram.com/access_token
Paramètres : 

    • client_secret : clé présente sur le site Facebook for Developers puis Produits > Instagram > Basic Display
    • access_token : le token obtenu précédemment
    • grant_type : ig_exchange_token

Réponse : access_token, token_type et expires_in

 

Troisième requête : rafraîchir le token
Pour obtenir un autre token d’une durée de vie de 6 mois, nous pouvons demander un nouveau token avec le token actuel.
Type de la requête : GET
URL de la requête :  https://graph.instagram.com/refresh_access_token
Paramètres :

    • access_token
    • grant_type : ig_refresh_token

Réponse : access_token, token_type et expires_in

4. Récupérer les informations du profil Instagram

Enfin! Nous avons tous les éléments pour faire nos requêtes et récupérer les informations liées au profil Instagram dont nous avons obtenu l’autorisation. 

Pour obtenir les médias du profil en lecture, nous allons effectuer la requête suivante :
Type de la requête : GET
URL de la requête : https://graph.instagram.com/[USER_ID]/media
Paramètres :

  • fields : liste des champs désirés (par défaut : id seulement, j’utilise les champs media_url et permalink)
  • access_token : notre short ou long lived token
  • limit (optionnel) : nombre max de médias à récupérer

Et voilà, vous avez les médias du profil, amusez-vous maintenant à les intégrer à votre application avec votre langage front préféré! 

Conclusion

Avec ce guide, nous avons vu comment obtenir facilement un token, sans passer par l’autorisation de l’application, pour accéder à l’API Basic display d’Instagram qui permet un accès en lecture seule aux médias et à certaines informations du profil.

Remontée des images Instagram avec Vue.js

Pour effectuer d’autres actions comme la publication de posts et avoir accès à plus d’informations comme le nombre de likes, il faudra utiliser l’API Graph d’Instagram dont le process d’identification est malheureusement complètement différent.


Sources :