Instagram feeds with Instagram API : Part 1 Create App and Token

Have you ever wondered on how you could implement your own custom Instagram feed/Photo wall on your website? I recently had a chance to work on creating a custom react component to display the latest Instagram feed on a website, and I would like to share with you guys on the process.

What are the benefits of adding Instagram feeds to your website/application?

I am glad that you asked, here are the top two reasons that I think why adding Instagram feeds to your application is important:

Increase user time spent on site

When we are building a website, one of the main measurement that we will use is always the tracking time spent on our website, the measurement not only reveals the quality of our site but also how engaging our page is.

So by adding Instagram feeds, we can keep our visitors engage with our content longer hence increasing time spent on site.

Free real estate to advertise Instagram profile

By Adding Instagram feeds to website we can maximize the visibility of our social media content, meaning that visitor that is on the site will look at our content and potentially convert into a follower and engage with our content.

Engaging Instagram feed will drive traffic back to Instagram profile and increase number of followers.

Below are some of the articles that further discuss the benefits of utilizing Instagram feeds.

Why Should you Embed Instagram Feeds on your Website

5 benefits of adding an Instagram feed on your website

How to Use Instagram to Promote Your Brand and Drive Sales

What is Instagram Basic Display API?

Taken from Facebook Developer page, the API allows users of your app to get basic profile information, photos, and videos in their Instagram accounts.

The API only provides read-access to basic data, the data includes Instagram user profile, image, videos, and albums. If you building an app that publish media, moderate comments, then you will need Instagram graph API.

We will separate the article into two parts where the first part describes on how to activate Instagram Basic Display API and retrieve the long-live token. Second part we will start with the actual react coding part.

Create Facebook App and generate a long live token

Before we can start to write some codes, we will need proper authority access and authorization token in order for us to access the Instagram data. You can skip to the second part where we start on using the Instagram Basic Display API.

Before we start

We need the following before we start:

1. Facebook Developer Account
2. Your own Instagram Account
3. A working HTTPS website

In order to use any Facebook related products, we are required to create a Facebook developer account, an Instagram account and a HTTS website, this is required as we need to retrieve short live token for Instagram API with the website. If you do not have a public accessible HTTPS website yet, you may refer to my previous article on how to create one with Netlify and Firebase, the two will include SSL certificate when deploy so it will work.

Now that we have all the components needed, let’s get started.

Create App

Head to Facebook for Developers, in My Apps tab click on Create App button as shown below:

The Green Button Create App is the one

Select More Options and continue, next select something else.

App Configuration

Here you can start to insert basic information on your app, App Display Name and App Contact Email is the one that we need to fill in, email should be prefilled so only change it if you want to have some other emails to be notified.

Once your app is created, you will be directed to a product screen, this is for us to pick which API that we want to use. To display Instagram feeds, there’s three different APIs that you can consider, Instagram Basic API, Instagram Graph API, and oEmbed, our focus today is Instagram Basic Display.

Add website URL

Select Instagram Basic Display API and head to Settings → Basic, scroll to the bottom and select Add Platform and select Website.

Next, add in your https website in Site URL field.

This is the information we need for now, you may comeback later to fill the rest of the form in case you need it for app review submission.

Head to Instagram Basic Display -> Basic Display and click on Create New App Button at the bottom of the page.

In the next page, you will need to fill in the following URL fields:

Valid OAuth Redirect URIs, Deauthorize Callback URL, Data Deletion Request URL, for now you can just use the Site URL for all the fields.

Note:

1. In other stack overflow post I found they mentioned you could use https://localhost:3000/ as the URL, as from my personal experience Facebook developers does not allow localhost to be added.
2. While it is tempting to use a random https website, I personally do not recommend using any https website that is not yours. If the website is analytics enabled website (Google Analytics or Facebook Pixel) yours authorization code will be recorded and that is not what you want. So I highly recommend that you create your own hosted site.

Add Instagram Tester

In Roles -> Roles, once added you tester account will have a pending tag as shown below:

To accept the tester invitation is straight forward, open up your Instagram account and head to Settings -> Apps and Websites

Authenticate User

Now that we have completed all the configurations, it is time to grant authority to our facebook app by using the following command.

https://api.instagram.com/oauth/authorize
  ?client_id={app-id}
  &redirect_uri={redirect-uri}
  &scope=user_profile,user_media
  &response_type=code

Replace the {app-id} with your Instagram App ID, you can find the ID from Instagram Basic Display -> Basic Display, {redirect-uri} is the website that we have inserted in the above section.

Your app ID and secret ID

Your final URL should look as below:

https://api.instagram.com/oauth/authorize
  ?client_id=684477648739411
  &redirect_uri=https://socialsizzle.herokuapp.com/auth/
  &scope=user_profile,user_media
  &response_type=code

Once you have obtained the URL, paste it onto your web browser address bar. You will then be redirected to the following screen to grant access to your Facebook app.

Once the permission is granted, you will be redirected to your provided URL with additional information.

https://socialsizzle.herokuapp.com/auth/?code=AQDp3TtBQQ...#_

Your authorization code will be appended to your redirect URL. All the characters between code={this is your authorization code}#_ , so remember to remove #_ to get the final code.

Note: This authorization code is short lived and will be valid for 1 hour only, if your code expires just paste the URL again to generate a new one.

Exchange for a token

curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -F client_id={app-id} \
  -F client_secret={app-secret} \
  -F grant_type=authorization_code \
  -F redirect_uri={redirect-uri} \
  -F code={code}

Replace the {app-id} with your Instagram App ID, {app-secret} is just at the field beside where you have taken your Instagram App ID enter your facebook password and the secret ID will reveal for you, {redirect-uri} is the same as before where {code} is the authorization code you have obtained in the last step.

Mac user should be able to call curl in their terminal, if you are using windows Windows 10 build 17063 curl should be included in command prompt, powerShell supports curl as well.

{
  "access_token": "IGQVJ...",
  "user_id": 17841405793187218
}

To test the returned access_token and user_id, we could use curl again

curl -X GET \
  'https://graph.instagram.com/{user-id}?fields=id,username&access_token={access-token}'

But for me I like to paste the url directly into the browser, I find it easier to work with and it will be formatted as well.

This is just a personal preference so use whichever you see fit.

Long-lived Access Token

Now that we have a short-lived token that works, we will then exchange it for a long-live access token. Short-lived access token will only be valid for one hour just like the authorization code, so it is crucial that we exchange it for a longer living token.

Long-lived Access Token will be valid for 60 days, if the long-lived token has expired you may refresh the token within 60 days, the token will no longer be refreshed if exceeded the 60 days limit.

To exchange the token, we can use the following command:

curl -i -X GET "https://graph.instagram.com/access_token
  ?grant_type=ig_exchange_token
  &client_secret={instagram-app-secret}
  &access_token={short-lived-access-token}"

With that you will get a response with your long-lived user access token

{
  "access_token":"{long-lived-user-access-token}",
  "token_type": "bearer",
  "expires_in": 5183944  // Number of seconds until token expires
}Part 2 Accessing Instagram API with React

And that is how you could get your long-lived Access Token!

Closing thoughts

Today, we have focus on the prerequisites of working on Instagram API, I wanted to include everything in one article but I found that it gets too long and draggy hence I decided to split this topic into two parts. In the next article, I will show you how we can display a photo grid of Instagram feeds with React.

As always, thanks for reading and I hope you learn something new today.

Credits:

Photo by Ales Nesetril on Unsplash