In this guide, we will give you step-by-step instructions on how to add & set the Instagram gallery feed to your Joomla website by using a dedicated addon from SP Page Builder Pro. We prepared two versions of our manual: video and more current text. We suggest checking both.

The video guide (Instagram Gallery Setup)

Step 1: Enable SSL/HTTPS for the site

Facebook (Instagram) request using valid SSL for the domain where you are going to use Instagram gallery. Contact your hosting provider to guide you about the whole process. After it would be enabled please in Joomla Global Configuration enable/force SSL for the whole website. More details you can find also in our blog post about SSL/HTTPS. On localhost, it may not be possible to configure SSL or configure all the below steps. We suggest using the final domain.

Step 2: 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 3: Create a Facebook App

Create a new app with App Type set as "None". 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.  

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

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

Notice! As of June 2020, Instagram will no longer offer access to its old API which is used to display feeds from Personal Instagram accounts.

Notice! Since 2018, you will only be able to display user feeds from accounts that you have a matching access token for.

Step 5: Add the site URL in Facebook

In Facebook: Login - Settings - Valid OAuth Redirect URIs. If you're using localhost it may not possible to validate that temporary URL. Please check all the below settings. In the Valid oAuth Redirect URIs, use the following URL but replace with your domain name to real one: https://your-domain.com/administrator/index.php?option=com_sppagebuilder&task=instagram.accessToken

Step 6: 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.

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. 

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. 

Step 7: Add Instagram Gallery Addon to Your Site

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.

Step 8: Customize Instagram Gallery

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.

...