Adding your Instagram feed to your 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 add your Instagram feed to your WordPress website isn’t as easy.
So today we’ll show you how to embed your Instagram feed on WordPress. By following this tutorial, you can grow your audience and increase sales for your business using the visual power of Instagram.
Since we’re covering different 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?
- How to Embed your Instagram feed with a plugin
- How to Embed an Instagram hashtag feed on WordPress
- How to Embed your Instagram feed without a plugin
Or, you can click here to skip ahead to the tutorial.
Ready? Let’s get started!
Why Embed Instagram Feeds in WordPress?
Adding an Instagram feed to your WordPress website has lots of benefits. Not only does it give website 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.
- Add an Instagram hashtag feed of relevant content to your site to keep visitors engaged and let them stay for longer.
- Display an Instagram feed of user-generated content to serve as positive social proof for your brand so you can drive more sales to your business.
- Have video testimonials for your business? Embedding Instagram TV video testimonials on your WordPress can encourage your site visitors to buy from you.
- You can also improve your SEO when you embed Instagram feed on your website. Since the feeds are crawled and indexed by Google, they provide fresh and relevant content to boost your website’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 grow your business.
But how do you add different Instagram feeds to WordPress? Let’s find out!
How to Embed 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 10 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!
In fact, Smash Balloon plugins are used by the most popular brands all over the world:
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 live Instagram feed of your latest 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.
How to Embed an Instagram Hashtag Feed
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. Want more details on how to do this? Check out this post on how to embed an Instagram hashtag feed to your WordPress for your guidance.
And if you want to display multiple Instagram feeds on your website, take a look at this tutorial.
How to Embed Instagram Feed 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!
Want unlimited access to Smash Balloon plugins so you can use them on unlimited websites? Go ahead and get the Social Wall Pro bundle here.
It’s the best social media aggregator that lets you easily embed feeds from different social networks like Instagram, Facebook, Twitter and YouTube on your website.
The great part about Smash Balloon’s pricing method? It comes with a 100% no-risk money-back guarantee so you can try out the plugins first and see if it’s a good fit for you.
You may want to check out this next article on the best Instagram feed examples you can embed on your website.
And if you enjoyed this article, feel free to follow us on Twitter and Facebook for more social media marketing tutorials.
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.