Skip to content

Documentation

Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

PowerPack

⌘K
  1. Home
  2. Docs
  3. PowerPack
  4. Modules
  5. Instagram Feed
  6. How to set up PowerPack’s Instagram Feed module with Beaver Builder?

How to set up PowerPack’s Instagram Feed module with Beaver Builder?

Table of Contents

    PowerPack Beaver Addons Instagram Feed allows you to fetch the Instagram photos from your Instagram account and show it on your website/blog. You can set it up in a few simple steps but before we start let us learn a few things.

    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.

    In order 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.

    Before we get started, let us understand a few things:

    1. The following tutorial will work only for the updated Instagram Module added in PowerPack Pro v2.14 and above.
    2. The Instagram profile should be a public profile.

    Now, let us understand, 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

    Facebook for Developers
    Facebook for Developers
    • Next, click on “Create App”.
    Create a New App in Facebook for Developers
    Create a New App in Facebook for Developers
    • 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“.
    Create a New App in Facebook for Developers
    Create a New App in Facebook for Developers
    • 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”.
    Create an App in Facebook for Developers
    Create an App in Facebook for Developers
    • 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”.
    Instagram Basic Display
    Instagram Basic Display
    • 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”.
    Display Name for Instagram App ID
    Display Name for Instagram App ID

    Step 3: Instagram Basic Display Configuration

    • Configure the newly created app by heading over to Settings >> Basic on the left-hand side menu of the screen.
    Instagram Basic Display Configuration
    Instagram Basic Display Configuration
    • 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 Instagram Testers” in the Tester Section.
    Add Instagram Testers
    Add Instagram Testers
    • 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 example, we have used our own Instagram username “helloideabox” here. Please note that the test user must be the Instagram account for which you want to display the feed.
    • Once you add the Instagram username and click on “Submit”, an invitation will be sent to the Instagram Account.
    Invitation Sent to Instagram User
    Invitation Sent to Instagram User
    • 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.
    Instagram Tester Added
    Instagram Tester Added

    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.
    Basic Display in Dashboard >> Products >> Instagram Basic Display
    Basic Display in Dashboard >> Products >> Instagram Basic Display

    Here, scroll down, and you’ll be asked to insert Valid OAuth Redirect URIsDeauthorize Callback URL, and Data Deletion Request URL.

    • Valid OAuth Redirect URIs: In this field, insert the URL as https://wpbeaveraddons.com/instagram-access-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://wpbeaveraddons.com/
    • Data Deletion Request URL: In this field too, insert the website URL as https://wpbeaveraddons.com/
    Client OAuth Settings, Deauthorize and Data Deletion Requests
    Client OAuth Settings, Deauthorize and Data Deletion Requests

    Now, there are two ways to generate the Instagram Access Token:

    Method 1

    Instagram Token Generator
    Instagram Token Generator
    • Click on “Authenticate” and you’ll get the Instagram Access Token. (Instagram may require the account to login to authenticate)

    Method 2

    • Head over to Dashboard >> Instagram Basic Display >> Basic Display and click on “Generate Token” in the 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.
    Instagram Token Generated
    Instagram Token Generated
    • 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.

    Add Instagram Access Token in Instagram Feed Module

    • Add Instagram Feed module to any page.
    • Once you drag the Instagram Feed module to any page, you’ll see a line “Your Instagram Access Token is missing, click here to configure”.
    Add Instagram Access Token

    Once you tap on “click here”, you will be redirected to the “PowerPack Settings” page, where you need to enter the Instagram Access Token that you copied in the previous step.

    Enter Instagram Access Token
    Enter Instagram Access Token
    • Once you have done that, save settings and go back to the page where you have added the Instagram Feed module.
    • You’ll see that photos from your Instagram account will start appearing just fine!
    Instagram Feed
    Instagram Feed
    • Finally, publish the page.

    That’s it! 🙂
    This was all about setting up the Instagram Feed Module. Feel free to get in touch with us in case you face any difficulties in setting up the module.

    ×