An Easy Guide to use Instagram’s New API in 2020

You’re here because Instagram’s Legacy API, or their ‘Basic Permissions’ has been deprecated in June 2020. In order to continue using their services, and to ensure your latest application or website functions the same way, you have to go through with learning how to access their new API.

The problem? Facebook’s documentation for Instagram’s API sucks. Hard.

Now I can go on a several minute tirade about how the examples they provide are unclear and the links send you to random examples that loop you around like a boring rollercoaster, but you already knew that. If not, let me save you the headache and show you exactly how to use Instagram’s new API for your website. Let’s dive in!

Step 1. Getting Started

  1. Facebook Developer Account
  2. The Instagram Account that you want to use
  3. The website you want to display the Instagram content.
  4. Download Postman to write your queries and requests

Step 2. Make your Facebook App

  • Once you have made the app and are within the App Dashboard, go to Settings > Basic, and scroll the bottom of page, and click Add Platform. Like so:
  • Then select Website, add your website’s URL, and save your changes.

Note: It’s important to put the entire url, including the forward slash at the very end.

Congratulations! Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode. We don’t need it to be live or in any other mode for our purposes.

Step 3: Set Up Instagram Basic Display

  • Choose Basic Display, scroll to the bottom of the page, then select Create New App.

In the form that appears next, complete each section using the guidelines below.

Display Name

Valid OAuth Redirect URIs

For example: https://thenameofyourwebsite.com/

After you enter a URL, save your changes and check the URL again. Make sure it follows exactly! Including the trailing forward slash depending your URL structure. In fact, you should probably just copy your website link.

Deauthorize Callback URL

Data Deletion Request Callback URL

Make sure you save everything.

Step 4: Add Instagram Tester

  • Open a new, separate web browser and go sign into your Instagram account that you just invited. Then go to (Profile Icon) > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.

Congratulations! Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode. We don’t need it to be live or in any other mode for our purposes.

Step 5. Generate Long-Lived Instagram User Access Token

  • You can access the token generator in the App Dashboard > Products > Instagram > Basic Display tab.
  • From the Basic Display find and select the Instagram App Secret to get your token! Easy right?

Step 6. Query User’s Media With Access Token

  • Take you new long-lived access token and write the basic request structure with this endpoint in Postman:

'https://graph.instagram.com/?fields={fields}&access_token={access-token}'

Replace {fields} with a comma-separated list of User fields you want returned (find them in the official documentation right here) and {access-token} with the user’s access token. The GET /me endpoint will determine the user’s ID from the token and redirect the request to the User node.

  • The response you should get back should look something like this:
{
"id": "17841405793187218",
"username": "andrewly"
}

For a list of fields you can query go here

That’s it! Once you pull the information you want to display, add it to your project in which ever way suits your needs!

Originally published at https://www.andrewjly.com on July 6, 2020.

Founder of Neo Typewriter. He is a published author, podcast host, digital marketer, and full-stack web developer. Read more at: www.andrewjly.com