How to Create Instagram Access Token
The tutorial explains how to create an Instagram access token to display Instagram photos dynamically on your WordPress website using the Instagram widget of the JetElements plugin for Elementor.
Before you start, check the tutorial requirements:
- Elementor (Free version) installed and activated
- JetElements plugin installed and activated
- Meta for Developers and Instagram accounts created
General Features
The Instagram Access Token is a typesetting of characters unique to users’ accounts, allowing other applications to access the Instagram content. Without a token, websites cannot connect with the Instagram servers. The token furnishes a secure way for a website to ask Instagram permission to enter the user’s profile.
Since the Instagram policy restricts displaying images from third-party accounts, users should get an Instagram Access Token and paste it into the JetElements settings to prove they are owners of the content and display images and other content on the site.
Getting Instagram Access Token
Adding a new app
Log in to your Meta for Developers account. The “Create App” button will appear in the center of the dashboard if you have not created any app yet. Press the “Create App” button.
Select the “Other” option on the What do you want your app to do? window. Press the “Next” button.
Select the “Consumer” option on the Select an app type window. Press the “Next” button.
Type the app’s name in the Add an app name field of the Details window. Type the contact email address in the App contact email field.
Press the “Create app” button. Re-enter your password and press the “Submit” button.
Configure app settings
After creating the new app, you will be redirected to a page offering to add a product and continue the setup.
Navigate to the left sidebar and unroll the App settings > Basic tab of your Meta for Developers account.
The App ID, App secret, and Display name fields automatically will show the app’s name users added previously.
To display the Instagram photos on a particular site, scroll down this window and click the “+Add platform” button.
Tick the Website checkbox in the pop-up window that appeared. Then press the “Next” button.
Add the site’s URL in the Site URL field.
Press the “Save changes” button.
Adding an Instagram Basic Display product
Navigate to the Dashboard of your Meta for Developers account. Scroll down the page and select the “Instagram Basic Display” option.
You can press the “Read Docs” link to get detailed information about the basic display, permissions, and use cases if needed. Click the “Set Up” button.
Then, you will be redirected to the Instagram Basic Display tab. Scroll the page down and press the “Create New App” button. Type the app’s name in the Create a New Instagram App ID pop-up window.
Press the “Create app” button.
After that, you will be redirected to the Instagram Basic Display > Basic Display tab of your Meta for Developers account. The tab shows the predefined Meta (former Facebook) data in the App ID and App secret fields.
On the main page, go to the Client OAuth Settings. Complete the Valid OAuth Redirect URLs field with a redirect URL that Instagram will send the user after they have authenticated your application. This measure ensures an authorized connection between your site and Instagram.
In the Deauthorize Callback URL field, enter the designated endpoint where Instagram notifies your application when a user decides to deauthorize your application from their account. When this callback URL is triggered, your application can handle the de-authorization appropriately.
The Data Deletion Request Callback URL field serves a similar purpose but is specific to data deletion requests initiated by an Instagram user.
Press the “Save changes” button.
Before generating the Instagram token, it is necessary to add an Instagram Tester user to your app.
Adding the Instagram Tester role
In the dashboard, press the App roles > Roles tab and then the “Add People” button. Pick the “Instagram Tester” role in the Add people to your app pop-up.
Add the Instagram username to the A Facebook Developer Account is required to be added to an app field: select it from the suggested list of the Instagram users appearing when you start typing.
Press the “Add” button.
The tester account will be added to the Add roles list with the Pending status.
Instagram account settings
Open a new web browser window and log in to the Instagram account added as the tester account. Navigate to the More > Settings > Apps and Websites> Tester Invites tab.
Press the “Accept” button.
After that, the Pending status of the Instagram tester account on the Meta for Developers account > App roles > Roles tab will disappear.
Token generation
Return to the Meta for Developers account > Instagram Basic Display tab.
Scroll to the User Token Generator section and press the “Generate Token” button.
Then, you will be redirected to the Instagram authorization page to log in to the tester’s account. Press “Allow” in the following pop-up.
Tick the I Understand checkbox and copy the Instagram Access Token from the pop-up window.
Close the Token Generated pop-up window.
Adding Access Token to the Plugin Settings
Adding Instagram Photos to a Page/Post
Navigate to the Instagram account, added as the tester, and create posts with photos.
Return to your site and create a page or post. Find the Instagram widget and drag and drop it to the page/post. Unroll the Instagram Settings tab of the widget and select the My Photos option from the What to display drop-down menu.
Publish the page/post to watch the photos on the front end.
That’s all about creating an Instagram access token to display Instagram photos dynamically on your WordPress site using the Instagram widget of the JetElements plugin for Elementor.