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)

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)

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

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)

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.

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

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

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)

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

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

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

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.

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

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)
Picture of 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