How to Display a Horizontal Instagram Feed in WordPress (2022)
Home Blog How to Display a Horizontal Instagram Feed in WordPress (2022)

How to Display a Horizontal Instagram Feed in WordPress (2022)

How to Display a Horizontal Instagram Feed in WordPress

Do you want to display a horizontal Instagram feed in WordPress?

A sleek horizontal feed enhances your site’s design and entices visitors to stay in touch so they can become your Instagram followers and fans!

This article shows you how to display a horizontal Instagram feed in WordPress in a few simple steps.

Here’s a table of contents to help you navigate:

  1. Install the Instagram Feed plugin
  2. Create your Instagram feed
  3. Connect your Instagram account
  4. Select the horizontal feed layout
  5. Customize the design of your feed
  6. Publish your feed in WordPress

Are you ready to grow your business using horizontal Instagram feeds? Let’s dive in.

Why Add a Horizontal Instagram Feed in WordPress?

A horizontal Instagram feed is more than just an aesthetic element on your site. Used in the right way, it’s a great tactical tool to increase sales and grow your business.

It’s also a neat way to show Instagram photos in one place while giving your users the control to scroll through your content at their own pace.

carousel layout for your instagram feed

You can use a horizontal Instagram feed in lots of different ways:

  • Horizontal feeds can help you show Instagram photos filtered by different hashtags. For example, brand photos on your About page, or blog post photos with hashtags relevant to the topic. This is a more personal option than standard stock photos.
  • Using the right plugin, you can also add your horizontal Instagram feed to your WordPress to boost your website’s SEO.
  • Since horizontal feeds resemble carousels used on e-commerce sites, you can use them to create a shopping experience on Instagram.
  • Plus, Instagram feeds powered by user-generated content have social proof as well. So you can use them to convince your site visitors to buy from you.

Now that you know why embedding horizontal Instagram feeds to your site is smart, let’s look into the nitty-gritty of how to embed one in WordPress!

How to Display a Horizontal Instagram Feed in WordPress

The easiest way to display horizontal Instagram feeds in WordPress is to use a WordPress plugin. That’s because Instagram doesn’t offer an easy option for achieving a horizontal effect using its default embed method.

When you embed Instagram posts in WordPress manually, you can only insert a single post. But with a plugin, you can embed a whole feed of posts with multiple layout options, including horizontal carousel feeds.

So for this tutorial, we’ll be using Smash Balloon’s Instagram Feed Pro plugin to get the design and layout we need.

best instagram feed pro plugin

Instagram Feed Pro from Smash Balloon is the highest-rated Instagram feed plugin for WordPress. It’s rating of 4.9/5 stars from over 1,000,000 active users says a lot about the quality of this plugin.

reviews instagram feed pro plugin

With its easy-to-use interface, it takes only a few clicks to get your Instagram content looking the way you want, with no coding required.

Even better, you can completely customize the design of your feed and filer content to display hashtag feeds, photo feeds, shoppable feeds, Instagram TV videos, and more.

The best part? Once you connect your account to the plugin, it automatically communicates with Instagram API so it can help you easily display your horizontal Instagram feed — even if you’re not tech-savvy.

Instagram Feed Pro is newbie-friendly, fast, and reliable — that’s why it’s trusted by some of the world’s largest brands:

smash balloon brands

Below you’ll find the steps for embedding a live Instagram feed in a horizontal layout in WordPress using the Instagram feed plugin.

Step 1: Install the Instagram Feed Plugin by Smash Balloon

To show your Instagram sideways, you can first get started with Instagram Feeds Pro by Smash Balloon and download the plugin to your computer.

Once you’ve done that, upload the plugin and install it on your WordPress website. If you need a little help with that, here’s a handy guide for installing a WordPress plugin.

Now, it’s time to go ahead and create your Instagram feed.

Step 2: Create Your Instagram Feed

The next step is to create an Instagram feed using the plugin.

