Introduction

Many websites may require displaying images uploaded on Instagram directly on their website. Instagram provides an API that can be utilized so that a person doesn't have to upload the images to the website separately; they can be listed automatically.

Step 1: Account Requirement

An Instagram account is required for login. If you have an account, then login to your Instagram account with your Email ID or Mobile Number and Password. Alternatively, you can log in using a Facebook account too.

Otherwise, you have to create an account on Instagram and log in with that account. If you are a new user, you must upload images to your Instagram account first to see any results.

Step 2: Generate Access Token Key

You need to generate an Access Token Key to communicate with the API. You can use the following link:

http://instagram.pixelunion.net/

Click on the button displayed on the website: Generate Access Token.

If you are not logged in currently, you will be prompted to log in with your Instagram credentials.

Format of the Generated Token:

544758xxxx.xxxxed0.fb27d9db186f47168eed3b9534de5f78

Step 3: Fetching Images via API

After generating the Access Token Key, integrate it with the API to fetch images from your Instagram Account. We are using a PHP Curl Session for integrating the API.

                $accessToken = "544758xxxx.xxxxed0.fb27d9db186f47168eed3b9534de5f78";

                function fetchData($url)
                {
                $ch = curl_init();
                curl_setopt($ch, CURLOPT_URL, $url);
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
                curl_setopt($ch, CURLOPT_TIMEOUT, 20);
                $result = curl_exec($ch);
                curl_close($ch);
                return $result;
                }

                $result = fetchData("https://api.instagram.com/v1/users/self/media/recent/?access_token=".$accessToken);

                $result = json_decode($result);
            

Step 4: Displaying the Images

The $result variable now contains the JSON decoded data array. You can access the values in this array on your view page to display all the Instagram images on your website.

Harshita Maheshwari is a creative web developer who loves integrating social APIs and building interactive user experiences.