How to Display Multiple Instagram Feeds on Your Website

How to Display Multiple Instagram Feeds on Your Website

by Stacey Corrin on May 5, 2020

Are you looking for an easy way to show more than 1 Instagram feed on your website? Showcasing multiple feeds helps you highlight your best content so you can engage site visitors, grow your following, and secure new customers.

But how do you display multiple Instagram feeds on your website?

In this article, we share all the ways to showcase your feeds in WordPress. So you can delight your audience and grow your business.

Here’s a table of contents to help you quickly find the information you need:

But before we dive in, let’s looking at some of the reasons why you’d want to show more than a single Instagram feed on your site.

Why Display Multiple Instagram Feeds?

There are many reasons why you might want to add multiple Instagram feeds to your website. The most obvious reason is so you can share feeds for all your Instagram accounts in one place. That way, your visitors are aware of the accounts you own, and the types of content you share on each.

But that’s not all.

Having more than 1 Instagram feed on your site can also let you achieve the following goals:

  • Highlight Instagram feeds belonging to different authors on your website
  • Display different feeds for each product category
  • Add separate feeds of review posts on your checkout page to reduce cart abandonment
  • Curate hashtag feeds for displaying popular content on your site
  • Display user-generated content (UGC) from customers using your products or services
  • Showcase filtered project galleries of your team’s best work

There’s a ton of ways to use several Instagram feeds across your website. So how do you do it?

Let’s take a look.

How to Display Multiple Instagram Feeds

Adding multiple Instagram feeds to your site might sound tricky. But it’s easier than you think.

With Instagram Feed Pro from Smash Balloon, you can show as many feeds as you like on your website. And with no technical knowledge needed to get started, you can fine-tune your feeds to blend seamlessly with your site design. Then you can serve your best social content to delight and engage your audience.

Let’s look at how to get set up.

Install Instagram Feed Pro

Smash Balloon Instagram Feed Pro

To begin, get your copy of Instagram Feed Pro here.

Then download the plugin to your computer and upload it to your WordPress website. Next, install and activate the plugin in WordPress. If you need help with that, you can learn how to install a WordPress plugin here.

Excellent! Now you can move on to fine-tuning the plugin settings.

Configure Your Feed Settings

After you’ve installed the Instagram feed plugin, navigate to Instagram Feed » Settings from the WordPress admin area.

This is where you connect your Instagram account to your website. To do that, click the big blue Connect an Instagram Account button.

Connect an Instagram account

Then an overlay appears asking you if you’d like to connect a personal or business account.

Connect a business or personal Instagram account

Personal accounts let you display user feeds from a personal account, so choose this option if you’d like to show feeds from only your account.

The Business Account option lets you show customized feeds using hashtags, tags, comments, and more. So if you’re looking to mix up and personalize your content, choose this option.

When you’ve picked an account option, click Connect.

Confirm Instagram account connection

After that step, confirm the account that’s connected, and click Connect Accounts.

You can also manually connect to an Instagram account by entering the Access Token linked to the account. Simply paste in the Access Token and User ID and click Connect This Account.

Connect with an Access Token and User ID

On the same Settings page, you can choose your default feed options next to the Show Photos From heading which includes:

  • User Account: A feed of your latest Instagram posts.
  • Hashtag: An Instagram feed of the hashtags you define.
  • Tagged: A feed displaying photos your account is tagged in.
  • Mixed: Feeds showing multiple feed types in a single feed.

Once you’ve chosen a default feed, click Save and move on to customizing your feeds.

General Customization Settings

To find the customization settings, navigate to the Customize tab at the top of the Settings page.

On this page, you can alter the general look and feel of your feeds, your post options, and choose moderation settings.

In the General section, you can change the width and height of your feed, and set a custom background color.

General feed settings

Then moving down the page, you can choose from the following feed layouts:

  • Grid: A uniform grid of square-cropped images.
  • Carousel: Posts displayed in a slideshow carousel.
  • Masonry: Images in their original aspect ratios with no space between them.
  • Highlight: Masonry style square-cropped images with no captions or likes beneath them.

Beneath the layout settings, you can set the number of photos and columns in your feed. And this is where you can change the padding around images too.

Instagram feed layout settings

The final section on this page lets you decide whether to show your feed header, the load more button, and the follow button. Clicking each section expands customization options for each feature.

Instagram feed header and button settings

