Instagram App Setup (with Instagram Basic Display API)

Overview

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.

Сontents

Instagram App creation and setup  #

You have to create a Facebook App to use Ultimate Member Instagram extension.
Application can work in one of these modes:

Facebook App is in the Development Mode by default. You have to request permissions and go through App Review to enable Live Mode.

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.

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.

Note: All permissions need to be approved for your app through the App Review process before they can be used in Live 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]

[Profile > Edit profile]

[Instagram Authorization Window]

[Profile]

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.

Permissions

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.

Note: All permissions need to be approved for your app through the App Review process before they can be used in Live Mode

Individual Verification

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

Errors  #

Error "Insufficient developer role" may appear if Facebook App is in the Development Mode and you are not a Tester. You have to make yourself a Tester or enable Live Mode.