instagram-logo
instagram-logo

Test • Instafeed.js

Intégrez Instagram dans une page web

Si vous voulez intégrer vos publications INSTAGRAM sur une page web sans utiliser de plugin, j’ai testé ce script : instafeed.js. Voici comment procéder pour l’installer sur un site [ WordPress ]. Ce tutoriel s’adresse aux développeurs débutants et je détaillerai volontairement les procédures les plus anodines, pour une meilleure compréhension.

Les prérequis :

– Un compte Facebook avec un compte développeur (developers.facebook.com).
– Un compte INSTAGRAM (le votre ou celui d’un tiers).

Installation du script dans WordPress

Télécharger d’abord le script. Rendez vous pour cela sur le compte GITHUB du développeur : https://github.com/stevenschobert/instafeed.js puis dans le dossier instafeed.js/dist/ vous trouverez le fichier [ instafeed.js ] ou [ instafeed-min.js ] pour la version minifiée (le même qu’auparavant mais moins lourd).

Connectez vous en FTP sur votre serveur. Avec WordPress tous les scripts et les styles se chargent via le fichier monsite/wp-content/montheme/functions.php. Pour un fichier JS (JavaScript), utilisez toujours la fonction [ wp_enqueue_script() ]. Faites un copier/coller de la fonction ci-dessous et ajoutez la au fichier functions.php :

//
// Chargement du fichier instafeed.js
// Adaptez le chemin d'accès : '/src/scripts/instagram-feed' selon l'organisation de vos dossiers 
// 
add_action( 'wp_enqueue_scripts', 'vizibl_enqueue_scripts' ); 
function vizibl_enqueue_scripts() { 
  wp_enqueue_script( 'instafeed-src', get_template_directory_uri().'/src/scripts/instagram-feed/instafeed.js', array (), '1.0', true);
} 
// 

Une fonction pour charger des scripts [ add_action( ‘wp_enqueue_scripts’ ] existe peut-être (sûrement même) déjà dans votre fichier functions.php. Dans ce cas, inutile de recréer une autre fonction. Il suffit de rajouter la ligne ci dessus, directement entre les {…} de votre fonction déjà présente.

 
// 
wp_enqueue_script( 'instafeed-src', get_template_directory_uri().'/src/scripts/instagram-feed/instafeed.js', array (), '1.0', true);
// 

Votre script est maintenant installé. Pour vérifier, il faut aller sur la page du site concerné.  Faites un Clic droit (« Examiner l’élément »). Dans le bas de page avant la balise </body>, vous devez trouver cette ligne parmi d’autres scripts  :

 
// 
<script src="https://www.monsite.fr/wp-content/themes/monsite/src/scripts/instafeed.js?ver=1.0" id="SRC-insta-feed-js"></script>
// 

Appel et personnalisation d’instafeed.js

A ce stade, le script instafeed.js est présent sur votre site mais pour l’exploiter, il va falloir l’appeler avec une fonction qui vous permettra aussi de le personnaliser.
Pour cela il faut trouver sur votre site – toujours via votre FTP – le fichier principal qui gère le JS. Vous pouvez aussi créer un nouveau fichier JS mais  autant exploiter ce qui existe déjà.  Si votre thème est ordonné, vous pourriez le trouver ici : monsite/wp-content/montheme/scripts/main.js ou monsite/wp-content/montheme/js/global.js. Le nom de ce fichier importe évidemment peu. Une fois localisé, voici la fonction a ajouter à votre fichier main.js :

//
// Appel et personnalisation d'instafeed.js
//
window.onload = function viz_instafeed(){
  var feed = new Instafeed({
  accessToken:"votre-token-instagram",
  target:"viz-instafeed",
}); 
  feed.run();
}
//

Création du html sur votre site

Instafeed.js est présent. La fonction [ viz_instafeed() ] qui l’appelle et la surcharge aussi. Il reste une dernière chose. Instafeed.js va chercher une balise HTML avec un ID spécifique pour se déployer. C’est l’info qui est renseignée dans viz_instafeed() avec « target ». Il faut donc créer une balise avec l’ID [ #viz-instafeed ] là où vous souhaitez. Pour ce test j’ai directement intégré la balise dans le contenu en mode « Texte » sinon, cela sera interprété par WordPress comme du texte et non du code HTML.

//
<div id="viz-instafeed"></div>;
//

Création d’une APP dans Facebook-developers

L’installation sur votre site est maintenant complète. Pour la seconde étape, il faut se connecter à votre compte Facebook dev pour créer une APPLICATION.

  • Dans la rubrique MES APPLICATIONS > Créer une app
  • Choisissez une app pour « autrechose »
  • Renseignez les champs et nommez votre application
  • Ajoutez le produit Instagram Basic Display
  • Dans la rubrique RôLES (menu à gauche) > Testeurs Instagram > Ajouter Testeurs Instagram
  • Renseignez le compte INSTAGRAM que vous désirez partager sur votre page.
  • Le propriétaire doit valider ensuite la demande.
  • Quand la validation est effective, dans la rubrique Instagram Basic Display > Basic display
  • > User Token Generator > puis générer un token pour l’Instagram Test Users
  • Copier le mot de passe (token) qui est affiché.

C’est ce mot de passe qui va vous donner un accès aux données du compte INSTAGRAM validé.

Retournez ensuite dans votre site (via FTP) sur votre fichier JS global (main,js ou global.js ?) puis dans la fonction d’appel à instafeed.js, collez le token dans le champ accessToken.

Si tout est correct vous devriez voir apparaître sur votre site au niveau de la balise HTML (#viz-instafeed) les publications Instagram. Ici les données sont brutes. A vous de personnaliser le CSS et le JS, pour organiser une présentation qui vous convient. Pour vous aider, un détail existe sur le site INSTAFEED.JS.

Ma page Instagram intégrée