How to Embed Your Instagram Feed on WordPress

Showing your Instagram feed on your WordPress website offers an easy way for people to interact with you on both platforms. And the result is an increase in brand awareness and sales.

After all, cross-promoting your social networks on your website improves your audience reach and user engagement.

But figuring out how to display your Instagram feed on your site isn’t as easy.

With that in mind, today we’ll show you how to embed your Instagram feed on WordPress. By following this tutorial, you can grow both your audience and your business using the visual power of Instagram.

Since we’re covering various methods, here’s a table of contents to help you find the solution that’s best for you:

• Why embed your Instagram feed on WordPress?
• Embedding your Instagram feed with a plugin
• Embedding an Instagram hashtag feed on your website
• Embedding your Instagram feed without a plugin

Let’s get started!

Why Embed Instagram Feeds in WordPress?

Adding an Instagram feed to your website has lots of benefits. Not only does it give site visitors a chance to see your latest Instagram posts, but it also offers fresh content to consume right there on your site.

Here are a few ways you can use Instagram feeds on your website to engage your audience:

• You could show an Instagram feed of product reviews from customers to increase product sales.
• Adding a hashtag feed of relevant content to your site keeps visitors engaged, so they stay for longer.
• Displaying a feed of user-generated content serves as positive social proof for your brand, to drive more sales to your business.
• You can also improve your SEO when you embed social media feeds like Instagram on your website. Since the feeds are crawled and indexed by Google, they provide fresh and relevant content to boost your site’s rankings.

As you can see, embedding an Instagram feed in WordPress can achieve much more than merely showing your latest photos. Once you learn how to do this, it’s the best way to boost visitor engagement and significantly grow your business.

But how do you add different Instagram feeds to WordPress? Let’s find out!

Embedding Instagram Feeds With a Plugin

The easiest way to embed an Instagram feed to WordPress is to use a WordPress plugin. This way, the plugin can just connect with Instagram’s API to help you easily display Instagram feeds on your website — even if you’re not tech-savvy.

By using a trusted WordPress plugin, you can showcase your feeds in all their glory, without having to worry about tackling HTML, CSS, JavaScript or other coding languages.

For this method, we’ll show you how to add an Instagram feed to your site using the Instagram Feed Pro plugin from Smash Balloon.

As the highest-rated Instagram feed plugin for WordPress, it lets you display completely customizable Instagram feeds on your site in under 5 minutes!

And with zero technical knowledge needed to get up and running, your feeds look great right out of the box, so they can look consistent with your brand’s design, with minimal effort on your part.

The best part? Since the plugin’s built with users in mind, it’s designed to be ultra fast. That’s why Instagram Feed Pro is trusted and happily recommended by over 1 million users worldwide!

Let’s talk about the step-by-step instructions on how to display an Instagram feed to your website — the easiest and best way, with a plugin:

Step 1: Install and Activate Instagram Feed Pro

To start using this plugin, get your copy of Instagram Feed Pro here and download it to your computer.

Then upload it to your WordPress website. If you’re not familiar with how to do that, you can follow the instructions for how to install a WordPress plugin here. Once that’s done, you can move on to the next step.

Step 2: Connect Your Instagram Account

The next step is to connect your Instagram account. To do that, head to Instagram Feed » Settings from the WordPress admin area.

Then click the big blue Connect an Instagram Account button to connect your account.

A popup will appear and ask you to connect a personal or Instagram business account. Personal accounts let you display feeds from your own Instagram account only. So choose that option if you only want to show photos from your account.

On the other hand, the Business Account option lets you show filtered feeds using hashtags, comments, photo tags, and much more. So if you want to customize your Instagram feed and display a broad range of content, choose this option.

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

Next, confirm the account you’d like to connect and click Connect Accounts.

If you’d like, there’s a way to manually connect your Instagram account by entering the Access Token linked to your account. Just paste the Access Token and User ID and click Connect This Account.

When you scroll down the same page, you’ll see default feed options next to the Show Photos From heading.

That section includes the following options:

• User Account: Display a feed of your latest Instagram posts.
• Hashtag: Display an Instagram hashtag feed using your chosen hashtags.
• Tagged: Show a feed of photos you’re tagged in by other Instagram users.
• Mixed: Display a single feed containing multiple feed types.

To display a simple Instagram feed of your account photos, choose the User Account option, and click Save Changes.

Step 3: Customize Your Instagram Feed Settings

For this step, we look at customizing your Instagram feeds. So from the main Settings page, click the Customize tab to reveal the options.

First, you’ll see the general customization settings where you can change your feed’s width, height, and set a custom background color.

Below are the layout options for your feed. If you’d like to control how your feeds will look like on your website, feel free to change this.

Let’s look at each layout option in more detail.

Grid Layout Option

The Grid layout lets you display your Instagram feed as a grid of square-cropped images. This offers a clean, uniform look with all your photos cropped to the same size.

Carousel Layout Option

The Carousel layout displays a horizontal Instagram feed in WordPress that users can scroll through at their leisure. This is an ideal option for footer widget areas or to illustrate blog posts by embedding feeds at the top or bottom of your posts.

Want to add a carousel Instagram feed to your site? Check out this post on how to embed an Instagram carousel feed on your WordPress website for more details.

Masonry Layout Option

The Masonry layout shows images in their original aspect ratios with no vertical space between Instagram posts. This is useful for people wishing to display an Instagram gallery in WordPress to showcase their work without cropping important features from their images.

Highlight Layout Option

The Highlight layout displays square-cropped images in a beautiful gallery. With this setting, no captions, likes, or comments are shown below each image, giving users a full visual experience. Plus, highlighted posts are displayed twice as large as other images in the gallery to make them stand out.

