Showing your Instagram feed on your website offers an easy way for people to interact with you on both platforms. And the result is an increase in exposure and conversions. 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 so you can both grow 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 a variety 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.
To explain what we mean, 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 content from your authors helps visitors find relevant content from those authors on your website.
- You could even display a filtered Instagram feed of your team’s best work, to encourage visitors to give your business a try.
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 implement them, they’re the ideal 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. Then with a few clicks, you can showcase your feeds in all their glory, without having to worry about tackling complex code.
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 a matter of minutes. And with zero technical knowledge needed to get up and running, your feeds look great right out of the box.
Step 1: Install and Activate Instagram Feed Pro
To begin 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.
An overlay appears asking you to connect a personal or 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 prefer, 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: Click this option to display a feed of your latest Instagram posts.
- Hashtag: Selecting this setting lets you display an Instagram hashtag feed using your chosen hashtags.
- Tagged: Choose this option to show a feed of photos you’re tagged in by other Instagram users.
- Mixed: With this setting, you can 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. This determines how your feeds will look live on your website.
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.
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 it’s also possible to 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 a range of options for controlling your post settings, moderation settings, and more advanced options.
Click each tab to configure 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 ensure it’s looking 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 as we demonstrate below:
When you’re happy with your page, click the Publish button to make it live on your website. Then when you navigate to that page, you’ll see your interactive Instagram feed ready for your visitors to browse.
But that’s not the only way you can show off your Instagram feeds using this plugin. 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.
After that, click Save. 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.
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: Configure Hashtag Feed Settings
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.
Alternatively, 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 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 now!
And if you enjoyed this article, feel free to follow us on Twitter and Facebook for more social media marketing tutorials.