This article explains how to use the Instagram API to display images and videos posted on Instagram, as well as their link URLs, on a website.
By using this method, you can easily share Instagram content on your website.

When combined with the previous article “Instagram API Technique to Retrieve and Save Data to a JSON File at Specified Time Intervals [PHP]“, you can display the latest data posted on Instagram.

Contents
  1. About fetch and then
  2. CSS Code
  3. HTML Code
  4. JavaScript Code
  5. Demo page showing JSON data (img, video, URL) retrieved from the Instagram API using fetch and then
  6. Important Notes
  7. Summary

About fetch and then

fetch is a JavaScript feature used to asynchronously retrieve resources from a remote server. then is a method used to specify a function that runs when a Promise is successfully resolved. By combining these, you can retrieve data asynchronously and then perform subsequent processing.

CSS Code

Use the following CSS code to define the style of the web page.

<style>
body {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
h1{
    text-align: center;
    font-size: 20px;
    padding: 40px 0;
    line-height: 1.8em;
}
ul{
    list-style: none;
}
ul li{
    padding: 0;
    margin: 0;
}
ul li img{
    border: solid 1px #cccccc;
}
</style>

HTML Code

The Instagram images, videos, and link URLs will be output to id=”instagramimgs”.
The HTML code is as follows.

<ul id="instagramimgs">
</ul>

JavaScript Code

The JSON file to be loaded is “instagram.json“.
The JavaScript code below processes the JSON data retrieved from the Instagram API and displays images, videos, and link URLs.

<script>
// URL of the JSON file
const url = 'instagram.json';

// Load the JSON file using the fetch API
fetch(url)
  .then(response => {
    // Parse the response as JSON
    if (!response.ok) {
        throw new Error('The network response was not OK');
    }
    return response.json();
  })
  .then(data => {
    const mediadataArray = data.business_discovery.media.data;

    // Loop through each imgurl in mediadataArray
    mediadataArray.forEach(mediaItem => {
        const media_url = mediaItem.media_url;
            const permalink = mediaItem.permalink;

        // Create a new li element
        const liElement = document.createElement('li');
        
        // Create a new a element and set the href attribute
        const aElement = document.createElement('a');
        aElement.href = permalink;
        aElement.target = '_blank'; // Set to open the link in a new tab

        // Create a new img element and set the src attribute
        if(media_url.indexOf( 'video' ) != -1){
            const videoElement = document.createElement('video');
            videoElement.muted = true;
            videoElement.autoplay = true;
            videoElement.loop = true;
            videoElement.playsinline = true;
            videoElement.src = media_url;

            // Insert the video element into the a element
            aElement.appendChild(videoElement);
        }else{
            const imgElement = document.createElement('img');
            imgElement.src = media_url;
            imgElement.alt = '';

            // Insert the img element into the a element
            aElement.appendChild(imgElement);
        }

        // Insert the a element into the li element
        liElement.appendChild(aElement);

        // Insert the li element into the ul element
        document.getElementById('instagramimgs').appendChild(liElement);
    });
  })
  .catch(error => {
    // Error handling
    console.error('There was a problem with the fetch operation', error);
  });
</script>

Demo page showing JSON data (img, video, URL) retrieved from the Instagram API using fetch and then

You can check the demo page implementing the above code from the link below.

Demo page displaying JSON data (img, video, URL) retrieved from the Instagram API using fetch and then

Important Notes

  • To use this method, you need an access token to use the Instagram API.
  • When integrating this into a real website, please ensure security and privacy considerations.

Summary

In this article, we introduced how to use the Instagram API to display images, videos, and link URLs on a website. By using fetch and then, you can retrieve data asynchronously and dynamically display content. Try effectively utilizing Instagram content on your website.

　
※If you reuse this code, please do so at your own responsibility.
　Please do not reuse the Google Analytics tag included in the head tag of the demo page.

fetch json