How to add an Instagram feed to Joomla

Joomla is one of the most popular free and open-source website publishing tools. Joomla comes with an extensive amount of ready-made templates and plugins, and the CMS is trusted by organisations like Hyundai and the NCA, and famous sports stars Michael Phelps and Roger Federer.

Brands love Instagram, and it doesn’t come as a surprise that Joomla customers often add social media widgets on the homepage or create landing pages for their user-generated content campaigns. With tools like Flockler, Joomla customers can combine social media feeds from Instagram, Facebook, X (formerly Twitter), YouTube, and other channels and then display those feeds anywhere on their websites.

In this tutorial, we will walk you through how to display Instagram feeds on any Joomla website.

Creating an Instagram widget for your website is straightforward and only takes a couple of minutes. Here’s a three-step guide on how to add an Instagram feed to Joomla:

1. Gather Instagram feeds by username or hashtag
2. Choose the Instagram feed layout: Wall, Grid, Carousel, or Slideshow
3. Embed an Instagram feed on any Joomla page

1. Gather Instagram feeds by username or hashtag

Before getting started, sign up for Flockler’s free trial. You get access to the full product – a credit card is not required, and there’s no commitment.

After signing up, create your first Instagram feed. From Instagram, you can gather and display:

• Images and videos of any Business
• Hashtag feeds from all users
• Mentions of your Business account
• Stories from your Business account

Here’s a quick video on how to gather Instagram images and videos from any brand:

Would you like to show more than one account or hashtag, or mix Instagram content with content from another channel like TikTok? With Flockler, you can combine social media feeds from multiple accounts, hashtags or channels and display them all in one place. See the list of supported social media channels and content types that you can display together.

2. Choose the Instagram feed layout: Wall, Grid, Carousel, or Slideshow

Now that you’ve got the Instagram feed set up, the next step is to select a layout that fits your website's look & feel.

From the Display tab, you can create Social Walls, Grids, Carousels, and Slideshows. There’s no limit – you can create as many as you need.

After selecting the layout, you’ll get an embed code that you can add to your Joomla website.

3. Embed an Instagram feed on any Joomla page

The last step is to embed your Instagram feed on your Joomla website. For this tutorial, we will show you two different methods:

1. Add an Instagram feed to any Joomla page
2. Add an Instagram feed to all Joomla pages

1. Add an Instagram feed to any Joomla page

Often, Flockler customers display Instagram feeds on a dedicated social wall page or hashtag campaign landing page. Here’s how to add Flockler to your Joomla page:

1. In the Joomla management, click 'Content', select 'Articles', and then click 'Add New Article'. 

2. In the article editor, add a title for your post and then click the 'Code' button in the toolbar. 

3. A window opens with a field for the embed code. Go to Flockler’s Display tab and copy and paste the Instagram feed embed code into the field. Then click 'Insert'. 

4. Then click 'Save & Close'. If you like, you can add the page to the site menu from Joomla’s menu editing tools. 

5. And finally, visit your website to view the beautiful Instagram feed!

2. Add an Instagram feed to all Joomla pages

Joomla includes Modules that website developers can use to display Instagram feeds on dedicated areas all over the website. For example, you might want to show an Instagram feed on the website footer on all pages – Modules are the perfect solution for that!

Here’s how to add an Instagram feed with a custom Module:

1. In the Joomla management, click 'Extensions' and select 'Modules'. 
2. Then click the 'New' button. 

3. From the list, select 'Custom'. 

4. Then click the 'Code' button in the toolbar. 

5. A window opens. Copy and paste the Instagram feed embed code from Flockler to the field and click 'Insert'. 

6. Give a title for the Module and select the position from the right. Here you might need the help of your website developer to make sure the Module shows up on all pages and that the selected position is not in use for another purpose.
7. Finally, click 'Save & Close', and the Instagram feed is embedded on your Joomla website.