How To Get Instagram Feed Into SPFx Web Part

in this blog, I explain how to get Instagram feed into spfx web part.

Note - First of all, you must have a Facebook and an Instagram account in order to legally pull your posts from Instagram. After that, you need to complete the following steps and get a token. 

Step 1

Firstly, go to https://developers.facebook.com/ and sign in to your Facebook account. Then click the “My Apps” button on the top right. 

Step 2 

Now click on the “Create App” button. 

Step 3 

The page for selecting application types opens. Here, either “Consumer” or “None” options is selected. 

Step 4 

In the window that opens, first a name is given to the application to be created, the contact e-mail is entered and the application is created. 

Step 5 

Then the Facebook account password is re-entered. On the screen that opens, click the “Set Up” button in the “Instagram Basic Display” box. Then click on the “Create New App” button and write your application name in the desired “Display Name” field on the page that opens. 

Now in-app details page, enter your SharePoint site collection URL(https://<yoursite>.sharepoint.com/sites/<yoursite>) in which you want to show Instagram feeds in the Valid OAuth Redirect URIs, Deauthorize Callback URL and Data Deletion Request URL textbox. 

Step 6 

After the changes are saved on the same page, in the “User Token Generator” section, click the “Add or Remove Instagram Testers” button and follow the steps below. 

Finally, select the Instagram account where you want the posts to be received. 

Instagram Tester Confirmation 

Open https://www.instagram.com/ and log in to the Instagram account you added in the above process. Log in to the user’s profile page and then click the “Edit Profile” button. 

Then click on the “Apps and Websites” tab on the left tab. 

In the tab that opens, the “Test User Invites” tab is clicked and your application is accessed. 

Creating Instagram Tokens 

After the above approval process, back to the developer site again. Select “Basic Display” under section “Instagram Basic Display”. Approved test accounts appear under “User Token Generator”. Click the “Generate Token” button on the right, and the token will be created after the Instagram user name and password fields are populated. 

Now go to your SPFx web part and call the below API, 

“https://graph.instagram.com/me/media?fields=media_type,media_url,caption&access_token=" + access token; 

Copy the access token that you just generated. You can use this graph API with XMLHTTPRequest. If you want to see how XMLHTTPRequest works here is the link to another blog  

https://medium.com/arfitect/instagram-feed-in-spfx-web-part-61f76fe1ded4 

But today we will see another short method to refresh token and get your media. 

Now if you want to create webpart for Instagram feed then you can create webpart in react framework with – yo @microsoft/sharepoint 

And install these 2 packages  

npm i instagram-graph-fetcher-js 
npm i axios 
import { fetchMediaFields, refreshToken } from "instagram-graph-fetcher-js"; 

Now if here is the 2 method for get media data and also refresh the token 

In the refresh method, you just need to put the token that you first generated in developer.facebook site. 

And return the value and save it into token1 variable.

Then with fetchmediaFields you can get all your photo links and captions and all.