1. Home
  2. Docs
  3. wpDiscuz 7 Documentation
  4. Plugin Settings
  5. Social Login and Share
  6. Instagram App Configuration
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Instagram App Configuration

To start using Instagram Login Button you should get Instagram App ID and App Secret, then fill these in according wpDiscuz options in Dashboard >wpDiscuz > Settings > Social Login and Share admin page (Instagram section):

Before You Start

You will need:

1.  A Facebook Developer Account.

2. An Instagram account with media.

3. A public website that you own. This can be a generic free one like a Github Page or Heroku web app, or your actual website.

4. A command-line tool such as Terminal or an app like Postman that can perform cURL requests.

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. You can change the platform later if you wish, but for this tutorial, use Website.

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. Normally this would be a dedicated URI that can capture redirect query string parameters, but for this tutorial your website’s URL will be fine.

The Valid OAuth Redirect URIs can be found in the Dashboard > wpDiscuz > Settings > Social Login and Share admin page (Instagram section).

For example: https://socialsizzle.heroku.com/auth/

After you enter a URL, save your changes and check the URL again; we may have appended a trailing forward slash depending your URL structure. Copy the complete URL somewhere since you will need it in later steps to get authorization codes and access tokens.

Deauthorize Callback URL

Enter your website’s URL again. Eventually you will have change this to a URL that can handle deauthorization notifications, but for the purposes of this tutorial, you can re-use your website URL.

Data Deletion Request Callback URL

Enter your website’s URL once again. Just like the Deauthorize Callback URL, you will eventually have change this to a URL that can handle data deletion requests, but for now you can re-use your website URL.

App Review

Skip this section for now since you will not be switching the app to Live Mode during the tutorial.

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 Icon) > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.

Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode.

Copy Instagram App ID and App Secret from the App Dashboard > Products > Instagram > Basic Display page and paste in according fields of the Instagram Section in Dashboard > wpDiscuz > Settings > Social Login and Share admin page.

Source: Instagram Doc.

Was this article helpful to you? Yes 2 No 1