PowerPack Instagram Feed widget allows you to effortlessly display your Instagram feed on your WordPress site using Elementor. This widget is designed to be user-friendly, requires no coding knowledge, and offers a variety of styling options to customize your feed to match your website's look and feel.
To fetch and display your Instagram feed on your site, you first need to create an Instagram Access Token. Let's walk through the steps to do that.
How to Create Instagram Access Token #
Note: Before proceeding, ensure that the Instagram account you wish to display is set to "Public". Additionally, you must have login access to this Instagram account, meaning you can access its profile settings.
Also Read: Set up PowerPack Elements Instagram Feed widget with Elementor
Step 1: Create a New App on Facebook for Developers#
- Visit Facebook for Developers: Go to the Facebook Developers App site and click on My Apps.
- Create a New App: On the next page, click Create App. A new popup window will appear, asking you to specify the purpose of your app.
- Select App Purpose: In the popup, select Other and then click Next to create an app with custom permissions.
- Choose App Type: On the next screen, select Consumer as the app type, then click Next.
- Fill Out the App Details: A form will appear asking for details like Add an App name, App contact email, and Business portfolio. Fill in these fields and click Create app.
Step 2: Set Up Instagram Basic Display#
- Add Products to Your App: After creating the app, you'll be redirected to a page where you can add products. Look for Instagram Basic Display and click Set Up.
- Create New App: Scroll down to the bottom of the page and click the Create New App button.
- Create a New Instagram App ID: Click the button to create a new Instagram App ID, and in the popup window, enter the display name of the app.
Step 3: Generate Instagram Access Token#
- Add Instagram Test User: To obtain your access token, you need to add an Instagram Test User. Go back to the Basic Display section, scroll down, and click Add or Remove Instagram Testers.
- Add a Test User: On the next page, click Add People.
- Add Instagram Username: Enter the Instagram username of the person you want to add as a tester. If you wish to access the token for your account, simply add your Instagram username.
- Accept the Tester Invite: Log in to the Instagram account you added as a tester. Go to Settings → Apps and Websites → Tester Invites and accept the invitation.
- Generate the Token: Return to your Facebook Developers dashboard. Under the Instagram Basic Display section, click Basic Display.
- Generate the Token: Scroll down to the User Token Generator section and click on the Generate Token button.
- Copy Your Access Token: A popup will appear with your access token. Copy it to the clipboard. You can now use this token to display your Instagram feed on your website using Elementor.
Note: Before saving changes, and you'll be asked to insert Valid OAuth Redirect URIs, Deauthorize Callback URL, and Data Deletion Request URL.
- Valid OAuth Redirect URIs: In this field, insert the URL as "https://api.powerpackelements.com/instagram-token"
- Deauthorize Callback URL: In this field, insert the URL that users will be pinged if someone tries to uninstall apps via Facebook.com without interacting with the app itself. We have inserted our website URL here as "https://powerpackelements.com/"
- Data Deletion Request URL: In this field, insert the website URL as "https://powerpackelements.com/"
Once you fill in all the details and get your token, click on the Save Changes button.
Add Instagram Access Token in Instagram Feed Widget#
Method 1#
- Head over to WordPress Dashboard >> Elementor >> PowerPack >> Integration.
- Scroll down to the Instagram Access Token field. Add the Instagram Access Token that we generated in the previous section to the Instagram Access Token field.
- Save the changes.
Method 2#
- Add Instagram Feed widget to any page.
- In the Instagram Feed widget, add the Token that you generated in the "Custom Access Token" option.
- Publish the page.
Feel free to contact us if you face any difficulties setting up the Instagram Feed widget! :)