To easily do that, go to the Instagram Feed menu on the dashboard and then click on Add New.

create new feed instagram feed pro

Next, you can choose which type of Instagram feed you want on your website. As you can see, there are 3 options to pick from:

  • User Timeline: Show your own posts in the horizontal Instagram feed
  • Public HashtagDisplay Instagram posts that have public hashtags of your choice
  • Tagged Posts: Use your feed to show posts that have tagged your Instagram account

What’s more, you can select more than 1 option here to combine different Instagram feed types into a single feed.

After you go ahead and pick the type of Instagram feed, click on Next.

select your feed type instagram feed pro

With that, you have a new Instagram feed on your website. In the next step, you can connect it to Instagram so it can show photos and videos.

Step 3: Connect Your Instagram Account

In the next step, you can connect your new feed to your Instagram account in a few clicks.

To get started, first, click on the Add Source button.

instagram add source for feed

After that, the plugin will ask you if you want to connect a personal account or a business account.

Some of the feed types included in the plugin require a business account, such as feeds filtered by specific hashtags, showing Instagram stories, and creating “shopping feeds” linking to your online store.

You can check out this article if you need help learning how to convert your Instagram account to a business profile.

To continue, just choose the Instagram account type and then click on Login with Instagram.

select instagram account type popup

For this tutorial, we’ll go with a personal account.

After that, the plugin will open Instagram so you can give read-only access to Instagram Feed Pro.

With that access, the plugin will view Instagram info so that it can show photos and videos on your Instagram feed.

On the other hand, it can’t actually make any changes so it’s completely safe to use.

Just click on the Allow button on the popup to continue.

allow access to instagram

After you give the read-only access, the plugin will bring you back to your WordPress site so you can finish connecting your account.

You can just click on the Next button to do that.

confirm account as source for instagram feed

Now go ahead and move on to step 4 and enable the horizontal carousel layout for your new Instagram feed.

Step 4: Select the Horizontal Carousel Layout

Interested in designing your horizontal Instagram feed? Great! Instagram Feed Pro has a live feed editor with lots of customization options that you can choose from.

On the left panel, you have the option to change your feed layout, color scheme, header design, post style, background, and much more.

To help you track your changes, you can see a real-time preview of your Instagram feed on the right.

live feed editor instagram feed

For the next step, click on the Feed Layout option at the left of your screen.

edit layout for instagram carousel

Here, you can find the layout options for your Instagram feed with 4 options to choose from: grid, carousel, masonry, and highlight.

Each of these layouts creates a different visual effect.

And since you want to display a horizontal Instagram feed in WordPress, let’s choose the Carousel option.

enable the carousel layout

This option shows your feed in a slideshow carousel that scrolls horizontally through your posts.

Upon clicking the carousel layout, you’ll see several settings you can use to tweak your design.

Let’s look at the display settings in a little more detail:

  • Rows: Choose between 1 or 2 rows for your horizontal feed.
  • Loop Type: Select either Rewind or Infinite. Infinite lets visitors cycle through all the photos in your feed. Whereas Rewind cycles through a set number of photos.
  • Interval Time: Allows you to specify the time between each photo cycle.
  • Show Navigation Arrows: Lets you add arrows to move back and forth through your feed.
  • Show Pagination: Includes dot icons under the slideshow indicating how many photos are in your feed.
  • Enable Autoplay: Lets your Instagram posts run automatically.
carousel settings instagram feed pro

Under those options, you can choose the number of columns and Instagram images in your feed and set the padding in pixels.

Here’s an example of how these settings look when you embed your Instagram sideways on your website.

We’ve selected 1 row and enabled pagination and navigation arrows for our feed.

carousel layout preview instagram feed pro

Once you’ve selected your feed layout options, click on the Save button.

Just like that, you can enable the horizontal carousel layout for your Instagram feed with ease.

Step 5: Customize Your Feed’s Design

To go ahead the customize the rest of your horizontal Instagram feed, click on the Customize button at the top.

