Instagram feeds with Instagram API : Part 2 Basic Display API with React

6 min readMar 12, 2021

In the second part of this series, we will show you on how utilize the Basic Display API and use it on your website.

If you have not yet obtained a short-lived or long-lived token, I highly recommend you to check out my previous post. We will be implementing a grid of Instagram Feeds on React with Basic Display API.

First we will need to create a base react application template with the following command:

npx create-react-app react_instafeed

next we will install some additional libraries for our react application, first we will install Axios.

npm i axios

For those that are not familiar with Axios, this is a library that will help us make http request to external resources, this is a really useful library where we often need Axios for API calling and retrieving responses with it.

Fetch() should work as well if you do not want to have extra dependencies on your project. One other alternative that you can try is superagent. I will link the details at the end of the articles if you are interested.

Instagram Basic Display API is fairly straight forward, we will need to call two different API request.

First to retrieve all available post on the profile, you can use the following:

https://graph.instagram.com/me/media?fields={FIELDNAME}&access_token={TOKEN}

This request will return a series of post under the profile with additional data such as id, captions, media_url, etc……

if you are requesting for individual post, then you could use the following:

https://graph.instagram.com/{Post-ID}?fields={FIELDNAME}&access_token={TOKEN}

This above will return the data for this specific post only ,where {Post-ID} is the ID number of the post {FIELDNAME} is the data that you want the API to return.

Below is all the field data you can request:

Field data information taken from Facebook Developer

With all these information we can implement a simple photo grid in our react app.

First we will create a component, this component will fetch https request from Instagram basic API with Axios.get().

The code is pretty self-explanatory, we are using functional component to build this simple photo grid.

At line 8, we are using destructing assignment to unpack the variables for later usage, in our case I could just write as {token, limit} since we only have two props, but imagine when you have 10 different props and you want to unpack one, then this should do the trick.

At line 11 and 12, we are using another hook useRef(), I will not discuss further on this as this is out of the scope for today, but you can think of it as a box to contain the latest value of the props and it will not cause a re-render.

For those that are not familiar with useEffect() , essentially it is one of the react hooks that you will encounter once you start writing some react applications. You can even build your own hook that can be reuse in your application but for now we will only focus on useEffect().

In our useEffect() function we have declare an async funtction and call Axios to perform http request then store the response data into state with useState(). AbortController() is used to avoid any potential memory leaks during re-renders.

Notice that we have a [props.limit], basically we are telling react only to refresh/re-render if the limit has changed. If you only wants it to execute once left it as an empty array.

Now we have our media data, it is time to display it on the browser, Feeds is the component where it stores all the instagram media information (id, caption, media type, and media_url) with map() function we can loop through out feeds and display with our component as shown from line 36 to 38.

There is three different types of data in Instagram,

IMAGE, VIDEO, CAROSEL_ALBUM

So we need a component to handle different kinds of media type. Without further ado, you may find the code snippet below:

This part is also pretty straight forward, we are just changing html tags based on the media type returned from Basic Display API. For simplicity, we will not perform any additional processing for CAROSEL_ALBUM, but if feel free to try it on your own, you could use individual post API to retrieve children edge for this.

So now that we have the all the components required, we can showcase our cool photo grid now. Import the Instafeed component as shown below:

The component requires two props, long-lived token that we have obtained in the last article, and limit is where you can set control on how many recent post that you want to retrieve.

Note:

You should always consider building your component with a “stateless” component such as functional component.
If you are building with class component then you can use componentDidUpdate, componentDidMount, componentWillUnmount depending on your situation.
You should never store your token/secret keys as plain text in your application for numerous reasons, what you should do instead is to save your secret keys in .env file.
You can also install image loading library to handle image loading, material-ui-image is one that I often use. You can also implement your own loader with skeleton component if you are using Material-UI.

So once we added some simple css to make it nicer, let’s have a look at the end result.

Alternatives

Is there any other ways that could achieve similar results without the need to create tokens? You bet there is!

Here are some of the alternatives:

The web scrapping way:

Did you know that Axios can be used as a web scrapping tool as well? With this we will be able to scrap any public Instagram profile that you need without any additional tools and setup.

Pros:

Easiest to setup among the other methods, you just need am URL of an public Instagram profile and you are good to go.

Cons:

Up time on this method is not reliable, if you tried to access Instagram public profile without an account you will be prompt to login, this goes to the method as well.

Instagram graphql

Another way that I found that would work is by using graphql query with Axios, this extends on the web scrapping method where in the first we scrapped the whole rendered page, with this we only graphql to get the profile information. The example is listed as follow:

https://www.instagram.com/graphql/query/?query_hash={query-hash ID}&variables={"id":{Profile-ID},"first":12}

Instead of creating your own long-lived token, you are required to find your own query_hash ID in order to use this. From my research, there’s no official way to generate this ID, luckily you can open up DevTools and use Network tab in XHR and you will find a working ID for your usage.

Pros:

Once you obtained a query hash ID, it is possible for you to retrieve any profile’s feed as long as you know their Instagram Profile ID

Cons:

There is a big if on this method as I could not really find an official documentation on this method, meaning that the query_hash ID might expire in anytime and since we will not be able to generate one for our own usage you may need to check out your website once in a while just to be safe.

I will link some additional resource in the reading material if you want to learn more about this approach.

Closing thoughts

In today’s article, we have looked at how to use the official Instagram Basic Display API and integrate into our own react app. It is fairly simple once you understand how it works, so as always I hope you learnt something new today. Thanks for reading!