Instagram App Setup (with Instagram Basic Display API)
This document provides instructions on how to setup the Instagram extension and allow users to show their Instagram photos on their profile page.
Note: Starting October 15, 2019, new client registration and permission review on Instagram API platform are discontinued in favor of the Instagram Basic Display API. If you registered your application before October 15, you should use Instagram API. See instruction Instagram App Setup.
- Instagram App creation and setup
- Configure extension`s settings
- Add Instagram Photos to Profile form
- Instagram Photos on Profile page
- App Review & Live Mode
Instagram App creation and setup #
Step 1: Create a Facebook App
Go to developers.facebook.com, click My Apps, and create a new app. Once you have created the app and are in the App Dashboard, navigate to [Settings > Basic], scroll the bottom of page, and click Add Platform.
Choose Website, add your website’s URL, and save your changes.
Step 2: Configure Instagram Basic Display
Click Products, locate the Instagram product, and click Set Up to add it to your app.
Click Basic Display, scroll to the bottom of the page, then click Create New App.
In the form that appears, complete each section using the guidelines below.
- Display Name - Enter the name of the Facebook app you just created.
- Valid OAuth Redirect URIs - Enter your website’s URL. There are two dedicated URI that can capture redirect parameters, for example:
- Deauthorize Callback URL - Your website’s logout page URL.
- Data Deletion Request Callback URL - Enter your website’s URL once again.
Step 3: Add an Instagram Test User
Navigate to [Roles > Roles] and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.
Open a new web browser and go to www.instagram.com and sign into your Instagram account that you just invited. Navigate to [Profile > Edit Profile > Authorized Applications > Tester Invites] and accept the invitation.
Your Instagram account is eligible to be accessed by your Facebook app while it is in Development Mode.
Configure extension`s settings #
Go to extensions`s settings page [Ultimate Member > Settings > Extensions > Instagram Photos], enable extension, select API type and paste API keys using the guidelines below.
- Enable Instagram Photos - Enable extension
- Instagram API type - select "Instagram Basic Display API"
- App ID - paste your Instagram App ID displayed in [App Dashboard > Products > Instagram > Basic Display].
- App Secret - paste your Instagram App Secret displayed in [App Dashboard > Products > Instagram > Basic Display].
[Ultimate Member > Settings > Extensions > Instagram Photos]
[App Dashboard > Products > Instagram > Basic Display]
Add Instagram Photos to Profile form #
Once you have created Instagram app and copied App ID and App Secret, add Instagram Photos field to the members profile:
- Go to the Profile form builder [Ultimate Member > Forms]
- Add new or edit existing Profile form
- Click the + icon to add new field
- Select Instagram Photos field
- Give the field a title and configure other options
- Save field and form
[Ultimate Member > Forms > Profile form]
[Ultimate Member > Forms > Profile form, Fields Manager]
[Ultimate Member > Forms > Profile form, Instagram Photos field]
Instagram Photos on Profile page #
Once Instagram Photos field added to the Profile form, members can connect their accounts to Instagram using the guidelines below.
- Go to profile and enable Edit profile mode
- Click the Connect to Instagram link
- Authenticate your Instagram user by signing into the Authorization Window, then click Authorize to grant your app access to your profile data. Upon success, the page will redirect you to your profile.
- Click the Update Profile button to save access token.
[Profile > Edit profile]
[Instagram Authorization Window]
Note: Instagram User access tokens are short-lived access tokens and are only valid for 1 hour. To update access token click Update.
App Review & Live Mode #
Before you can switch your app to Live Mode, you may have to go through App Review. The process allows Facebook to verify who you are and how you will be using the data that your app will be accessing.
Data access authorization is controlled by your app users through the use of the permissions listed below. Users must grant your app these permissions through the Authorization Window before your app can access their data.
- instagram_graph_user_profile — allows your app to read the User node, which represents the Instagram user, and the node’s edges.
- instagram_graph_user_media — allows your app to read the Media node, which represents an image, video, or album, and the node’s edges.
You'll need to provide an email address where you can receive, review, and submit a contract, and upload an image copy of an approved ID or document. By verifying as an individual, certain permissions or Features from your request may not be available or will be limited per each app installer. You'll also need to sign 1 contract. Learn more