Retour vers l’ensemble des articles 📋

Créer une galerie Instagram sans API – Tutoriel complet

Introduction

Vous voulez afficher vos photos Instagram sur votre site web mais Facebook Developers vous demande des papiers d’entreprise ? L’API Instagram est devenue un cauchemar bureaucratique ? Ce tutoriel vous montre comment créer une magnifique galerie photo en contournant toutes ces restrictions !

🎯 Ce que nous allons créer

  • Une galerie photo élégante avec toutes vos photos Instagram
  • Système de filtrage par catégories (Paysages, Créations, etc.)
  • Chargement progressif avec bouton « Développer »
  • Design moderne : fond noir, police Blinker, style glassmorphism
  • Sans API, sans token, sans paperasse !


📋 Prérequis

  • Un compte Instagram public
  • Un navigateur web (Chrome/Firefox/Edge)
  • Un éditeur de texte
  • Un hébergement web (pour mettre le site en ligne)

🚀 Étape 1 : Récupérer les IDs de vos posts Instagram

1.1 Le script de collecte

Voici le script qui va collecter automatiquement tous les IDs de vos posts :
Vous pouvez le télécharger au format .js ICI 📸
Il vous faudra placer le contenu directement dans la console de votre navigateur (options développeur) le moment venu.
Tout est expliqué ci-dessous.

1.2 Comment utiliser le script

  1. Allez sur votre profil Instagram depuis un PC ou Mac : https://www.instagram.com/VOTRE_USERNAME/
  2. Ouvrez la console du navigateur : F12 → Onglet « Console »
  3. Collez le script et appuyez sur Entrée
  4. Laissez le script tourner (1-3 minutes selon le nombre de photos)
  5. Copiez le résultat : Le script affichera tous les IDs au format JSON

🎨 Étape 2 : Le template HTML générique

Voici le fichier HTML de base pour votre galerie. Créez un fichier « gallerie.html » ou « gallery.html » ou « pictures.html » ; « photos.html », bref, ce que vous préférez, et copier l’intégralité du code ci-dessous à l’intérieur.
Pour ce faire, vous pouvez utiliser Visual Studio Code ou créer un simple fichier .txt dont vous changerez l’extension en .html
Visualisez le afin de le copier/coller ou bien téléchargez le en cliquant ICI 🖼️

📝 Étape 3 : Assembler le tout

  1. Copiez les IDs obtenus avec le script
  2. Ouvrez le fichier HTML dans un éditeur de texte, renommez le si nécessaire.
  3. Recherchez et trouvez la ligne : const allPostIds = [
  4. Collez vos IDs entre les crochets, au format XX-XXXXXXXX où X est un caractère : const allPostIds = [ 'ID-1XXXXXXX', 'ID-2XXXXXXX', 'ID-3XXXXXXX', // ... tous vos autres IDs];
  5. Sauvegardez le fichier

🌐 Étape 4 : Mettre en ligne

  1. Nommez votre fichier : index.html ou gallery.html ou autre comme vu précédemment
  2. Uploadez via FTP sur votre serveur web. Il faut être familier avec cette procédure, mais vous trouverez des informations facilement.
  3. C’est tout ! Visitez votre URL pour voir la galerie

    Voici la nôtre :

    https://www.lowforehead.tech/lfhd_photography/pictures.html

🎯 Personnalisation

Changer le titre

Modifiez la ligne : <h1>Ma Galerie Instagram</h1>

Changer les couleurs

  • Bouton bleu : cherchez #1877f2 et remplacez par votre couleur
  • Fond : changez background-color: #000;

Nombre de photos par chargement

Modifiez : const PHOTOS_PER_LOAD = 9;

Catégories personnalisées (détection par l’IA à améliorer)

Modifiez la fonction getCategory() pour assigner vos propres catégories

🚨 Points importants

  • Compte public obligatoire : Instagram ne permet l’embed que pour les comptes publics
  • Limite de performance : Au-delà de 500 embeds, la page peut devenir lente
  • Pas de stockage : Les photos restent hébergées sur Instagram
  • Respect des CGU : Cette méthode utilise l’embed officiel d’Instagram

💡 Dépannage

« Le script ne trouve aucune photo »

  • Vérifiez que vous êtes bien sur votre profil Instagram
  • Attendez que la page soit complètement chargée avant de lancer le script

« Les embeds ne s’affichent pas »

  • Vérifiez que votre compte est public
  • Certains bloqueurs de pub peuvent interférer

« La page est lente »

  • Réduisez PHOTOS_PER_LOAD à 6 ou 3
  • Considérez de limiter le nombre total de photos

🎁 BONUS : Script tout-en-un AUTOGEN (auto-génération)
Plus besoin de copier-coller ! Upload direct et c’est parti ! 🚀

Vous voulez gagner encore plus de temps ? Après avoir collecté vos IDs avec le premier script, lancez ce script bonus dans la même console :

[Téléchargez-le ICI]

Ce script va automatiquement :

✅ Récupérer tous les IDs collectés

✅ Générer le site HTML complet

✅ Télécharger le fichier prêt à l’emploi

✅ Créer un backup JSON de vos IDs

🎉 Conclusion

Vous avez maintenant une magnifique galerie Instagram sans passer par l’API officielle ! Cette méthode est :

  • ✅ Gratuite
  • ✅ Sans limite de token
  • ✅ Sans paperasse administrative
  • ✅ Toujours à jour (les embeds se mettent à jour automatiquement)

Bon courage et amusez-vous bien avec votre galerie ! 📸


Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Leave the field below empty!

Lowforehead

You cannot copy content of this page