Instagram Access token | SP Page Builder (Pro) 3.x - Documentation | JoomShaper

SP Page Builder (Pro) 3.x

Updated Last: 19 October 2021

Instagram Access token

In this guide we will give you step by step instructions on how to add & set Instagram feed to your Joomla website.

Step 1: Switch to Instagram Business Account

Instagram will only allow you to access images from your Instagram profile if you have switched your account to a business account. To do so, you must first login to your Instagram account and navigate to Settings > Account > Switch to Professional Account. Then you can add details such as the business email, phone number, and address. Click next, and you are good to go! For further information, you can visit Instagram’s documentation.

Step 2: Create a Facebook App

Instagram Feed on Joomla

The next step involves creating a Facebook App that will give the functionality to create an Instagram feed in Joomla. Head over to https://developers.facebook.com/apps to create an app for developers. The app creation process will guide you through all the settings, but for any further assistance, please visit our step by step guide here.  

Step 3: Create a Facebook Page for your Instagram Business Account

Instagram Feed on Joomla

For the next part, we will create a Facebook Page that also connects to Instagram to give you the required functionality. To do so, head to facebook.com/pages/create and start creating a Facebook Page. However, if you already have a Facebook Page for your business, you can skip this part and simply connect it to your Instagram profile.

To connect the Page to your Instagram profile, head to Page Settings > Instagram and click on “Connect Account”.

Step 4: Configure SP Page Builder Backend

Then we need to head to https://developers.facebook.com/apps/ to get our Instagram access token. Navigate to Settings > Basic, and click on “Show” to view the App ID and App Secret. Copy the App ID and the App Secret.

Instagram Feed on Joomla

Head to the Joomla backend of your website and go to SP Page Builder > Pages > Options and go to SP Page Builder Configuration. In the options tab, you will find fields to paste the App ID and App Secret. Paste the App ID and the App Secret accordingly, click on next, and you will see a button that says Generate Access Token. 

Instagram Feed on Joomla

Click on Generate Access Token and this will present you with a screen that will ask you to select the Instagram Business Account that you would like to link with the SP Page Builder addon. Select your Instagram account and hit on Next. Now, select the Facebook Page that you have created earlier and click on Done. Your access token will be generated and all that is left to do is click on Insert & Save Token. 

Note: The naming scheme on Facebook’s side is a bit inconsistent as “App ID” are sometimes called “User ID”, “Instagram ID” and so on. However, please don’t get confused as there are only two codes you need to be concerned with: ID and Secret. As long as you have them in check, you will be fine.

Once you have successfully linked your Instagram account and the Facebook Page, all you have to do now is add and customize the Instagram Gallery Addon. It can be added to an SP Page Builder page just like any other addon. To do so, go to the administrator dashboard > SP Page Builder > Create a new page. Give your page a title and add a new row. Alternatively, if you want to add the addon to an existing page, go to the frontend editor of that page, and simply add the addon.

Now, from the addon, select Instagram Gallery. Here, you have the flexibility to choose Item Limit and Number of photos per row. We’ve also added two ways for you to fetch images from Instagram, and they are: 

  • User ID: This will fetch recent content from the linked Instagram profile. It can be your Instagram profile for your portfolio, or from your business’s profile. 
  • Hashtag: This will fetch images that match the specific hashtag. For example, if you want to display images of cupcakes, you can simply write “cupcakes” and the gallery will load all images with a matching hashtag in their caption. 

After that, go ahead, and customize the grid that looks the best to you. And you’re done! Your page should load the content from your Instagram account successfully.

Instagram Feed on Joomla