Retour au blog

Blog

Comment intégrer ses photos instagram sur son site

par Clément Mégnin le 24/08/2012 Code
61
accroche-instagram

DémonstrationTélécharger (Github)

Dans cet article, nous allons voir comment procéder pour récupérer puis intégrer un flux de photos instagram d'un utilisateur en php via l'API fournie par instagram. Cette méthode ne passe ni par un plugin, ni par une iframe, c'est une intégration php simple et directe.

 

1 - Identification

L'API instagram possède de nombreuses méthodes pour interagir avec le service. Nous allons donc dialoguer avec cette API pour récupérer les dernières photos d'un utilisateur. Pour autant, instagram n'est pas un service aussi ouvert que peut l'être Twitter par exemple, dans le sens où il nous demande de nous identifier pour utiliser l'API quand on veut effectuer des actions de la part d'un utilisateur. Nous allons donc voir dans cette première partie comment procéder pour s’authentifier correctement auprès d'instagram afin d'avoir la permission d'utiliser l'API.

 

1.1 - Créer un client

La première étape de l'identification consiste à créer un client. C'est une action qu'on effectuera une seule fois par site ou application sur lesquels on souhaite afficher les photos. Cela se passe sur le site d'instagram, à l'adresse http://instagram.com/developer/

Une fois sur ce site consacré aux développeurs, nous allons enregistrer une nouvelle application en cliquant sur le lien Register Your Application

Si vous n'êtes pas déjà connecté au site instagram, identifiez vous, puis retournez sur la page 'Register Your Application'. En haut à droite de cette page, cliquez le bouton Register a New Client

Un formulaire vous est présenté. Précisez le nom de votre application et sa description. Dans le cadre d'un site personnel par exemple, vous pouvez ici donner simplement votre nom dans le champ 'Application Name'. Pour les champs 'Website' et 'OAuth redirect_url', mettez simplement l'url de votre site web dans les deux cas en incluant http://

Une fois le formulaire enregistré, vous allez être redirigé vers la page de synthèse de toutes vos applications. Dans cette page, localisez l'application que vous venez d'enregistrer. Deux informations sont importantes et doivent être récupérées pour la suite de notre démarche, il s'agit du CLIENT ID, et de la REDIRECT URI. Copiez ces informations.

1.2 - Récupérer un access token

Un access token est une chaine de caractères qui identifie de manière unique un utilisateur instagram. C'est une information requise pour pouvoir effectuer bon nombre de requêtes à l'API. Nous allons donc voir comment récupérer ce fameux token.

 

1.2.1 - Visiter l'url d'autorisation

Un token est délivré via une url d'autorisation. Chaque url d'autorisation est unique suivant le client qui réclame un token, il faut donc au préalable préparer son url d'autorisation suivant les informations du client que nous venons de créer.

Le shéma de l'url d'autorisation se présente de la manière suivante :

https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

Pour créer notre url d'autorisation il nous faut donc remplacer dans cette url CLIENT-ID par votre CLIENT ID, ainsi que REDIRECT-URI par votre url de redirection.

 

1.2.2 - Récupérer le token

Une fois votre url d'autorisation prête, copiez-la et collez-la dans votre navigateur web. Vous allez être redirigé vers

http://your-redirect-uri#access_token=ACESSTOKEN avec votre token à la place de ACCESSTOKEN

Copiez ce token et gardez-le précieusement !

 

2 - Intégration

Maintenant que vous possédez un access token, qui certifie que votre site est authentifié en bonne et due forme auprès d'instagram, nous allons pouvoir commencer l'intégration php.

Comme nous l'avons dit plus tôt, cette intégration se veut simple et rapide. Elle est accessible aux développeurs de tout niveau, il n'est pas vraiment nécessaire de posséder un très bon niveau de programmation pour pouvoir l'utiliser. Seul 2 étapes sont nécessaires : la mise à jour des réglages, et la mise en place de quelques lignes de code.

 

2.1 Réglages

Pour que cette intégration soit facile à réaliser, la logique a été préparée pour vous dans une classe php appelée instagram.php. Vous n'aurez probablement pas à aller plonger dans ce fichier, le travail de l'ombre a été fait pour vous.

