These settings are provided in Third-party Integrations > Social Logins Keys tab. 

Fig. 22: Instagram Login settings

Please click on the ‘Products’ plus icon provided in the side-navigation menu as marked in figure 23 below. 

Fig. 23: Add Products

The admin will revisit the ‘Add Products to your App’ page. Click on the ‘Set Up’ button provided for ‘Instagram Basic Display’ as marked in figure 24 below. 

Fig. 24: Add Products to Your App Page

The admin will be redirected to a page displaying permissions as shown in figure 25. 

Fig. 25: Basic Settings for Instagram Login

Please click on the ‘Create New App’ button to proceed further. A pop-up will be displayed requesting to enter the Display Name as shown in figure 26 below. 

Fig. 26: Create a New Instagram App ID

Please enter the Display Name and then click on the ‘Create App’ button. The ‘Basic Display’ page will open. Please scroll below the Basic Display and Permissions & Use Cases sections. 

Fig. 27: Basic Display Settings page

As shown in figure 27, the ‘Instagram App ID’ and ‘Instagram App Secret’ keys are displayed. The admin can copy both these keys and paste them on their dashboard (figure 22).

The admin needs to enter only the below mentioned details - 

• Valid OAuth Redirect URIs: Enter the redirect URI with the format: 
  <DOMAIN>/public/instalogin.php
  Please note that the redirect URI must include https.
• Cancel Authorization URL: Enter the URL of your website to which the cancellation request is to be forwarded. .
• Data Deletion Request URL: Enter the data deletion request URL of your website. 

Fig. 28: Basic Display Settings page 

As shown in figure 28, the admin can test the Instagram Login feature by entering the details of users with public instagram accounts under ‘Add or Remove Instagram Testers’. Only the users added under this section can login through their Instagram accounts (this feature is provided for testing purposes). 

Clicking on this button will redirect the admin to the Roles page. Please add testers to your account. 

Fig. 29: Roles page 

Here, an Instagram Tester account is being added. Click on the ‘Add Instagram Testers’ button which will open a pop-up window. Enter the name of an official instagram account as shown in figure 30 below and click on the ‘Submit’ button. 

Fig. 30: Add Instagram Testers 

The tester will be added here. Now, please log into the Instagram account added as tester and then go to Settings > Apps and Websites > Tester Invites tab as shown in figure 31. 

Fig. 31: Apps and Websites in Instagram Account 

Please approve the tester request. Now, you can login via instagram using this tester account. Please follow the steps mentioned in the Testing section below. 

To switch to production/live mode, the admin can use ‘Live’ Instagram Social Login. Before switching the app to Live Mode, the admin might have to go through App Review. The process verifies the user and the manner in which they will be using the data being accessed by their app. As shown in figure 32, the app needs to be approved from back-end to access the instagram platform.

Fig. 32: Basic Display Setting page 

The admin must click on ‘Add To Submission' buttons provided to the right of both the permissions provided in this section. This will open sub-sections as shown in figure 33. The admin must enter all the required details by clicking on ‘Edit Details’ buttons provided to the right corners of each section. 

Under the ‘App Verification’ section, admin must carefully mention all the required details of their official Instagram account. 

Fig. 33: ‘Current Submission’ Section 

Clicking on ‘Edit Details’ for ‘App Verification’, the ‘App Verification Details’ pop-up box will appear as shown in figure 34. 

Fig. 34: ‘App Verification Details’ Pop-Up box 

The admin must carefully submit their details in the review sections since the request can be rejected by the review team if the details provided could not be verified. 

Testing

Please make sure that the Instagram Login plugin has been enabled and correct keys have been configured. Now, go to the login form at the front-end and click on the Instagram logo as shown in figure 35 below. 

Fig. 35: Yo!Rent Login/Signup page

The user can log into the website through their instagram account. Please note that the user needs to configure the email address if asked.