Create an Instagram Access Token for Elementor with New Instagram API

In this article, I’ll show you how to create an Instagram Access Token so that you’re able to add an Instagram feed to your Elementor or WordPress website using the NEW Instagram API. 

You’re going to learn how to generate the access token and how to integrate it into your WordPress website and display an Instagram feed on your website. We’ll be using the free Power Pack addon Instagram feed elementor widget. 

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Creating an Instagram Access Token Tutorial

Create Instagram Access Token

The new Instagram API requires you to create an access token that you enter in your WordPress or Elementor website so that you can access and showcase your Instagram content on your website. So first you need to create an Instagram access token.

For this, go to developers.facebook.com. On this website go to the My Apps option (01:43)

feVlE7NYn88JC5T6A12yFZS5GBR78OKKPiMdDa pQQNMic5Qqx9K4aHu1YJfZL8rxnyUF6EukaL5t EptuK6ZyV6mvduRUGK7xfnEMzHOlWQ7yk ZMB5wHsmTrTcqpNp oEm6nA

Under My Apps, you’re able to create the app that’s going to enable you to generate your Instagram access token. 

Click on Create App, click on more options then click the Continue button (01:53)

tpUZoNmjKc t2ywByHr8G3Q

In the following window click on the Something else option then Continue (02:02)

jpyNn6IrMuVopyIcvZ rtyhQ1u2IOld6HpaUP0i5 OXdYQA1HyLVK8naBdiWiAwDDyNIqSLJhwgUyEacuektI 4 t4if cDDGANQMQmTpNFzdI1l6JPDorXXteTPEO16aI2SMCwT

On the App Display Name, give it a name; make sure it doesn’t include ‘facebook’ or ‘Instagram’, enter your contact email then click create app (02:25)

fPxHAZv6uUP 9DSCzGdYuC kk3YHbh3zot8p1ehzFD5PwgmgrFN2BY5W7evypt0yTvhEJdaS6omE4YIR8XoguYwTjGP9XNRlDQeyoecixG

Perform the security check that pops up, then in the next window scroll down to Instagram Basic Display, then click Set up (02:41), then scroll down to the create new app button.

kYhSvq33BCwVC6LBP zW8AZptj19PRVieTn8f6J5Wfhv PFxTSv1 KI nOLgNGRIuLF4HOeCpbFkgFBRqTEHDcnIUo6Za9z6OjAxBbPJXCY Lxv VnjgCq6oqS7UrOilVWmdlS87

In the next window, you need to add the necessary URIs. You’re going to use an Elementor addon called Power Pack for Elementor to give you access to the Instagram API.

Under Client OAuth Settings add these details;

Valid OAuth Redirect URIs: https://api.powerpackelements.com/instagram-token 

Deauthorize Callback URL: https://powerpackelements.com/

Data Deletion Request:: https://powerpackelements.com/

When you’re done save changes (03:24).

RQ0Xqrut8JOspCEM4mN3Jra74 AJODkRbrxUWZjFNijcPKZHiEiQYesTVAP0 u hVU7Xz6P4FOj1dlCUzo3LkjAxzoahW7 HpVoAlJhbLqb6YWVm53dY3vEAilC1FlpbLpD6JD

Click on the Add or remove Instagram testers option, scroll down and click to add Instagram tester, add your valid Instagram account, then go to your Instagram account and approve the request under Tester invites (04:14).

Z eSG9QQBbKQSiXnJbh2kjsjMhd0sVdRsWEqUhQbnKU7yaKqN6r2C9FhCGGqzT 5RVUfkLp1yaHcHbWEaJKwT4uVI7 jSPpCwZRuh b4KtXnV4 pBIO3oCkQjHyrboBdE7HWJNUi

After accepting, go back to the developer website and reload the page.

Click on the Instagram Basic Display option (04:36), then scroll down and click Generate Token.

create-an-instagram-access-token-for-elementor

In the popup click on I Understand, then click Copy to copy your Instagram token (04:59)

n5C4oOlRwZ jJZP9UsKjSGAf2DkJJvuo80KrJyJQhO HyGl pay0mILaUc2HCv1aIx eSoSIKQb4FYXA3gY47hWZ EN5YMlS L7dOblzoU0Uh FmpPISkhuD VtFSMT 2eI 2G2

Also Read: Elementor Fade In Background Image on Hover using Premium Addons

Install and Activate Elementor PowerPack Addon

Go to your WordPress dashboard > plugins > add new. Find the PowerPack Addon and activate it (05:10).

HEiBpdvKQk4zdYrcl7IEIWsuDzj66SnJX2vEnF OgBcfqTikERTMDt BhkYvoy98awn5rq66J4v7Nn0iYgf9r c NLczVmBJVZSTZK7WSgetCQlRYLW0Kph2UBqghcwmXjqav1l

When the powerpack addon is active, go to its Settings, find the Instagram Feed option and enable it (07:29). 

U81c14wAROvPVtrVU Ca EG3rwSQjpHApwL1akgwzqfz5twDlew9TE7RDvXZHHQYSijbWTaJlpIEEAS8 cjzlIFcbtEsoJ7oiA6AX oQMN03ZDSxeo5ZTsS5P IrZF9rHpCl KV

Adding an Instagram Feed to your Elementor Website

With your Instagram feed enabled, go to Pages and open up the page where you want to display your Instagram feed, for example, go to your Contact page and click Edit with Elementor.

In your Elementor editor, open up a new one column section. Go to your Widgets area and search for the Instagram feed then drag it to your section (05:57)

With your widget selected, go to the Edit Instagram Feed area on the left, enable the Use Instagram API option, then on Custom Access Token paste your access token (07:29).

cpbkSKvrUH kXnh sQTSw6UOu uA5BHO6CS2xuMV07e7DWV3Tt2hxTTN16rdevV4x io8MxB5DQcHpYsCmsqb7yMEVOCKOmXU9hVc2R zRz3qYO wt6qKVyyzvCSMpGmpccsPZ5g

On the Images Count option, you can set how many images to display, you can change the resolution, you can choose how many columns to display, enable the Lightbox option. On the Instagram URL option, you can enter your link for your website visitor to access your Instagram account (06:30), when you’re done just save the changes.

gLRKEifJUy CYyHIj53iVjpVGLkHTBO1pq4GN7AruWMncMW6hpWdbv8 fJ GmGGN1yONJROo2mNC2oqExfV0wSj1ZUfHsHvJWI6hTAvmEpxn4DS5hRWeDltDsA88fUnAjt 8QCKy

Under Style > Layout, you can add a Columns gap of about 3% and a Rows gap of 3% to your images. Update and preview.

hgmS6afCPGA V90H1nJ585mKR6T5K1C A0Zxs28 L6aUcolMSUIVALQcrl8PuK6qDZLbqTNEZvf7H2FK iSc8w8nr6YPsd0FkAiPlUje

Also Read: 3 Ways to Add MAILTO link in Elementor (Email Link in WordPress)

In closing

That’s how you can create your Instagram access token and use the new Instagram API to display content on your Elementor/WordPress website.

If you have any comments, questions, or suggestions, let me know in the comments section below. And don’t forget to subscribe to my newsletter and youtube channel for more tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users