How to Display a Horizontal Instagram Feed in WordPress

How to Display a Horizontal Instagram Feed in WordPress

Last updated on February 24th, 2021

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. Connect your Instagram account
  3. Select the horizontal feed layout
  4. Customize the design of your feed
  5. Style your feed’s posts
  6. Publish your feed in WordPress

Are you ready to integrate your Instagram feeds into your website with the help of embedded 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.

horizontal instagram feed wordpress example

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

Smash Balloon Instagram Feed Pro

Instagram Feed Pro from Smash Balloon is the highest-rated Instagram feed plugin for WordPress. Its rating of 4.9/5 stars from over 1,000,000 active users says a lot about the quality of this 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:

horizontal instagram feed wordpress plugin users

Below you’ll find the steps for embedding a live Instagram feed in 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 configure the plugin.

Step 2: Connect Your Instagram Account

The next step is to link your Instagram profile to your website.

Instagram Feed Pro makes this easy for you since you don’t need to manually create access tokens anymore. The plugin will connect to Instagram’s API so you can seamlessly display your horizontal Instagram feed on your website.

To easily connect your account, go to the Instagram Feed menu on the dashboard and then click the blue button labeled Connect an Instagram Account.

connect an instagram account

When linking your account, a popup will ask you if you want to connect a standard 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.

When you’ve finished following the on-screen instructions, your account dashboard displays the Successfully connected label.

After that, you can choose the type of Instagram feed to show on your site, including a standard user feed, hashtag feed, tagged feed, or a combination of multiple Instagram feed types.

Now go ahead and click the Save Changes button.

Step 3: Select the Horizontal Carousel Layout

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

For the next step, click the Customize tab at the top of your screen.

Instagram feed eneral settings

Under the General section, you can change your feed’s width, height, and background color.

After that is the Layout section, where you can choose a custom layout for your feed.

There are 4 different layout templates 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.

Instagram carousel feed 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:

  • Number of 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.
  • 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.
  • Interval Time: Allows you to specify the time between each photo cycle.

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

Choose the number of photos and columns to display in your feed

Here are some examples of how these settings look like when you embed your Instagram sideways on your website.

horizontal instagram feed with 2 rows and pagination

This example displays a horizontal Instagram feed with 2 rows and the show pagination box checked. Navigation arrows are unchecked.

horizontal instagram feed with 1 row and navigation arrows

For this example, we chose to display a single row, navigation arrows, and the number of photos set to 4.

horizontal instagram feed with navigation and 2 photos

The final example displays photos in a single row, with navigation arrows and the number of photos set to 2.

Step 4: Customize Your Feed’s Design

On the same page, under the Header section, you can expand several options for customizing the header area of your Instagram feed.

Customize your Instagram feed header area

Here you can change the following settings:

  • Header Style: Choose between a standard, boxed, or centered header.
  • Header Size: Display your header as small, medium, or large.
  • Show Number of Followers: Business accounts can choose to display how many followers their Instagram account has.
  • Show Bio Text: Your bio text is fetched automatically for business accounts and can be entered manually for private accounts.
  • Use Custom Avatar: Your profile picture will show up if you have a business account. If you want one for your private account, you can upload it here.
  • Header Text Color: Set the color of your header text.
  • Display Outside of Scrollable Area: This lets your header stay fixed at the top, even as you scroll down.
  • Include Stories: This option lets business accounts show Instagram stories directly on your WordPress website.
  • Slide Change Interval: Choose the number of milliseconds a story displays before showing the next one. Videos will always change once the video is finished.

Under the Header section, you can enable the Load More Button.

This lets visitors see more images than those displayed. When you click to view more options, you can change the buttons colors, text, and more.

Choose to display a load more button in your horizontal instagram feed

Finally, you’ll see the Follow Button section, where you can choose to show a button to encourage users to follow you on Instagram.

You can also tweak the colors and text of your button to suit your site’s branding.

Add a button for users to follow you on Instagram

Remember to click the blue Save Changes button at the bottom of the page once you’re happy with your settings.

Step 5: Style the Posts in Your Horizontal Instagram Feed

Now let’s look at how to change the look and feel of posts in your feed. You can do that by clicking the Posts tab at the top of your screen to access the styling settings.

