Mise en place d'une API instagram sur son site web

Pré-requis

Pour utiliser une API Instagram il faut respecter les critères suivants :

• Posséder un compte Instagram
• Avoir un flux de photos sur ce site
• Avoir importer la bibliothèque jQuery sur sont site
• Un nom de domaine

Configuration du compte developpeur

Pour configurer votre compte en tant que développeur vous aurez besoin de vous rendre sur le site suivant www.instagram.com/developer/.
Une fois arriver sur ce site, vous devrez cliquer sur Register Your Application. Voici un exemple : Lors de la création de votre application, vous allez devoir renseigner le nom de l'APIs, le choix vous ai libre. Ici je vais mettre Galerie Site, ensuite vous devez renseigner votre nom de domaine ainsi que les URLs pouvant utiliser cette aplication. Ensuite, vous devrez ajouter l'email de l'utilisateur, ici je renseigne le miens.
Si tout s'est bien déroulé, vous posséderez un N° de client appelé CLIENT ID. Celui-ci va nous permettre d'activer l'application. Passons désormais à la configuration côté client.
Attention, pour éviter d'obtenir sur une erreur 403, vous devez tout d'abord décocher Disable implicit OAuth, cela va permettre d'autoriser notre API de récupérer notre flux de photos.

Configuration

Authentification de l'API

Pour commencer à configurer notre API, nus aurons besoin de la bibliothèque Instafeed, pour cela vous pouvez la télécharger sur le site suivant http://instafeedjs.com/. Vous devez donc ajouter ce script sur la page où vous souhaitez voir apparaitre votre galerie Instagram. Ensuite nous allons procéder à la création d'un token d'accès qui nous sera nécessaire pour valider le site. Pour cela vous aller devoir rentrer l'url suivante dans votre navigateur préférez afin de récupérer le token : https://api.instagram.com/oauth/authorize/?client_id=votre CLIENT-ID&redirect_uri=URL du site&response_type=token.
Vous devrez insérer le Client ID que vous possédez à l'endroit souhaité dans l'url. De plus, vous devrez renseigner une des URLs que vous avez autorisées à l'endroit indiqué. Normalement, si tout se déroule comme prévu vous serez redirigé sur le site internet en question.
Attention, regarder l'url de redirection, le Token de l'API se trouve en fin d'URL. Celui-ci nous sera nécessaire lors du script de récupération des photos.
Maintenant nous devons récupérer l'ID de l'utilisateur Instagram, pour se faire vous devrez vous rendre sur le site suivant pour récupérer l'ID de l'utilisateur. Vous devrez juste renseigner le nom de l'utilisateur. codeofaninja.com/tools/find-instagram-user-id.

Script d'implémentation

Nous avons désormais tous les techniques d'accès pour implémenter la galerie Instagram sur notre site internet. Voici le code que j'ai utilisé pour le faire :

// How to get an access token:
// http://jelled.com/instagram/access-token

// {{model.user.username}}, {{likes}} likes

var galleryFeed = new Instafeed({
  get: "user",
  userId: 'USER ID',
  accessToken: "ACCES TOKEN",
  resolution: "standard_resolution",
  useHttp: "true",
  limit: 10, //Le nombre de photos à récupérer, ici les 10 dernières.
  template: '<li><img src="{{image}}" class="img-responsive"></li>', //Code HTML Généré
  target: "instafeed-gallery-feed", //ID de la div ou du champ ul dans notre cas pour réaliser une galerie du type Masonry. 
 
});

galleryFeed.run();

Conclusion

Voilà, nous avons terminé, vous savez désormais comment impémenter une galerie instagram sur un site à l'aide de l'API Instagram. Laissez libre court à votre imagination.