Je vous partage un script que j’ai modifié moi-même pour palier mes besoins personnels.
Le besoin : quand je fais des voyages, je publie au fur et à mesure sur mon compte Instagram des photos de ce que je fais, avec des commentaires explicatifs. Plus tard, je souhaite faire des billets sur mon blog à partir de ces photos et de ces commentaires (on dit ‘caption’ dans le langage Instagram) : j’ai donc besoin de tout récupérer. En ce qui concerne la récupération des photos, c’est assez simple, il suffit d’utiliser des services comme Instaport. Pour ce qui est des captions, c’est plus compliqué. Cela fait donc plusieurs fois que je fais ça avec un script js qui s’appelle Instafeed. Mais il n’est pas réellement fait pour, donc il m’a fallu le modifier pour qu’il fasse ce que je veux.
Pour commencer, j’ai modifié le js d’instafeed pour rajouter deux options que propose Instagram mais que le gars d’Instafeed n’avait pas ajouté (si mes souvenirs sont bons, je lui ai demandé de les ajouté en lui donnant le nom de ces deux options et en lui disant que j’en avait besoin, mais je ne crois pas qu’il m’ait répondu…).
Bref, voilà comment il faut modifier le script d’Instafeed pour ajouter ces deux options (c’est à la ligne 243 du script actuel non minifié) :
if (this.options.limit != null) {
final += "&count=" + this.options.limit;
}
if(this.options.maxId != undefined){
final += "&max_id=" + this.options.maxId;
}
if(this.options.minId != undefined){
final += "&min_id=" + this.options.minId;
}
final += "&callback=instafeedCache" + this.unique + ".parse";
return final;
Ensuite, le script de la page HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Instafeed JS</title>
<script type="text/javascript" src="./instafeed.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
</head>
<body>
<div id="instafeed"></div>
<div id="previousfeed"></div>
<script type="text/javascript">
var currentMaxId;
var getInstaFeed = function(){
var lastContent = $('#instafeed').html();
var previousContent = $('#previousfeed').html();
$('#instafeed').empty();
$('#previousfeed').html(lastContent + previousContent);
var userFeed = new Instafeed({
get: 'user',
userId: 4354774,
accessToken: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
sortBy:'least-recent',
limit:60,
maxId:currentMaxId,
template: '{{caption}}<br />',
success: function(result){
if(typeof(result.pagination.next_max_id) != 'undefined'){
currentMaxId = result.pagination.next_max_id;
console.log(result.pagination.next_max_id);
}
}
});
userFeed.run();
}
</script>
</body>
</html>
- Vous noterez que j’ai rajouté un appel à Jquery (parce que je suis mauvais en Vanilla JS et que je n’ai pas trop envie de passer des heures à chercher, bravo !).
- J’utilise une variable globale pour le maxId en cours. Ca permet d’appeler toujours la même fonction sans lui passer à chaque fois le maxId suivant. Elle le prend toute seule.
- Le template que j’utilise n’a pour object que la simple écriture du commentaire de la photo, suivit d’un retour à la ligne.
- A chaque appel, je loggue le maxId en cours, mais cela n’a rien de nécessaire.
- Par contre, je ne vous ai pas mis mon Token Instagram (c’est le XXXXXXXXXXXXXXXX qu’on voit dans le script), mais évidemment vous aurez besoin d’en avoir un pour utiliser ce script sur votre compte (enfin je crois). Pour cela, lire les deux lignes du paragraphes « Requirement » sur la page d’accueil d’Instafeed. Easy.
Finalement, pour utiliser ce script, il suffit d’afficher la page HTML, d’ouvrir la console et de taper : getInstaFeed();
Et à chaque fois que vous taperez getInstaFeed(); le script remontera dans le temps votre fil Instagram en terme de commentaires et vous les affichera au dessus des plus récents.
