Add Instagram Posts to your Website using React JS from Scratch
Prerequisites :
- Facebook Developer Account
- Instagram Account with media
Note: Instagram Account must be public
If you want to add your Instagram posts to your website, you came to the right place. This latest tutorial helps you to add posts from scratch.
Since Instagram is under Facebook now, the Instagram developers page is migrated to Facebook Developers Page. You can read that from here.
At first, navigate to docs of Facebook Developers Page, click to GET STARTED/LOG IN to continue. Login to your Facebook account.
Step 1: Creating a Facebook App
Click on My Apps, click Create App and then select For Everything Else (read the text under For Everything Else), then add the necessary details and click Create App Id
Once you have created the app and are in the App Dashboard, navigate to Settings > Basic. Scroll down to the bottom of the page, click Add Platform.
Choose Website, add your website’s URL, and save your changes.
Step 2: Configuration of Basic Display API
Click Products and search for Instagram Basic Display and click Setup and add it to your recently created App.
Click Basic Display, scroll to the bottom of the page and click Create New App
For Instagram Display Name, enter the Facebook App Name you just created, navigate to Instagram Basic Display > Basic Display for Valid OAuth Redirect URIs, Deauthorize Callback URL, and Data Deletion Request URL, enter your website’s address (https://khushiteluguapp.web.app/ in my case).
Step 3: Adding an Instagram Test User
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.
On the new tab, got to www.instagram.com and login to the Instagram account which you just invited from the Instagram testers section. Navigate to (Profile Icon) > Settings > Apps and Websites > Tester Invites and accept the invitation.
Step 4: Generating Long-Lived Access Token
It is the token we are going to use to fetch data(posts, videos) from our Instagram account. The token is valid for 60 days. After that, we can follow the same procedure from here to re-generate/refresh our token.
Navigate to Instagram Basic Display > Basic Display > User Token Generator
Click Generate Token and login to your Instagram account. And Authorize to access your Instagram data.
Copy the generated token and paste to use that token later.
Step 5: Using Token to fetch data in our React Project using AXIOS
If you don’t know anything about AXIOS, please refer here
The API URL to be used in the AXIOS GET method to fetch data is “https://graph.instagram.com/me/media?fields={fields}&access_token=IGQVJ...”
For eg: “https://graph.instagram.com/me/media?fields=id,caption,media_url&access_token=IGQVJ…” for fetching ID, CAPTION and MEDIA_URL of each post.
Access Token is previously copied token and the fields are:
So, catch the JSON response from the AXIOS GET method and manipulate it in your style.
I hope this latest tutorial helps to fetch your Instagram Posts to your React Project.
Keep Rocking…