You can set which posts to highlight from the drop-down menu under the Highlighting Type heading. That lets you highlight based on pattern, post ID, and hashtag.

Under the layout settings, you can set the number of photos and columns in your feed. And you can also change the padding around your images.

Then, on the last section of the page, you can choose whether to show your feed header, the load more button, and the follow button. Clicking each of the sections expands the customization options for each feature.

Along the top of the customization page, you’ll see other options for controlling your post settings, moderation settings, and more advanced options.

Click each tab to set up those settings and remember to click Save Changes before you move on to displaying your feed in the next step.

Step 4: Display Your Instagram Feed

Embedding your Instagram feed in WordPress is pretty straight-forward. Smash Balloon works seamlessly with the new WordPress block editor, so you can add your feeds to any post or page with a few clicks. Plus, you’ll get a preview of your feed to make sure it looks great before you publish.

Adding Your Instagram Feed to a WordPress Page

First, let’s look at how to display your Instagram feed in a new WordPress page.

To begin, navigate to Pages » Add New to create a new page.

Then once you’ve given your page a title and added your content, click the Plus (+) icon to add a new WordPress content block.

Within the block search box, type “Instagram” to bring up the Instagram Feed block and click it to add your feed to the page.

Your feed will then appear in your page editor like this:

When you’re happy with your page, click the Publish button to make it live on your WordPress website. Then when you navigate to that page, you’ll see your interactive Instagram feed ready for your visitors to browse.

Want to know another way on how to embed Instagram feed on WordPress? Instagram Feed Pro also comes with a built-in Instagram widget you can use to add an Instagram photo feed widget to your site.

Let’s look at how to do that next.

Displaying Your Feed With an Instagram Widget in WordPress

To add your Instagram feed to a widget ready area of WordPress, such as your footer sidebar, navigate to Appearance » Widgets from the WordPress admin area.

Then drag the Instagram Feed widget from the left-hand panel to your chosen sidebar. For this example, we’re adding the widget to the footer widget area.

The plugin automatically adds the shortcode for you. So, just click Save to finalize. And when you navigate to the front of your website, you’ll see your feed in your sidebar.

Here’s an example of what our Instagram Feed widget looks like in our site’s footer using the Carousel layout.

Want the full tutorial on how to display your Instagram feed on your site’s sidebar? Check out this helpful tutorial on how to add an Instagram widget to your WordPress website today.

Embedding Instagram Hashtag Feeds

So far, we’ve discussed adding a standard feed to WordPress to highlight your Instagram posts. But as we touched upon earlier, Instagram Feed Pro can do a whole lot more, including allowing you to embed Instagram hashtag feeds on your website.

Let’s learn how to do that next.

Step 1: Choose Hashtag Feed Type

To embed an Instagram hashtag feed on your website, instead of selecting the User Account option for displaying photos, you’ll need to click the Hashtag option.

Then enter the hashtags you’d like to display in your feed. You can showcase multiple hashtags by separating each one with a comma.

It’s also easy to set the order of posts in your feed by choosing between Top (most popular posts first), and Recent (within 24 hours).

Then go ahead and click the Save Changes button.

Step 2: Set Feed Moderation Options

Since hashtag feeds tend to include posts from the public, there may be times where you want to hide individual posts from your feed. This could be due to the content being inappropriate, offensive, or irrelevant to your site audience.

Instagram Feed Pro includes powerful moderation options that help you to exclude specific posts from your feed easily.

To set up the moderation settings, head to the Customize tab, and click the Moderation sub-tab.

Here, you can filter, remove, or show photos containing specific hashtags. To do that, enter the hashtags you’d like to filter and click Save Changes.

Or, you can use the visual moderation system to filter posts on your live website. You can access those settings by scrolling down the page and clicking Visual next to the Moderation Type heading.

Then click Save Changes when you’re done.

Now when you navigate to your live Instagram hashtag feed, you’ll see an orange moderation button. This button is only visible to logged-in users with Admin privileges.

Clicking that button lets you choose the posts you’d like to remove from your feed. Images you’ve moderated will have a red cross icon in the top right corner, but won’t show up on your live website.

Now all that’s left is to display your hashtag feed using the instructions we mentioned earlier. But if you want to display multiple Instagram feeds on your website, take a look at this tutorial.

Embed Feeds on WordPress Without a Plugin

Embedding your Instagram feed to WordPress without a plugin is possible if you know enough about JavaScript. But for beginners, it’s pretty tricky and relies on customizing a bunch of code.

Instead, we’d suggest using a WordPress plugin to make the process much easier and to ensure you don’t accidentally break your website.

That said, you can embed Instagram content in WordPress without a plugin, which we’ll show you how to do next using the WordPress block editor.

First, head to your Instagram profile and find the post you’d like to embed in WordPress.

In the top right corner of the post, you’ll see 3 dots that look like this ⠇, which indicates more options for you to choose from. Click the dots and select copy link from the menu that appears.

Next, create a new post or page in WordPress and paste the link directly into the block editor. WordPress will automatically embed the Instagram post into the editor, so you can preview how it looks before publishing.

Then go ahead and publish your content to see the post live on your WordPress website.

Further Reading: How to Add Social Media Feeds to WordPress

There you have it!

In this article, you’ve learned how to embed your Instagram feed on WordPress. So now, you can engage your visitors with highly relevant content, increase your Instagram followers, and, ultimately, improve your business.

Get started with Smash Balloon’s Instagram Feed Pro now!

And if you enjoyed this article, feel free to follow us on Twitter and Facebook for more social media marketing tutorials.