Support is monitored from Monday to Saturday in office hours from the GMT timezone. Our response time can be up to 2 business days.

Notice: We do not accept any customization. Please Read Envato Support Policy. But we still can help with little snippets if that's possible!

Okay
  Print

Home    Articles    Youzify (formerly Youzer)

How to get App ID & App secret for Instagram social login and Instagram Widget ?

Requirements

To show Instagram posts, you will need:

  1. A Facebook Developer Account. Instagram is owned by Facebook and now Instragram API is managed by Facebook
  2. An Instagram Account with media

Setup

To display your Instragram posts on your site, you have to create an Instragram application and connect it with the site. Please follow these steps:

  1. Go to https://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.


  1. 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
  2. Click Products, locate the Instagram product, and click Set Up to add it to your app


  1. Click Basic Display, scroll to the bottom of the page, then click Create New App


  1. In the form that appears, fill in:
    1. Display Name. Enter the name of the Facebook app you just created
    2. Valid OAuth Redirect URIs. Read below from where you can get it
    3. Deauthorize Callback URL. Copy here the Valid OAuth Redirect URIs value
    4. Data Deletion Request Callback URL. Copy here the Valid OAuth Redirect URIs value
    5. App Review for Instagram Basic Display. Read below when you need to send your app for a review
  2. To get Valid OAuth Redirect URIs, please return back to your site and go to WP Dashboard › Membership Settings › Social Login Settings > Instagram  then check the quick setup steps to find the the line that starts with "Redirect Url:" or here's the link format :

https://website.com/youzify-authentication/social-login/Instagram

if your website is https://kainelabs.com

The the link format is :

https://kainelabs.com/youzify-authentication/social-login/Instagram

  1. Once you have finished, copy Instagram App ID and Instagram App Secret


  1. Go back to WP Dashboard › Membership Settings › Social Login Settings > Instagram page and paste them into App ID and App Secret fields
  2. Save changes.

App Review

To use your Instagram application, it has to be in Live Mode or your Instagram user's account has to be added to it as a test user.

Switch to Live Mode

To go Live with your app, you have to submit it for a review. Go back to your Facebook Developer Account, then Instagram > Basic Display and then :

1. if you wanna setup only social login select the option instagram_graph_user_profile :

2. if you wanna setup instagram widget select the option instagram_graph_user_profile and the option instagram_graph_user_media submission option.


Add a test user

Your application doesn't have to be Live to allow you test it. All you need is to add a test user. To do so, please do as follows:

  1. Go back to your Facebook Developer Account
  2. 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.


  1. Go to your Instagram Account
  2. Click Edit Profile


  1. Navigate to Authorized Applications
  2. Choose Tester Invites and accept the invitation
  3. Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode


Notice :

Most of the steps and all images userd in this tutorial are taken from Bimber Documentation Below :

https://bimber.bringthepixel.com/docs/login-with-social-networks/