Vous allez quand même devoir spécifier deux réglages pour pouvoir faire marcher tout cela, votre username instagram, et votre access token que vous venez de récupérer.

Option Par défaut (type) Description
$username '' Spécifiez ici le username de la personne dont vous voulez afficher les images
$access_token '' Spécifiez l'access token de votre site
$count 20 Le nombre de photos qui sera retourné

Ouvrez donc le fichier de la page dans laquelle vous souhaitez afficher vos photos, collez le code suivant, puis remplacez les différents paramètres pour qu'ils vous correspondent.

//1 - Settings (please update to math your own)
$username='yourusername'; //Provide your instagram username
$access_token='youraccesstoken'; //Provide your instagram access token
$count='10'; //How many shots do you want?

2.2 Implémentation

Copiez puis collez ensuite le code suivant :

//2 - Include the php class
include('instagram.php');
//3 - Instanciate
if(!empty($username) && !empty($access_token)){
$isg = new instagramPhp($username,$access_token); //instanciates the class with the parameters
$shots = $isg->getUserMedia(array('count'=>$count)); //Get the shots from instagram
} else {
echo'Please update your settings to provide a valid username and access token';
}
//4 - Display
if(!empty($shots)){ echo $isg->simpleDisplay($shots); }

Ce code inclut la classe php où est stockée tout la logique (ligne 2). Si vous avez une erreur vous indiquant que ce fichier est introuvable, vérifiez que le chemin vers le fichier est bien correct. Dans cet exemple précis, le programme assume que le fichier instagram.php est dans le même dossier que la page dans laquelle vous souhaitez afficher vos photos. Si ce n'est pas le cas, modifiez le chemin vers la classe.

Les images sont récupérées ligne 6, puis affichées ligne 11. Si vous souhaitez programmer votre propre affichage sans passer par celui de la classe, vous pouvez commenter la ligne 11 et utiliser la variable $shots. La méthode d'affichage simpleDisplay() a été préparée pour permettre un intégration de type copier coller rapide, et accessible aux non experts.

Voilà donc pour cette intégration instagram en php.
Vous pouvez en voir un exemple dans la démonstration, ainsi que sur le site d'Adrien

