The Instagram Basic Display API can be used to get an Instagram user’s profile, images, videos, and albums. And using Social Feed widget, you can show your Instagram Feed easily on your website.
Step 1 : Setup Your Developer Account
You need a Facebook Developer Account in order to use app.instagram.com & graph.instagram.com APIs to display your feed on the website. There’s no rocket science in that. Log in to your Facebook account first. Then go to developers.facebook.com in order to take further necessary steps. As soon as you land there, they’ll ask you to log in through Facebook only, and since you’ve already Logged-in into your Facebook, you just need to click on Continue As Your Name and you’re in.
You’ll see something like this when you finish logging yourself in.
Step 2 : App Creation
Click on the ”Note” provided in the widget edit area or follow This Link. This will lead you to the App Creation platform provided by Facebook for Developers.
Then you must be reached at this step, App Creation. Click on My Apps on top right corner in menu. Which will lead you to your apps list where you can create or use an existing app.
There are chances that you already have created some apps for any other purposes, but we will suggest you to Create a New Separate App in order to maintain integrity of data & data permissions for different purposes.
Click on the Create App Button, which will lead you to the next steps of app creation.
Here in the task, We are going to use Instagram feed’s API to display your posts in your webpage. Which falls into None category of App type. So select it & click on Continue.
Then it’ll ask for your app information like your App Name, Contact Email and Business Manager Account. Provide appropriate information there & click on Create App. You can skip Business Manager Account as it’s not required or does not relate in any cases.
As you complete this form filling process & click on Create App, your App Creation Process is Done here. Now you need to jump on next steps provided below.
Step 3 : User Access Token Generation
Now this app can be used for multiple purposes like Instagram Feed display, Analytics, Marketing API & much more. A list will be there on your screen after successful app creation.
Click on Instagram Basic Display as we want to show your feed on your website.
Click on the Create New App button at the end of the page.
Enter the Display Name in the box & hit the Create App button. It’ll redirect you to the basic display page, where all your app information will be displayed.
Jump to User Token Generator & click on Add or Remove Instagram Testers.
Scroll down to the end & you’ll find the Instagram Testers tab. Click on Add Instagram Testers.
Enter the Instagram username in the box of the account who’s feed is going to display on the website. You’ll see the pending request in your Instagram Testers list.
Now go to that Instagram Account & find Settings > Apps and Websites > Tester Invites. You’ll see an approval request there, Click on Accept.
Now come back to the Instagram Testers list & you’ll see your request approved.
Then come back to the Basic Display page where you were able to see your app’s information. You’ll see Generate Token Button besides your Instagram Tester account.
Clicking on it will generate a popup which will ask for your permission to allow access to Facebook to use your data. Click on Continue as Your Account Name. Then it’ll ask for Media Access. Make sure you check both the boxes Profile information & Media to display your feed on your website. Then click on Allow.
Then You’ll have your Access Token for Instagram Feed there. Copy it & paste it in the Social Feed widget edit box under the label Access Token. And you’ll see your Instagram Feed displayed on your screen.
Access Token for Business & Open Account Profiles
With above steps followed, you’ll be able to display your profile only. But Graph API supports any Business Profiles on Instagram display publicly using your access token only. We will see that in a moment.
There are two main conditions for that. One is that account must be Business Account and second is It must be linked with it’s corresponding Facebook page as well.
Select Business in dropdown and enter your App ID as usual. Now we have provided a Generate Access Token Button which will automatically generate and paste Access Token from your account. It’ll also fetch and paste corresponding Facebook Page ID you manage and paste it there.
Then after you just need to put the User Name of the Instagram account of which you want to show the feed. This is an automatic generation of Access Token.
For manual, you need to follow Step 3 & 4 from This Article. It’ll help you generating access token, if you want to generate it manually.
You need to set permissions of access for Instagram Individual profile posts & page posts. So make sure you allow pages_show_list, pages_read_engagement, instagram_basic, ads_management, business_management, instagram_content_publish, instagram_manage_comments, instagram_manage_insights permissions in the list to get all the things to display on your web page.
Instagram & Facebook frequently change their policies & steps for these Token Generation steps. So it might be possible that when you’re referring to this document, some of the steps must be missing or added in the process. So if you’re having any doubt regarding access tokens, we will highly suggest you refer to official documentation by Facebook regarding the same.