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

Make sure you have all of this ready to go:

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

Step 2. Make your Facebook App

Go to your Facebook Developer Account, select My Apps, and make a new app with any name you choose. Use a name that is easy to identify.
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.

Step 3: Set Up Instagram Basic Display

Select Products, find the Instagram product, and select Set Up to add it to your app. We are only using Instagram so only choose this product.

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

Enter the name of the Facebook app you just created.

Valid OAuth Redirect URIs

Enter your website’s URL in its completed form.

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

Enter your website’s URL again (Paste the link you just copied).

Data Deletion Request Callback URL

Enter your website’s URL once again. (Again, past the link you just copied).

Make sure you save everything.

Step 4: Add Instagram Tester

Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.
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

Skip the unnecessary window authentication url step and directly to the token generator for a long-lived token. Long-lived tokens are valid for 60 days and can be refreshed before they expire. Once you have a long-lived access token you can refresh it before it expires through the GET /refresh_access_token endpoint.

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

In order to grab data on the Instagram’s public profile, we’ll need to send a GET request

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!