sp-dev-fx-webparts/samples/react-instagram

Instagram Feed

Sample web part to showcase an Instagram feed. It is an upgraded version of the web part described in the blog post Instagram Feed in SPFx Web Part by Buse Kara.

Compatibility

⚠️ Important
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

Applies to

• SharePoint Framework
• Office 365 developer tenant

Contributors

• Reshmee Auckloo

Version history

Version	Date	Comments
1.0	March 12, 2023	Initial release

Prerequisites

This web part needs an Instagram user token. An Instagram developer account is required to generate an access token, and using that token to fetch the feed data from Instagram's Basic Display API environment.

Follow the steps to generate your user access token.

Step 1

Go to developers.facebook.com and sign in to your Facebook account. Click on the "My Apps" button on the top right.

Step 2

Click on the "Create App" button.

Step 3

Select either "Consumer" or "None" as your application type.

Step 4

Give your application a name, enter your contact email, and create your app.

Step 5

Re-enter your Facebook account password

Step 6

Click on the "Set Up" button in the "Instagram Basic Display" box.

Step 7

Click on "Create New App" and click on "Create App" from the pop up to create a new instagram app id.

Step 8

Save your changes. In the "User Token Generator" section, click on the "Add or Remove Instagram Testers" button, and follow the instructions.

Step 9

Click on the link "apps and websites" link to manage instagram tester invitations and click on accept.

Step 11

Click on "Basic Display", click on "Generate Token" under "User Token Generator" and from the pop up click on "continue as ".

Step 12

Click on "Allow" from the pop up to authorise the app to retrieve profile and media information about the instagram user.

Step 13

Copy the user token to be used on the webpart.

You must then enter this user token in the web part properties to display the instagram feeds from the user.

Minimal Path to Awesome

• Clone this repo
• From your command line, change your current directory to the directory containing this sample (react-instagrame, located under samples)
• in the command line run:
  • npm install
  • gulp bundle --ship
  • gulp package-solution --ship
• from the sharepoint/solution folder, deploy the .sppkg file to the App catalog in your tenant
• in the site where you want to test this solution
  • add the app named react-instagram-client-side-solution
  • edit a page
  • add Instagram Feed web part
  • configure web part

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Features

This sample illustrates how to use Instagram Basic Display API to display instagram posts of specific profile. Ajax (Asynchronous JavaScript and XML) is being used to authenticate with the Instagram API and retrieve the user's feed. It also uses swiper. The Swiper library is used to create a carousel effect for the Instagram feed, allowing users to swipe left or right to view the different posts.

Help

We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying.

If you encounter any issues while using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.