How to embed instagram feed on wordpress

How to Embed Your Instagram Feed on WordPress

Last updated on February 23rd, 2021

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:

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!

how to embed instagram feed on wordpress using plugin reviews

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

embed instagram feed on wordpress with 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.

connect instagram account to embed instagram feed on wordpress

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.

Connect a personal or business Instagram profile

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.

connect instagram account to embed feed on wordpress

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.

manually connect account to embed instagram feed on wordpress

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

types of instagram feed to embed on wordpress

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.

Customize instagram feed embedded on wordpress

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.

choose instagram feed layout on wordpress

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

Grid Layout Option

Instagram feed grid layout on website

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

Instagram feed carousel layout on website

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

Instagram feed masonry layout on wordpress

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

Instagram feed highlight layout embedded on wordpress

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.

instagram feed pro settings

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.

customize instagram feed on wordpress

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.

display instagram feed on wordpress

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:

embedded instagram feed on wordpress example

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.

how to embed instagram feed on wordpress sidebar

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.

embedded instagram feed on wordpress footer

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.

filter instagram posts on wordpress

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.

filter embedded instagram feed on website

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.

moderate feed button on instagram feed on website

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.

Instagram visual moderation options

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.

embed instagram post on 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.

copy instagram link

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.

embed instagram feed on website

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.

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 *