Don’t forget to save your changes before moving on.

Post Customization Settings

Now navigate to Customize » Posts. This is where you can choose which posts to display in your feed and how they’ll look.

Instagram post settings

Here you can configure the following settings:

  • Sort photos by newest to oldest or random
  • Select an image resolution or let the plugin detect it automatically
  • Choose to display pictures, videos, or all media types
  • Disable lightbox popups when users click a photo
  • Link posts to the URL in the captions to create shoppable Instagram feeds

The next section lets you chose colors for the background and text when users hover their cursor over your feeds. You can also select which information to display, including:

  • Username
  • Date
  • Instagram Link/Icon
  • Caption
  • Like/Comment Icons

Photo hover styles

Throughout the rest of the page, are options to customize the text for comments and captions and the ability to show or hide comments in image lightboxes.

Moderation Customization Settings

Instagram Feed Pro has a nifty feature that lets you moderate the content that appears in your feeds. To access the options, navigate to Customize » Moderation, as shown below.

Instagram post filtering

On this page, you can filter Instagram posts by removing or showing photos containing specific hashtags. Simply enter the hashtags you’d like to filter, separated by commas, and click Save Changes.

If you’d prefer to moderate your Instagram feeds in a visual format, scroll down the page and click Visual next to the Moderation Type heading and click Save Changes.

Visual Instagram post moderation

With this option enabled, you’ll see a moderation button next to all your published Instagram Feeds, as shown below. This button is only visible to logged-in users with Admin privileges.

moderate instagram feed button

Clicking the button lets you visually select posts you’d like to remove from your feed. This is a great way to control the quality of feeds displaying public content.

visual moderation on Instagram feeds

Advanced Customization Settings

When you navigate to Customize » Advanced, there’s a ton of options to customize your feeds further. For example, you can add custom CSS and custom JavaScript to refine the look of your feeds.

advanced customization settings

Below this section, you’ll find options for image resizing, Ajax, backups, and more. To learn more about each option, click the “What does this mean?” link beside each one.

Advanced settings, what does this mean?

With all your settings configured, its now time to display multiple feeds on your website.

Display Multiple Feeds Using WordPress Blocks

With the recent announcement of social blocks for all Smash Balloon plugins, displaying multiple feeds in WordPress is super-easy.

Social media blocks act as a visual page builder, providing a preview of your content before you publish. This ensures your feeds look amazing before releasing them to your site visitors, as well as making it easier to move elements around on the page.

To add an Instagram feed to a new page, navigate to Pages » Add New from the WordPress dashboard to create a new page.

Then after giving your page a name, look for the plus (+) icon that indicates adding a new WordPress block and click to reveal the blocks panel.

Add a new social media block

Now type “Instagram” into the search box to reveal the Instagram social block and click it.

Search for Instagram Feed block

A preview of your primary Instagram feed will show up in the page editor, as you can see below.

Preview your Instagram Feed

But that’s only a single feed, showing your most recent posts. You want to display multiple feeds, right?

Well, this where the social media block settings come in to play.

When you click the block in your WordPress page editor, you’ll see a section in the right-hand sidebar labeled Shortcode Settings. This is where you can define precisely what your feed displays to site visitors.

Instagram feed block shortcode settings

To give you an example, let’s say you only want to display images containing the hashtag #fall. To do this, you’d add a shortcode defining the user feed you wish to display, containing only the word fall.

Here’s what the shortcode would look like for our example:

