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 social media 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:
- Install the Instagram Feed plugin
- Connect your Instagram account
- Select the horizontal feed layout
- Customize the design of your feed
- Style your feed’s posts
- Publish your feed in WordPress
Are you ready to integrate social media 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 several Instagram photos in one place, while giving your users the control to scroll through your content at their own pace.
A horizontal Instagram feed can be used for several different purposes:
- You can use horizontal feeds to showcase 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 in Instagram.
We’ll explore this more in a bit.
Now that you know why adding 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. Whereas 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 plugin to get the design and layout we need.
Instagram Feed from Smash Balloon is the highest rated Instagram feed plugin for WordPress. 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.
Below you’ll find the steps for displaying horizontal Instagram feeds in WordPress using the Instagram feed WordPress plugin.
1. Install the Instagram Feed Plugin by Smash Balloon
Click here to get started with Instagram Feeds 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.
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, click the blue button labeled Connect an Instagram Account.
When linking your account, you’ll be asked 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 eCommerce 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.
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.
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 layouts to choose from such as grid layout, carousel, masonry and highlight layout. 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.
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 the carousel 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.
Here are some examples of how these settings translate to how your feed displays on your site.
This example displays a horizontal Instagram feed with 2 rows and the show pagination box checked. Navigation arrows are unchecked.
For this example, we chose to display a single row, navigation arrows, and the number of photos set to 4.
The final example displays photos in a single row, with navigation arrows and the number of photos set to 2.
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.
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: By that same logic, 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: If your feed’s dimensions are such that a vertical scroll occurs, it’s a good idea to tick this option. As you scroll down, the header will stay fixed at the top.
- 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 choose to 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.
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.
Remember to click the blue Save Changes button at the bottom of the page once you’re happy with your settings.
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.
The first section is all about your feed’s Photos. You can sort photos by newest to oldest, random, or by likes. It’s also possible to show only photos or videos and create shoppable Instagram feeds by linking your post caption.
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.
The Caption section lets you change your caption text; it’s color and size. Plus, you can choose to hide your photo caption if you prefer.
Further down the page, you can show or hide the likes, and comments icons, as well as comments in the lightbox people see when clicking photos in your feed.
Again, remember to click Save Changes before you move on to publishing your Instagram feed.
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:
- Instagram Feed WordPress Block: Add your horizontal feed to posts or pages using the WordPress block editor.
- Instagram Feed Shortcode: Embed your Instagram feed into posts or pages using the classic WordPress editor, or inside your WordPress theme with the shortcode.
- Instagram Feed WordPress Widget: Use the ready-made 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
Create a new page in WordPress by navigating to Pages » Add New.
Inside 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.
WordPress will generate a preview of your feed so you can make any changes before you publish.
Now when you preview your new page, you’ll see a stunning horizontal Instagram feed live on your website.
Instagram Feed Shortcode
To embed your feed with a shortcode, create a new post or page. Then in the classic editor, paste the shortcode as shown below.
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 WordPress widget, and drag it to your chosen sidebar area. Remember to click the Save button on the widget.
Now when you navigate to the front of your website, you’ll see your Instagram feed displayed horizontally in your sidebar.
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 Instagram Feeds by Smash Balloon here.