Hello to everyone. In this article, I will explain how to add Instagram posts to SharePoint modern pages as web parts.
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.
In the first part of my article, I will explain how to create a token and then create a SPFx project to view Instagram posts.
Instagram Create App Actions
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.
Display Instagram Feed with SPFx Web Part
First, we need to a SPFx project. While creating the project, we should choose to React as the framework. Then we will use the swiper library in React to make posts easier and more functional. We run the npm i swiper method to include the swiper library in your project. Then we need to import the libraries and style files we need to use.
In order for the web part to be dynamic, we need to get some information from the user.
The most important of the features we see here is the user token information. In the first part of the article, I explained how to create it. Now let’s see how and where to use it.
First of all, we added our states to the constructor. We define our properties under IInstagramFeedProps.
Then let’s examine the necessary methods to send a query to the API.
As we can see in the above snippet, we call the loadData function within the componentDidMount function and send a query to the API in case there is no exception. If the query is successful, we update the state. Thus, we keep Instagram posts in this.state.items.
In the above code snippet, we give this.state.items, which contains the posts in our state, into the List component within the render function.
Afterward, we call the onRenderCell or onRenderCellFull method according to this.props.layoutOneThirdRight property, which is the feature that affects the aspect ratios of the Instagram posts we have seen in the web part properties.
In the OnRenderCell method, we use video or image tags according to the media type of the post. We are also adding a feature where we can see the description written under the post and redirect to the relevant Instagram post when the post is clicked.
And it’s done. You can see the view of the Instagram Feed web part in two layouts in the screenshots below.
You can access all codes by clicking here.
