Utiliser Instagram sur votre site internet – Utiliser l’API d’Instagram pour afficher et vos photos sur votre site.

L’avantage d’utiliser l’API d’Instagram pour gérer les photos d’un site web est que cela permet de déléguer la gestion de la partie photo à Instagram plutôt que de développer une solution de gestion de photo interne au site. En utilisant l’API, vous pouvez directement récupérer les photos de votre compte Instagram pour les afficher sur votre site, et cela évite de devoir télécharger, stocker et gérer les photos en interne.

De plus, Instagram étant une plateforme très populaire pour le partage de photos, cela permet de toucher un public plus large en utilisant la notoriété et la publicité que représente Instagram. Cela peut être un atout important pour les entreprises cherchant à promouvoir leur marque ou leurs produits, en utilisant des hashtags pertinents pour toucher un public intéressé par leur domaine d’activité.

Enfin, l’utilisation de l’API d’Instagram permet de bénéficier des fonctionnalités et des mises à jour régulières de la plateforme, ce qui peut être un avantage pour maintenir une solution de gestion de photos à jour et sécurisée.

Pourquoi je traite de cela ?

En fait, le matos c’est aussi le matos logiciel, vos sites internets, vos données, et votre stratégie numérique. Je vais donc parler un peu de matos conceptuel, de matos pseudo-immatériel : le WEB, le cloud, les sauvegardes, etc.

1. Créer l’application, authentifiez-la et récupérez le TOKEN !

Tout d’abord, vous devez relier votre compte Instagram a votre compte facebook.

Ensuite, vous devez créer une application.

Enfin vous allez récupérer les codes suivants comme indiqué dans la page d’aide disponible ici : https://developers.facebook.com/docs/instagram-basic-display-api/getting-started

C’est expliqué très simplement et en français en plus…

vous allez passer par des étapes amusantes comme l’authentification…

Ensuite, vous allez récupérer le TOKEN qui est la clé pour utiliser tout votre contenu Instagram sur votre site.
Afficher les photos de votre Instagram sur votre site

le code php suivant va directement choper les infos de votre choix depuis votre compte instagram.

<?php
// Récupération des données Instagram en utilisant l'API Graph
$url = "https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,permalink,thumbnail_url,thumbnail_width,thumbnail_height,like_count,timestamp&access_token=VOTRE_TOKEN";
$data = file_get_contents($url);
$posts = json_decode($data, true);

Ensuite vous pouvez, si vous avez envie de plus de clarté, remplacer les morceaux plein de guillemets ou d’apostrophes par des variables plus propres, les trucs avec le dollar, les $truc_machin ou truc_machin désigne et signifie ce qu’est la valeur en question. Par exemple, l’url du post instagram ça sera $link, la description de la photo $title, l’url ave

$image = $post['media_url'];
$link = $post['permalink'];
$title = $post['caption'];

Voila, maintenant il est possible d’utiliser tout ça, ce faire tourner une boucle foreach pour chopper le plus possible de posts, avec ce que vous avez fait jusqu’ici, normalement, vous pouvez pas dépasser 25 posts et les posts avec de multiples images vont afficher uniquement la première image.

Voila à quoi ressemble le code pour faire votre boucle.

foreach ($data['data'] as $post) {
    $image = $post['media_url'];
    $link = $post['permalink'];
    $title = $post['caption']['text'];

    echo '<img src="' . $image . '" alt="' . $title . '">';
    echo '<a href="' . $link . '">' . $title . '</a>';
}

Maintenant, un peu de design web, affichons nos miniatures sur trois colonnes dans une belle grille, on va utiliser du CSS pour la mise en page, ça donne ça pour le CSS:

.post-grid {
    display: flex;
    flex-wrap: wrap;
}

.post {
    width: 33.33%;
    padding: 10px;
    box-sizing: border-box;
}

.post img {
    display: block;
    width: 100%;
    height: auto;
}

.post h3 {
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
}

et le code pour la page HTML:

<div class="post-grid">

<?php

foreach ($data['data'] as $post) {
    $image = $post['media_url'];
    $link = $post['permalink'];
    $title = $post['caption']['text'];

    echo '<div class="post">';
    echo '<a href="' . $link . '"><img src="' . $image . '" alt="' . $title . '"></a>';
    echo '<h3><a href="' . $link . '">' . $title . '</a></h3>';
    echo '</div>';
}

?>

</div>