The first section is all about your Instagram feed’s photos.

You can sort photos by newest to oldest, random, or by likes. Under that, you can choose whether to show Instagram videos or just photos or both.

It also allows you to create shoppable Instagram feeds by linking your post caption.

Instagram post embed settings

Below that, you can choose the hover style of photos in your feed. Here, you can change the hover and background colors, and select which information to display.

Instagram photo hover style

The Caption section lets you change your caption text, color, and size. Plus, you can choose to hide your photo caption if you like.

Choose a caption style for Instagram photos

Further down the page, you can also edit the lightbox people see when clicking the photos in your feed. You can show or hide the likes and comments icons, as well as comments.

lightbox comments settings

Again, remember to click Save Changes before you move on to publishing your Instagram feed.

Step 6: Publish Your Horizontal Instagram Feed in WordPress

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

The different methods include:

  1. Instagram Feed WordPress Block: Add your horizontal feed to posts or pages using the WordPress block editor.
  2. Shortcode: Embed your Instagram feed into posts or pages using the classic WordPress editor, or inside your WordPress theme with the shortcode.
  3. Instagram Feed WordPress Widget: Use the ready-made Instagram feed widget to display your feed in WordPress sidebar areas.

Don’t worry if this sounds overwhelming. We’ll show you how to use each method.

Instagram Feed WordPress Block

To add your Instagram feed as a block, create a new page in WordPress by navigating to Pages » Add New.

add new page

You can also use a WordPress post here if you want. To do that, go to Posts » Add New from your dashboard.

add new post

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

Then in the panel that appears, scroll to the Widgets section and click the Instagram Feed block to add it to your page.

Add the Instagram feed WordPress block

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

preview of horizontal instagram feed

Now when you preview your new page, you’ll see a stunning horizontal Instagram feed live on your website.

publsihed horizontal instagram feed in WordPress

Instagram Feed Shortcode

To embed your feed with a shortcode, first create a new post or page.

Then in the classic editor, paste the shortcode as shown below.

Instagram Hashtag Feed shortcode

Instagram Widget in WordPress

To display your Instagram feed in widget-ready areas of WordPress like your footer or primary sidebar, first head to Appearance » Widgets from your WordPress dashboard.

Next, find the Instagram Feed widget on the left, and drag it to your chosen sidebar area.

instagram feed sidebar

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

Horizontal instagram feed sidebar widget in WordPress

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.

What are you waiting for?

Get started with the pro version of Instagram Feeds by Smash Balloon here.

Or if you want to check it out first, you can see this article to know how you can get the free version of Instagram Feed Pro.

Free plugins have limited features to extend your website’s functionality, though.

For example, the free feature of Instagram Feed Pro doesn’t have the horizontal Instagram layout feature.

So if you’re interested in unlocking additional features for your Instagram marketing so you can take your business to the top, get the premium version of Instagram Feed Pro here.

Looking for a way to grow your Instagram presence? Our handy guide on how to increase Instagram subscribers.

And if you want to show your Facebook content in an engaging way, take a look at our guide to adding a horizontal Facebook feed.

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.

Want to Try our Instagram plugin for Free?

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

Comments

  1. Erika

    Horizontal on Insta…finally yay!

    Reply
  2. Michael Perkins

    Left a comment yesterday, no comments at all?

    Reply
  3. Mohd Khairi bin Wahab

    hi thanks for the great plugin, im using it and i like it

    Reply
  4. Michelle David

    I learned something new today thank you!

    Reply
  5. carl pucul

    Nice!

    Reply
  6. Lynn Pierce

    Really could us this.

    Reply
  7. Sarah Jane EHrhart

    I could certainly use all the help I can get! Great article!

    Reply
  8. Melinda Mattox

    These posts are always so helpful and this one is no exception. Thanks!

    Reply
  9. Starr McDaniel

    Fantastic presentation

    Reply
  10. RICHARD SKUSE

    GOOD TO KNOW

    Reply
  11. Lhossainourgaga

    Amazing

    Reply
  12. Patrick M

    I keep coming back for more!

    Reply
  13. Michelle David

    This will be very helpful as I start my new career in the coming months!

    Reply
  14. Joel Bousema

    Nice

    Reply
  15. Vitkai László

    Great!

    Reply

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 *