['instagram-feed user=landscapeswelove includewords=#fall]

This means only images with the word “fall” in the caption are displayed.

Now if you want to add another feed to the page, repeat the process above, and define different shortcode parameters like the one below:

['instagram-feed user=landscapeswelove includewords=#cloudy]

multiple instagram feeds filtererd

Now you have 2 feeds on your website displaying different types of Instagram content. Here’s how it would look for site visitors.

Display multiple instagram feeds

Pretty neat, right? This would be a great way to display Instagram feeds of specific product categories on different product pages.

But what if you want to add multiple Instagram feeds in widget ready areas like your blog sidebar too? Let’s look at how to do that next.

Display Multiple Feeds in Widget Areas

As you may already know, many modern WordPress themes come fully equipped with widget areas for you to display extra information to your visitors. It’s also a popular place for highlighting Instagram feeds filled with stunning images.

The Instagram Feed Pro plugin comes fully equipped with a WordPress widget to make adding your feeds to sidebars, footers, and other widget areas easy. You can also add custom shortcodes to the widget to display specific feed types.

To add a feed to a widget area, first head to Appearance » Widgets from your WordPress dashboard.

For this feed example, let’s say you want to display a feed in the footer containing your latest Instagram posts, and one in the sidebar of popular hashtags from the public.

First, find the Instagram Feed widget and drag it over to your footer widget area. Then add the shortcode defining your user feed.

Instagram Feed widget

In our case, it would be:

['instagram-feed user="landscapeswelove" num=”4”]

We added the number parameter, so the images display in a single row. You can see all the different shortcodes available under Instagram Feed » Settings » Display Your Feed.

Here’s how the feed looks live on the website:

Instagram Feed in Footer using widget

Now to add a specific public hashtag feed to your primary sidebar, drag the Instagram Feed widget to the sidebar and add the following shortcode, changing the hashtag, post, and column settings to whatever you like.

['instagram-feed hashtag="#landscapes" type=hashtag num="8" cols="2" showcaption=false]

And here’s how it looks live on the website:

Instagram Feed in blog sidebar using widget

This is a great way to display posts from customers using your branded hashtags, while still having a feed dedicated to all your content.

How to Display Multiple Instagram User Feeds

By now, you know how to display multiple feeds from a single Instagram user account, and those containing hashtags from the public.

But what if you have more than 1 Instagram account that you want to showcase on your website?

In the next section, we show you have to connect multiple Instagram accounts to your site using Instagram Feed Pro.

Connect Multiple Instagram Accounts

Smash Balloon recently added the option to add multiple Instagram accounts to WordPress, and it’s a game-changer for people with several profiles. Because now you can connect and display all of them in a single place so site visitors can find them.

Connecting multiple Instagram profiles is really straightforward. Just click the blue Connect an Instagram Account button and follow the steps we highlighted earlier.

Connect multiple Instagram accounts

Repeat the process for all your profiles to add as many as you like.

So how do you display differents feeds for different user accounts? Let’s find out.

Display Separate Instagram User Feeds

Adding more than one Instagram user feed to your website follows the same process as displaying multiple feeds. All you do is change up the shortcodes you use for each feed.

Let’s say you want to add 1 user feed below a specific blog post, and a different user feed in another blog post.

First, head to Posts » All and click Edit on the blog post you want to add the feed to.

Then add the Instagram Feed social media block using the instructions we shared earlier, and customize the block shortcode with the appropriate users.

Add Instagram user feed to blog post

Click Update, and the feed will be live in the blog post.

Now repeat the process for the next blog post, but change the shortcode of the social media block to include a different user as demonstrated below.

Display a different Instagram user feed

This is a great way to highlight Instagram posts from different authors on your website or even showcase different product-specific Instagram accounts.

There’s 1 more trick we want to show you for displaying multiple users, and that’s how to combine users into a single Instagram feed.

Combine Multiple Users in a Single Feed

Imagine this: You’re a tattoo studio with some super-talented tattoo artists, and you want to showcase their excellent work to potential customers. You’ve already got a feed for each artist page on your website, but you want to consolidate the work into a unified feed to show off on your home page.

How would you do it?

One way to achieve that is to use a customized shortcode that includes all your artists’ Instagram accounts but filtered to only include posts related to your business. That way, you can avoid filling the feed with personal posts unrelated to your brand.

Your shortcode might look something like this:

['instagram-feed user= "Sally, Sam, Bob" includewords=" #sbtattooshop"]

Here’s an example of the shortcode we use on our test site to display multiple users in a combined hashtag feed:

['instagram-feed user="landscapeswelove, scorrindemo" includewords="#mountains"]

And here’s how the feed looks live on the site:

Combined Multiple User Instagram Feed

That’s it!

You now know how to display multiple Instagram feeds and feeds with various user accounts on your website. Now you can engage website visitors with targeted content to boost your followers and, ultimately, grow your business.

If you enjoyed this article, you might like this guide on the best types of Instagram posts to increase sales.

And while you’re here, do feel free to follow us on Twitter and Facebook for more helpful tutorials.

Want to Try our Instagram plugin for Free?

Enter the URL of Your WordPress website to install Instagram Feed Lite.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Leave a Reply

Your email address will not be published. Required fields are marked *