Croco Black Friday 2024 banner element
Copy discount code:
bfcroco2024
Days
Hours
Minutes
Croco Black Friday 2024 banner element
Help Center
How to Create Instagram Access Token

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:

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.

create app button in the meta for developers' accounts

Select the “Other” option on the What do you want your app to do? window. Press the “Next” button.

selection of the app application window

Select the “Consumer” option on the Select an app type window. Press the “Next” button.

selection of the app type window

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.

Things to know

Do not select the Business Manager account option in the Business Account drop-down field.

Press the “Create app” button. Re-enter your password and press the “Submit” button.

details window

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.

basic app settings

The App ID, App secret, and Display name fields automatically will show the app’s name users added previously.

Things to know

Do not change the automatically added data in the Display name field.

To display the Instagram photos on a particular site, scroll down this window and click the “+Add platform” button.

select platform window

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.

insert site url

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.

adding products to the app page

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.

adding instagram app name

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.

Things to know

During the initial setup, you can use a temporary URL, such as the URL for your website, for testing purposes or to proceed with the configuration. Still, it is crucial to revisit and update these fields with the actual and valid URLs that your application will use.

Press the “Save changes” button.

Before generating the Instagram token, it is necessary to add an Instagram Tester user to your app.

client oath settings

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.

adding the instagram tester role

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.

instagram app and website settings

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.

instagram access token popup

Close the Token Generated pop-up window.

Adding Access Token to the Plugin Settings

Navigate to WordPress Dashboard > Crocoblock > JetPlugins Settings. Unfold the JetElements tab and proceed to the Integrations tab. Paste the copied Instagram token to the Access Token field.

jetelements settings

Adding Instagram Photos to a Page/Post

Navigate to the Instagram account, added as the tester, and create posts with photos.

instagram 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.

instagram widget settings

Publish the page/post to watch the photos on the front end.

front-end view of the instagram photos


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.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.