How to embed Instagram feed in a website

This post is used to get recent feed from your Instagram account and show them in your website automatically. We retrieve the Instagram feed by calling the Instagram API from any server side language.

It includes generation of Access Token to your app using Instagram developer site and the making calls to Instagram API to get the recent feed. To call the API, we make use of any server side language instead of Javascript as we need to pass Access Token inside the GET request. The Access Token is to be kept secret.

Getting Access Token from Instagram Developer site

1. Login to instagram developer site- https://www.instagram.com/developer/

2. At the top, click on ‘Manage clients’. Then Register a New Client.

3. Enter the required details and Register. Once your account is successfully created, you should see the CLIENT ID and CLIENT SECRET. Make a note of these details, as they are used to make API request to Instagram to get the feeds.

4. Then edit the client what we have created. Go to the Security tab and uncheck the ‘Disable implicit OAuth’ and update the client.

5. Once they are updated, use the below URL and get the access token. Put your client id and redirect URL what you have provided while creation in the URL below. URL: https://www.instagram.com/oauth/authorize/?client_id=PUT_YOUR_CLIENT_ID_HERE&redirect_uri=YOUR_REDIRECT_URL&response_type=token

   You will be asked to authorize your App to use your Instagram account. Click on authorize.

   

6. Click on Authorize.

7. You will be redirected to your redirect URL with the Access token in the URL as shown below.

    http://www.logicalfeed.com/#access_token=YOUR_ACCESS_TOKEN_HERE
   

8. Make a note and save your Access token. Access token is specific to each user and it should be not be disclosed to anyone.NOTE: By default the app will be in Sandbox mode with some limited number of requests. For more details about Sandbox mode and its limitations, you can go through the Instagram documentation here. Ofcourse you can even continue in the Sandbox mode too.

Making API calls using Access Token to get recent feed – Embedding Instagram feed

1. Using the access token you can make API calls to get your recent media posts as shown below.

   Request URL: https://api.instagram.com/v1/users/self/media/recent/?access_token=PUT_YOUR_ACCESS_TOKEN_HERE

2. To test the URL, you can directly run the above URL in the browser and check the response from Instagram API. The output you receive will be JSON format. If it is working, then you can make HTTP GET to this URL from any server side language.Note: Instagram suggests not to make Javascript ajax calls, as this would make the Access token visible to everyone from the browser. So user your favorite server side language to make ajax calls.

   I hope you found this useful. So please do SHARE!