[Extended] BFCM Sale! Get up to Recently Instagram made changes to its policies making it mandatory in some regions for users to be logged in to https://instagram.com to view images for public profiles. This caused the PowerPack’s Instagram Feed to break since it is no longer able to access the photos from Instagram.
To fix this issue, we have added a new way in which you can display photos from your Instagram Feed. This new method requires you to create Instagram Access Token. Instagram Access Token is required to prove that you're the owner of your account and you allow the use of photos and content on your site.
Read More: Set up PowerPack Elements Instagram Feed widget with Elementor
So, here in this guide, we will show you how you can create Instagram Access Token and display images from Instagram on your site.
Create Instagram Access Token#
Step 1: Create a Facebook App from Facebook for Developers#
- Head over to https://developers.facebook.com/ and click on "My Apps".
- Next, click on "Create App".
- Now, a popup will appear here asking the requirement for the new app that you're going to create. Simply click on "Consumer" in the popup and click "Continue".
- A new form will open up with some fields like App Display Name, App Contact Email, etc. Fill up these fields and click on "Create App".
- Next, go through the reCAPTCHA security check and the app will be created.
Step 2: Setup Instagram App#
- Once you have crossed the reCAPTCHA security check, a list of apps will be shown. Choose "Instagram Basic Display" from the list and click on "Set up".
- Now, some detailed information about the display, use cases, and permissions of "Instagram Basic Display" will show up. Read it up and click on "Create New App".
- Next, a popup will appear asking you to "Create a New Instagram App ID". Type in the Display Name of the Instagram App ID and click on "Create App". Here, in our example, we have added Display Name as "Test Feed".
Step 3: Instagram Basic Display Configuration#
- Configure the newly created app by heading over to Settings >> Basic on left-hand side menu of the screen.
- Here, in the Basic settings, you'll see App ID and App secret created by default by Facebook. You'll need to fill out the remaining fields your app’s name, domain, email, and others. Select “Business and Pages” in the Category list and choose the “Yourself or your own business” option in the App Purpose block.
- Finally, click on the “Save Changes” button.
Step 4: Add Instagram Test User#
- Head over to Dashboard >> Roles and click on "Add Testers" in the Tester Section.
- Now, a popup will open up asking for the username of the Instagram Handle that you want to add as a tester. Enter your username here. For our example, we have used our own Instagram username "helloideabox" here.
- Once you add the Instagram username and click on "Submit", an invitation will be sent to the Instagram Account.
- Next, you will have to confirm this invitation by heading over to Instagram.com and signing in to your account. After signing in, head over to Settings >> Apps & Websites >> Tester Invites. Accept the invitation.
Note: You'll only be able to confirm the invitation by accessing instagram.com from the desktop. You won't be able to confirm the invitation from the mobile app.
Step 5: Generate Instagram Access Token using App ID and App Secret#
- Once you have accepted the invitation, head over to Products in Dashboard. Here, click on Instagram Basic Display and a dropdown list will open. Select "Basic Display" from the list.
- Here, scroll down, 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 which 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 too, insert the website URL as "https://powerpackelements.com/".
- Next, scroll down further and click on "Generate Token" in User Token Generator section. Please note that you should be logged in at https://www.instagram.com/ to generate a token.
- Once you click on "Generate Token", the Token will be generated as shown in the screenshot below.
- As you can see in the above screenshot, the Instagram Access Token has been generated. Simply click on "I understand" and Copy the Access Token.
Note: Please note that the Instagram Access Token is active for 60 days and then it expires. So you will need to regenerate the Access Token and add it again. You will need to follow the procedure once more to regenerate the Access Token.
However, if you follow the "Method 1" listed below to add the Instagram Access Token to your site, then you will not need to renew the Token manually every 60 days and the PowerPack plugin will do that for you automatically.
Add Instagram Access Token in Instagram Feed Widget#
Method 1#
- Head over to WordPress Dashboard >> Elementor >> PowerPack >> Integrations.
- 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.
Please note that this is the recommended method to add the Instagram Access Token to your site. By using this method, you will not need to renew the Token manually every 60 days and the PowerPack plugin will do that for you automatically.
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. The Instagram Feed widget will work perfectly fine now.
Feel free to contact us if you face any difficulties in setting up the Instagram Feed Widget! :)
