Embedding Instagram feed in your 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.

    Disable implicit OAuth

  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.

    Authorize Instagram app

  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.kewlcodes.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.  Ofcource 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!

  • Hello –

    Could you help with this?
    Everything seemed to work just as you described until the last step.
    When using the access token in the url you provided, I get this: {“pagination”:{},”meta”:{“code”:200},”data”:[]}

    • Rob

      Yes, getting same code as Rich. What to do with this code? Could you explain Pranay how to use code to pull the photos?

      thanks in advance, help appreciated!

      Best , rob

  • Patrick Dinehart

    Thank you Pranay! This post was very helpful in getting my instagram feed to show up on my website!

    I didn’t realize I had to jump through so many hoops!

  • Fabian Manzano

    Hi, just wondering if this link still work, I have replace the client ID to my client ID and I am getting the

    following error:

    {“code”: 400, “error_type”: “OAuthException”, “error_message”: “Invalid Client ID”}

    • @fabianmanzano:disqus Did you try the same steps as in this post?

      • Fabian Manzano

        Hi,
        I was it seems was an issue in the copy and paste, I want to point out that perhaps might help someone else regarding the link.

        The redirect URI must have the format: http://www.yyy.com/ for hence the url will look like

        https://api.instagram.com/oauth/authorize/?client_id=XXXX&redirect_uri=http://www.yyy.com/&response_type=token

        As this took me a while to find out

        Can I ask, does this token expire?

        • Yes. The token does expire because the app is in SAND box mode. Every new app created will be in sandbox mode. Your app need to be reviewed and approved by Instagram to avoid expiration.
          Read more from Instagram: https://www.instagram.com/developer/sandbox/

          • Fabian Manzano

            Hi,Thank you for your prompt response, I have seen that page, but that is so unconvenient that expires. When trying to change the sandbox to live i need to review, and if i pick the right option of displaying content on a website i get:

            You do not need to submit for review for this use case. If you are a
            developer and you want to display Instagram content on your website,
            then you do not need to submit your app for review……

            Is there an easy way or something that I can do to get the a live app token ?
            or we need to do programmatically to check if token is expired and if it is to programmatically get a new one?

            Thank you

  • Adi

    Hi,
    I was just wondering how do I generate a http get code that works, I am not sure of the last step 🙁 does this have to be in the body script of the page I am trying to put the feed onto? Thanks

    • Curious User

      I might be asking the same question – I have the JSON result file, but unsure how to then encode it to our site. I haven’t worked much with GET requests. thanks!

      • @disqus_KGr9JAEPEt:disqus and @curious_user:disqus to make http get request calls, you need to use any server side language like asp.net or java or php or any other. Simple html/javascript would not be sufficient.
        Note: If your website does not use any server script language, then you cannot achieve using code. you might need to use the javascript plugin Instafeed.js.

      • Glenn Sampson

        post removed

  • Hello. Guys.
    I got my final file to work when, I tested the URL.. https://api.instagram.com/v1/users/self/media/recent/?access_token=PUT_YOUR_ACCESS_TOKEN_HERE.

    With my own token. Now. Can you please guide me how to embed that file or that final URL. To my blogger. I’m not to sure how to call it.

    My final Goal.. Is to embed my full profile on my Blogger.

    Here.. http://www.calzgraphicdesigns.enterprises/

    Thank you. Guy in Advance.

  • Encep Nurdin

    This ERROR? ?
    Please help me

  • Encep Nurdin

    {“error_type”: “OAuthForbiddenException”, “code”: 403, “error_message”: “Implicit authentication is disabled”}

  • Chris Hickey

    “then you can make HTTP GET to this URL” Can anyone explain how this is done.