How to add an Instagram feed to Drupal

Drupal is one of the most popular open-source content management systems powering websites for brands and organisations like Tesla, Pfizer, NBC - and many more.

Therefore, it comes as no surprise that one of the most common questions in Flockler’s customer support is how to embed an Instagram feed to Drupal.

Instagram’s embed code allows you to add images and videos to any digital service. However, most organisations update their Instagram profile and other social media channels frequently – and keeping your websites up-to-date with a manual image embedding process is time-consuming.

Are you looking for an automated solution to show your latest Instagram posts and hashtag campaigns on Drupal?

Flockler helps brands to add live-updating Instagram feed widgets to any Drupal page. In less than five minutes, marketers without developer skills can set up an automatically updating feed and embed it on the Drupal homepage or any other page.

While this guide's about Drupal, you can also embed an Instagram feed on any website and digital service. Here are tutorials for some of the most common content management systems and e-commerce platforms:

Embed an Instagram feed on Drupal: a three-step guide

Here’s a three-step guide on how to add an Instagram feed to any Drupal page:

Add Instagram profiles and hashtags
Choose your Instagram widget layout
Embed an Instagram feed on Drupal

1. Add Instagram profiles and hashtags

The first step is to decide which Instagram feeds you’d like to show on your Drupal site.

With Flockler, you can create multiple Instagram feeds and display them together. Here are the available Instagram sources:

Instagram hashtag feeds: You can show images and videos from all Instagram users mentioning a particular hashtag. The content and their profiles need to be public.
Instagram Business account feeds: you can decide to gather content from any Instagram Business account. You don’t need to be an admin of any specific Business account.
Mentions of the Instagram Business account: You need to be an admin of a specific Business account. You can gather both mentions in captions and when users tag you in their images. The images and videos need to be public.
Instagram Stories: You need to be an admin of a specific Business account. Instagram Stories will be visible for 24 hours in Flockler. We create an element that keeps updating with new Stories if you keep publishing content on Instagram.

Creating your Instagram feed with Flockler takes a couple of minutes, and the feed updates with fresh content every 5-15 minutes.

Here’s a one minute video on how to gather images and videos by any Instagram Business account:

2. Choose your Instagram widget layout

Once you’ve added one or multiple Instagram accounts and hashtags to your Flockler feed, the second step is to choose your Instagram widget layout.

Navigate to Flockler’s Display tab, and you’ll get four Instagram widget layout options:

Wall
Grid
Carousel
Slideshow

You can embed Wall, Grid, and Carousel layouts on any website and digital service. The Slideshow is the perfect choice if you have digital screens at the office or organise live events.

After choosing your Instagram widget layout, you’ll get an embed code that can be added to any Drupal page.

3. Embed an Instagram feed on Drupal

Drupal is a versatile publishing platform, and there are quite a few ways to add Flockler’s embed code to your Drupal site. The best position for your Instagram widget depends on the theme and layout of your Drupal website.

In this tutorial, I’ll walk you through two options:

Embed your Instagram feed on any article or page on Drupal
Embed your Instagram feed on your Drupal homepage with the block element

1. Embed Instagram feed on any article or page on Drupal

You can add an Instagram feed widget to the content area of any article or page.

In the content editor of an existing or new page, select the 'Full HTML' option from the dropdown. Then click 'Source' in the toolbar and add Flockler’s embed code to the body field.

Finally, click the 'Save' button, and you’ll find the stunning Instagram feed on your Drupal site. Simple as that!

2. Embed Instagram feed on Drupal’s homepage with the block element

If you are familiar with Drupal’s block elements, adding Flockler to your homepage is straightforward.

In Drupal’s site management, navigate to Structure > Block layouts and click the 'Custom block library' tab. Next, click the '+ Add custom block' button.

In the editor, give the block a name (e.g., Flockler widget) and change the text format to the 'Full HTML'. Then click 'Source' in the toolbar and add Flockler’s embed code to the field. Click to save changes.

After that, go back to the 'Block layout' view and select where you’d like to add the Instagram widget. For example, you could add it to the Content area. Click 'Place block'.

Then select the block ('Flockler widget') you created earlier.

In the editor, you can select if the block's title is visible on your page and if there are any restrictions. For example, you could decide to restrict this element to show on a specific page.

After configuring your custom block, scroll down the page and click 'Save blocks' to save your changes.

All sorted, the beautiful Instagram widget appears on your homepage!

Why brands show Instagram feeds in Drupal?

There are a few key reasons why brands add Instagram feeds to their websites.

Drive conversions

With a live-updating feed of Instagram images, you can highlight your most recent products and services and display feedback and social reviews from customers. This social proof embedded on your website builds trust and increases conversions. Also, you can add call-to-action buttons directing your visitors to the products and services that are shown in the user-generated content.

Increase time spent on site

Displaying a fresh feed of images and videos on your homepage helps you keep visitors engaged with your services longer. And if you have built user-generated content campaigns, then the Instagram feed enriches your website with authentic and engaging content.

The Instagram grid embedded on Hapag-Lloyd’s website highlights some of the feedback from their happy customers.

Build engagement and reach

To add to increased conversions and time spent on site, Instagram feeds on websites help brands build engagement and reach on social media channels. The more people view and engage with your content on social media channels, the more people will see your posts in their news feeds, too. Therefore, you want to maximize the visibility of social media content on your websites and digital services - it makes sure your content constantly inspires a new audience that hasn’t interacted with you on Instagram just yet.

With Flockler, you can gather and display social media feeds from your favourite channels. See the full list of supported content types and sources