61 réponses à Comment intégrer ses photos instagram sur son site

  1. Normalement le access_token sert à indentifier un user instagram... donc pourquoi pas l'utiliser comme vous faites mais le problème c'est qu'on ne connait pas la durée de vie de ce token.

  2. Hello, après quelques manips.. cela fonctionne merci :-)
    j'ai par contre créer un dossier "temp" avec les droits en écriture... et modifier dans le fichier "instagram.php" le chemin d'accès. Le fait d'ouvrir et écrire dans un fichier peut bloquer chez certains si les droits ne font pas corrects. a++

  3. author

    @Ben, oui effectivement on ne connait pas la durée de vie du token. Il n'y a pas vraiment de communication de la part d'instagram sur ce sujet. Pourtant ce token est obligatoire si on veut faire des appels à l'API. Voici pourquoi nous avons choisi d'expliquer comment faire pour obtenir un token dans cet article. Dans notre cas, il identifiera l'utilisateur qui a fait la démarche d'ajouter un client OAtuh à son compte, en l'occurence, la personne qui veut ajouter les photos à son propre site. Si les tokens ont une durée de vie trop courte, j'imagine qu'Instagram mettra à notre disposition une méthode pour les mettre à jour. Pour l'instant je pense qu'on peut les utiliser sans problème.

  4. @Jeremy, je ne remets pas du tout en cause votre tuto qui est très intéressant !
    J'essaye de comprendre comment font les sites tels que followgram.me, web.stagram.com, pour afficher un profil sans être connecté...
    J'ai l'impression qu'ils "volent" les access_token des utilisateurs qui se connectent pour pouvoir afficher du contenu aux non-connectés.

  5. author

    @Ben, pas d'inquiétude, c'est bien plus simple que cela :) . Les sites comme followgram.me ont un compte instagram, ils ont enregistré leur application pour obtenir un token. C'est ce token qu'ils utilisent pour faire les requêtes à l'API. Mais ces requêtes peuvent concerner n'importe quel utilisateur instagram. Avec une seule application enregistrée et donc un seul token, on peut afficher les photos de tout le monde donc. (il doit bien y avoir des restrictions à certains niveau quand même j'imagine).

  6. Bonjour, tout d'abord je tenais à te remercier pour ce tuto ! J'ai aussi deux questions à propos de ce tuto :
    - Je ne comprends pas comment récupérer la classe instagram.php ? Soit j'ai loupé une étape, soit il manque une information.
    - Je souhaiterais faire un site comme Copygram, c'est à dire qui permette aux gens de se connecter avec leur compte Instagram sur mon site via un formulaire de login pour ensuite voir leur photos instagram. Car dans ton tuto cela explique juste comment se connecter avec son pseudo et l'acces token. Ou alors j'ai encore une fois rien compris...

    Merci !

  7. author

    @Romain. Bonjour, pour télécharger les fichiers mentionnés dans le tutoriel, il vous suffit de cliquer sur télécharger en dessous de la photo d'illustration, cela vous emmènera sur le site de Github, où sont hébergés les fichiers.

    Pour le point numéro 2, c'est tout à fait possible, mais pas avec la méthode expliquée ici. Il faut mettre en place une connexion de type oAuth entre votre application et instagram afin qu'ils autorisent votre application à accéder à leur photos. C'est un peu plus compliqué. Ce tutoriel est plus orienté vers une utilisation personnelle.

  8. EDIT: Pour la classe instagram.php, autant pour moi, je n'avais pas vu le GROS bouton Telecharger...

  9. Merci pour la réponse ! Je vais de suite commencer mes recherches sur la connexion de type oAuth !

  10. author

    @Romain, en gros il faut donner l'url d'autorisation à votre utilisateur. Il va cliquer dessus, et ça va le rediriger vers l'url de redirection que vous aurez spécifié dans le point 1.1 avec son token en paramètre. C'est donc sur cette page qu'il vous faudra faire un traitement pour sauvegarder le token de cet utilisateur pour l'utiliser à chaque fois. Quand cet utilisateur sera connecté sur votre site, il faudra donc utiliser son token et son username, et passer tout ça à la classe instagram.php. Pour plus d'informations sur l’authentification, voici la méthode: http://instagram.com/developer/authentication/ ( cf server side, explicit flow). Cordialement.

  11. Hello !
    J'ai suivi toutes les directives mais j'ai du passer à côté de quelque chose puisque lorsque je copie colle le code fournit à 2.1 et 2.2 dans mon index.php, il s'affiche en brut sur la page où devrait s'afficher mes photos instagram...

  12. Re-hello, en fait j'ai réussi, il fallait ouvrir les balises php, ben oui... héhé.
    Mais bon ça ne fonctionne toujours pas puisque j'ai Warning: include() [function.include]: URL file-access is disabled in the server configuration in /homez.346/blablabla/index.php on line 52 ainsi que d'autres erreurs de chemins.

  13. author

    @Fanette G. Bonjour. Les chemins que vous avez utilisé pour inclure vos fichiers sont ils sous la forme d'url? Cette erreur survient quand on utilise des urls et non des chemins de dossiers pour inclure ses fichiers. Il faut vérifier vos chemins d'inclusion. Une autre solution pourrait être de configurer l'instruction allow_url_fopen = ON dans votre php.ini si vous avez la main dessus, mais je pense qu'il y a un soucis de chemin d'inclusion plutôt.

  14. Au début j'avais cette erreur, puis j'ai remis au final le chemin de base car le fichier instagram.php est dans le même dossier que mon index.php. Pourtant j'obtiens quand même les erreurs suivantes :
    Warning: fopen(__DIR__/f922f46cd30d721588cb45685ae2e009_38.txt) [function.fopen]: failed to open stream: No such file or directory in /homez.346/blabla/instagram.php on line 120

    Warning: fwrite(): supplied argument is not a valid stream resource in /homez.346/blabla/instagram.php on line 121

    Pourtant, mon fichier est bien à cet endroit ! J'ai mis les droits en 777, pas de changements. Je sèche...

  15. author

    Ok la mise en cache ne marche pas sur votre serveur apparemment. Et si vous commentez les lignes 107, 120,121,122 et 123 de instagram.php ça marche?

  16. C'est à dire? Si j'ajoute des // devant ces lignes j'obtiens
    Warning: file_get_contents(__DIR__/f922f46cd30d721588cb45685ae2e009_01.txt) [function.file-get-contents]: failed to open stream: No such file or directory in /homez.346/bllabla/instagram.php on line 125
    /!\ error getUserIDFromUserName. /!\ error empty username or access token.

    Bon bon, pourtant le token est normalement bon et mon username instagram aussi.

  17. author

    Oui c'est ça il faut mettre des // devant. Il va aussi falloir changer la ligne 125 du coup comme suit: $query = json_decode($request);. Vu qu'on a enlevé le mécanisme de mise en cache.

  18. Ah, voilà, c'est parfait ! Merci beaucoup pour votre aide ! :)

  19. author

    De rien. ce n'est pas idéal de ne pas avoir de cache par contre mais bon si il n'y a pas trop de requête par heure sur la page où vous affichez les photos ça devrait aller. Envoyez nous un lien vers votre galerie photo quand elle sera prête :) .

  20. Tout dépend des jours, enfin dans l'absolu c'est étrange que le cache ne fonctionne pas, un pb avec ovh ? Je ne sais pas du tout.
    La gallerie est accessible ici http://www.fanetteg.com/miaou en bas de page ! Encore merci :)

  21. Bonjour,
    j'obtiens cette erreur : "/!\ error getUserIDFromUserName. /!\ error empty username or access token."
    Pourtant le username et le token sont bien renseigné comme le tuto l'indique...

    Avez vous une solution?
    J'utilise actuellement l'API en local cela viendrait-il de la?

  22. Merci pour le tuto !

  23. author

    @la_lvlouche. Cette erreur peut avoir plusieurs causes. Il va falloir faire du debug un peu plus poussé, mais malheureusement ce n'est pas quelque chose que nous pouvons faire via le blog. Je ne penses pas que cela vienne du fait que vous développiez en local, car j'ai moi même travaillé sur ma machine afin de mettre au point cette solution.

  24. Bonjour,

    Déjà merci pour ce topic super intéressant et détaillé, ça fait très plaisir.

    Je ne mis connais pas trop dans tout ces langages, mais j'ai tout de même suivis votre conversation avec "Fanette G" ayant le même problème qu'elle.
    Mais je bloque sur la la dernière phase lorsque vous dites de remplacer la ligne 125 par: $query = json_decode($request);
    Le message d'erreur reste le méme,
    "Parse error: syntax error, unexpected T_VARIABLE, expecting T_FUNCTION in /mnt/113/sdb/9/b/roman.abrate/wordpress/wp-content/themes/modularity-lite/instagram.php on line 125"

    Je vous remercie de votre patiente.
    Roman

  25. author

    @roman. Hello. Vous avez une erreur de syntaxe. Sachant qu'il n'y en a pas dans le code initial, vous avez peut être mal copié une chose ou l'autre. Essayez de refaire la manipulation. Si cela ne marche toujours pas, je suis désolé mais il faudra faire du debugging plus poussé, ce que malheureusement nous ne pouvons faire via le blog. Cordialement.

  26. ok,
    merci pour votre réponse !

  27. Bonjour,

    Est-on obligé de passer par l'API instagram avec identification pour récupérer les images? Ou ne peut-on pas directement utiliser http://instagram.com/username/media e.g. http://instagram.com/bentoutif/media qui est accessible sans identification?

  28. author

    @Cyrille. Bonjour, je n'étais pas au fait de cette url, et pour cause, elle ne fais pas partie des points d'entrée listés dans la documentation officielle de l'API instagram.

    Techniquement, si l'url est accessible directement, et qu'elle retourne un json permettant de réaliser l'intégration, alors oui on pourrait effectivement l'utiliser.

    Après sur le concept, je me demande si c'est pour autant pertinent de baser son intégration sur un point d'entrée non documenté et non identifié juste parce que l'on peut? D'un point de vue personnel, quand je travaille avec des services tiers, je préfère me baser sur les ressources officielles car on est tributaire dudit service. Ce qui est hors cadre est par définition plus susceptible de changer sans prévenir.

    En résumé, on ne semble pas obligé, mais si j'avais un choix à faire, je resterais sur l'api authentifiée.

  29. may i use this code to write a plugin for a social network framework? credits will be yours of course. i'm simply just porting the code into the framework as a plugin. btw what license is this under and what license can i distribute the plugin as?

  30. author

    @Manacim. You can of course use this code. It's publicly available on GitHub. If you keep us in the credits it can be used under the creative commons licence.

  31. Bonsoir,

    J'essai l'intégration depuis quelques heures, et pourtant je ne trouve pas de solution, j'ai bien mon nom de compte IG et mon token, mais j'ai le message : "Please update your settings to provide a valid username and access token"

    Je ne trouve pas de solution... Une idée ?

    Merci encore pour ce tuto.

  32. author

    @Kamidh. Bonjour. Cette erreur est affichée quand le nom d'utilisateur et le token sont mal renseignés. Il faut les mettre à jour dans le fichier demo.php lignes 44 et 45.

  33. thank you! i will give you proper credit :)

  34. Bonjour @Jérémy, pourtant pas d'erreur dans mon nom d'utilisateur et token...

  35. @Jérémy
    j'ai fait une 'clean' install des fichiers, j'ai réalisé les modifications du code php que tu as soumis à Fanette G et ça marche. Tu peux supprimer mes postes précédents, pour ne pas polluer ton blog. Je te remercie encore.
    @Kamidh
    utilise le code de la partie 2.2 du tuto plutôt que celui du fichier demo.php.

  36. @Mathieu, j'ai essayé avec le code de la partie 2.2... même problème... Je suis pas un expert en php en plus alors la je nage.

    http://www.kamidh.com/test/

  37. @Kamidth
    Chez moi avec ton acces token ça marche. Si tu as un email a me donner je t'envoie les fichiers configurés avec ton acces token.

  38. @Kamidth
    Tu peux télécharger les fichiers configurés pour toi à cette adresse : http://m4thiew.free.fr/instagram/instagram.zip

  39. Oh merci !

    Mais je dois vraiment avoir un problème :

    http://www.kamidh.com/instagram/

  40. it seems like i can't release the plugin as Creative Commons license, the only viable option would be to release it as GNU General Public License (GPL) version 2. would that cause any problem if i give you proper credit?

  41. oh i forgot to mention that the website has no option to release it under creative commons, would you be ok if i release it as GPL v2 and give you credit?

  42. Bonsoir à tous.

    Voila j'ai le même problème que @Kamidth.

    J'ai refais une installation Clean de tous ça mais, j'ai toujours ce message qui apparaît : "Please update your settings to provide a valid username and access token"

    Mon username est bon ainsi que mon access token, je ne comprend pas...

    Si quelqu'un a une solution, pourrait-il me venir à l'aide. Merci

    Passez une bonne soirée 😉

  43. Merci pour cette classe instagram ! J'ai eu du mal à la faire fonctionner en local au début, pas de messages d'erreur en particulier... et en fait il fallait activer open_ssl dans Wamp 😉

    Petite question, y a t'il possibilité d'automatiser la requête de l'access_token au lieu de le faire à la main ? Car si le token expire, on se retrouve embête... Si vous avez une idée je suis preneur !

  44. Bonjour, merci pour votre contribution. Est-il possible de suite un tag plutôt qu'un compte ? Merci par avance.

  45. Bonjour,
    Merci pour ce tuto bien rédigé. Cependant, comment récupérer les photos provenant d'un hastag particulier ?

  46. Merci beaucoup pour ce tuto très intéressant et surtout très flexible !

  47. Serait il possible dans ces cas là, de ressortir des infos du fichier cache pour ne pas avoir de message d'erreur ?

  48. Bonjour,
    Avant tout, merci pour votre tuto qui est d'une grande aide. Je suis en train de créer un site-blog via tumblr et je souhaite rajouter l'option instagram sur le site. L'interface que j'utilise est tout à fait simple et me demande juste de copier-coller l'access token dans la case prévu à cet effet. J'ai donc suivi les étapes 1 et 1.2 avec succès. J'ai récupéré l'acess token mais lorsque je le copie-colle dans la case et qu'ensuite je clique sur l'icone instgram integrée au site du site, j'ai ces deux messages :
    Instagram’s API service is experiencing some technical difficulties. Please try again later.
    The "access_token" provided is invalid.

    Pourriez-vous juste me donner votre opinion ? Par avance merci pour votre aide précieuse!

  49. Merci pour le tuto et pour la classe instagram.php =)

  50. Bonjour,
    Que faire lorsqu'on a cette erreur :

    Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /home/www/site/instagram.php on line 111

    Warning: file_get_contents(https://api.instagram.com/v1/users/search?q=nom_site&access_token=bon-access_token) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /home/www/site/instagram.php on line 111
    /!\ error getUserIDFromUserName. /!\ error empty username or access token.

  51. author

    @Tef. C'est un problème avec la configuration de votre serveur. Il va falloir modifier la directive allow_url_fopen contenue dans le fichier de configuration php.ini, et la passer à On.

  52. Bonjour Jérémy,
    Comme je suis sur un hébergement mutualisé, je ne pouvais pas modifier le fichier php.ini. Du coup, après une brève recherche, j'ai compris qui je pouvais activer allow_url_fopen en intégrant dans un fichier .htaccess la commande suivante :

    php_flag "allow_url_fopen" "On"

    Problème résolu, ça marche 😉

  53. Bonjour,
    est-il possible d'avoir une pagination des anciennes photos. Car il me semble que l'affichage est limité à 32 images.

    Merci par avance.

  54. Tried implementing this script but i keep getting erorrs such as '/!\ error getUserIDFromUserName. /!\ error empty username or access token' or 'Please update your settings to provide a valid username and access token' even though I have entered the right username and access_token. What could be wrong???

  55. Bonjour,
    J'aimerais insérer un flux instagram à une page d'une boutique tictail. Sachant qu'on ne peut toucher qu'au html et css. Est-ce possible?
    Merci d'avance!

  56. Bonjour @Jérémy
    Comme @mrskater, j'aurais bien aimé savoir comment affiché plus de 32 ou 33 images par une pagination ou autre ?
    Merci beaucoup pour ce tuto 😀

  57. Bonjour,

    Ce plugin fonctionne à merveille, merci encore. En localhost je n'ai aucun souci par contre lorsque je le déploie sur mon site j'ai le message : "/!\ error getUserIDFromUserName. /!\ error empty username or access token."

    Je viens de revérifier le token et tout va bien :(

  58. salut jérémy et ton script que j'utilise c'est nickel :)

    seul prob je me suis aperçu qu'il y avait une limite sur le nombre d'images (33 je crois chez moi).

    je n'arrive pas à savoir si on peut soit ajouter une pagination soit l'idéal en AJAX un chargement de plus de photos type "load more".

    as-tu des pistes ?

    bonne continuation !

  59. Bonjour et merci pour ce tutoriel.

    Mon blog fonctionne avec un thème qui me permet de construire ma homepage comme je souhaite en utilisant un programme "builder" : j'organise des blocs (texte, articles, widget, etc.) comme bon me semble.

    Je ne peux donc pas insérer le code tel qu'il est. J'ai demandé le support de l'auteur de mon thème (Alyoum) qui m'a dit qu'il fallait que je créé un plugin tout simple et que je le mette dans un "bloc".

    J'ai inséré le code ci-dessous dans un fichier *.php avant le code de cet article, mis le fichier dans un dossier et déposé le tout sur mon serveur avec les autres plugins. J'ai mis le fichier instagram.php à la racine de mon serveur donc l'adresse que j'ai mise est http://planetemaneki.com/instagram.php

    Lorsque j'active l'extension, le code du fichier s'affiche en haut de mon écran... Voici le code que j'ai mis avant le code détaillé sur cette page :

    < ?php
    /**
    * Plugin Name: InstagramGalerie
    * Plugin URI: http://www.planetemaneki.com/wp-content/plugins
    * Description: Plugin permettant creer une galerie Instagram
    * Version: Version 1.0
    * Author: Planete Maneki
    * Author URI: http://www.planetemaneki.com
    * License: GPL2 license
    */

    Est-ce que j'ai oublié quelque chose ? Merci par avance !