return to main customization options

From here, you can click on the Color Scheme option to set the colors for your feed.

click on color scheme option

When it comes to color options, Instagram Feed Pro comes with 4 different color schemes that you can choose from:

  • Inherit from Theme: If you want to use the same colors as your website’s theme
  • Light: To show a light background for your feed along with dark font color
  • Dark: Lets you show a dark background instead, and a lighter colored font.
  • Custom: Allows you to manually pick all the colors of your feed
color scheme options instagram feed pro

Once you pick your color scheme, click on Save to confirm your changes.

And just like that, you can edit your post design, header layout, button style, feed size, and much more with this live feed editor — no coding needed.

Remember to click on the Save button at the top of the page once you’re happy with your settings.

Then, it’s time to embed your horizontal Instagram feed on your website.

Step 6: Publish Your Horizontal Instagram Feed in WordPress

The Instagram Feed Pro plugin offers several ways to display your horizontal Instagram feed in WordPress.

The different methods include:

  • Add your horizontal feed to a WordPress page
  • Use an Instagram feed widget to display your feed in the WordPress sidebar or footer.

We’ll show you how to use each method below:

Add Horizontal Instagram Feed to a WordPress Page

To add your Instagram feed to a page, first, click on the Embed button at the top.

embed instagram feed

This will open a popup where you can set the location for your horizontal Instagram feed.

To continue, click on the Add to a Page option on the popup.

add instagram feed to page instagram feed proadd instagram feed to page instagram feed pro

After that, the popup will show you a list of WordPress pages so you can choose a page from the options.

Then, click on the Add button to go ahead and embed your feed on that page.

add instagram feed to a wordpress page

This will open that page in the WordPress editor so you can embed your horizontal Instagram feed.

For that, click the plus (+) icon to add a new WordPress content block.

add new wordpress block

Write “Instagram” in the search bar and then, click the Instagram Feed block to add it to your page.

embed instagram feed page

WordPress will generate a preview of your feed so you can make any changes before you click on Publish.

Now your visitors can see a stunning horizontal Instagram feed live on your website.

example instagram carousel slider

As you can see, you can embed your horizontal Instagram feed in a few clicks with absolutely no coding needed.

Let’s see how you can add your feed to your website’s sidebar or footer areas.

Add Horizontal Instagram Feed to a WordPress Sidebar or Footer

To get started, head to Instagram Feed » All Feeds from your WordPress dashboard.

Next, click on the horizontal Instagram feed that you created earlier.

select your instagram feed

This will open that feed in the live feed editor once again. To continue, click on the Embed button at the top once again.

embed instagram feed

From that popup, click on the Add to a Widget button to start embedding your Instagram feed on your sidebar or footer.

add instagram feed to widget instagram feed proadd instagram feed to widget instagram feed pro

This will open the Widgets page of your website where you can add, remove, or manage your widget.

Want to add your Instagram feed on the sidebar? Click on the Sidebar panel here.

open sidebar panel to embed social media widget

Instead, you can click on the Footer panel and embed your horizontal Instagram feed on your WordPress footer.

We’ll pick a footer for this tutorial.

open footer panel to embed social media widget

Add a new widget by clicking on the plus (+) icon and then select the Instagram Feed widget from the options here.

add instagram widget to your sidebar

Finally, click on the Update button to confirm this new WordPress widget.

Now when you navigate to the front of your website, you’ll see your Instagram feed displayed horizontally in your sidebar.

instagram carousel in the footer

There you have it!

We hope this article helped you learn how to display a horizontal Instagram feed in WordPress.

Now, all you need is to embed one on your site to engage your audience and transform them into loyal fans and potential customers.

Want to show a horizontal Instagram feed on your site? Get started with Instagram Feeds by Smash Balloon here.

If you want to grow your Instagram presence, check out this guide on how to increase Instagram subscribers.

And remember to follow us on Facebook and Twitter to get the latest articles on how to successfully market your business on your social networks.

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.