How To Get Instagram Feed In The SPFx Web Part

Introduction

In this article, we will see how can we get Instagram in the SPFx web part.

Pre-requisites

• You must have a Facebook developer account.
• Instagram account

Follow the below steps to get an Instagram feed in your SPFx web part.

Steps

Step 1

Go to https://developers.facebook.com/ and click on My Apps.

Step 2

Now click on Create App button.

Step 3

On clicking, it will open a popup and it will show app types. Select either Consumer or None app type and click on the Continue button.

Step 4

On clicking Continue, it will open another popup. In this popup, type and app name and contact email address. And click on Create App button.

Step 5

On clicking Create App, it will ask for a Facebook account password for security. Enter the password and click on Submit button.

Step 6

On submitting, your app is created and redirect to the page to select the app for our newly created app. Now search for the Instagram Basic Display product and click on Set Up to add to your app.

Step 7

Now scroll to the bottom of the page and click on Create New App button.

Step 8

On clicking Create New App, It will open a popup. Here type the name of the Facebook app we just created and click on Create App button.

Step 9

On clicking Create App, it will redirect to the detail page of the App.

Step 10

Now in-app details page, enter your SharePoint site collection URL in which you want to show Instagram feeds in the Valid OAuth Redirect URIs textbox.

Step 11

Once you enter a URL, save your changes and check the URL again.

Step 12

Now in Deauthorize Callback URL textbox, enter the same URL again.

Step 13

Now in the Data Deletion Request URL textbox, enter the same URL once again.

Step 14

Now click on the Save Changes button.

Step 15

Now expand the Roles menu from the left navigation and click on Roles.

Step 16

Now click on Add Instagram Testers.

Step 17

On clicking, it will open a popup. In this popup type the Instagram account name of which account’s feed you want to show in your web part and click on Submit button.

Step 18

Now open the https://www.instagram.com/ and sign in to the Instagram account which you selected in the previous step.

Step 19

Go to the profile and click on the Edit Profile button.

Step 20

Now click on Apps and Websites from the left navigation and click on TESTER INVITES. Here you can see the invitation of the app which we created. Click on Accept button in this invitation.

Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode.

Step 21

Now go to the Facebook app. Expand the Instagram Basic Display menu from the left navigation and click on Basic Display.

Step 22

Now go to the User Token Generator section and click on Generate Token button.

Step 23

On clicking Generate Token button, it will open a popup. Click on the Continue button.

Step 24

On clicking, it will open another popup. Click on Allow button.

Step 25

On clicking Allow button, it will open another popup with the token. Check the check box for "I understand" and then it will show token. Copy this token in a notepad and click on Done.

Step 26

Now click on the Save Changes button of the App. We will use generated token to get the Instagram feed.

Step 27

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;
• Here access token will be the token which we copied in Step 25.
• As a result of this API, you will get the feeds of your Instagram account.

Limitation

The access token which we generated will be expired after 60 days. So you need to generate a new token after 60 days or you can below use API to refresh token the token. This refresh token should be generated before the token is expired.

• “https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token= “ + access token;

Conclusion

This is how we can get an Instagram feed. Hope this article will be helpful