Do you want to embed an Instagram widget to your WordPress?
When you embed Instagram feeds to WordPress, you make it easier to turn your website visitors into Instagram followers.
Using engaging content from Instagram, you can even improve the experience of your site and boost your social media marketing.
In this article, we’re giving you a step-by-step guide on how to embed an Instagram widget on your WordPress site so you can convert visitors into loyal fans and followers.
To show you how you can embed your Instagram feed widget, we’ll take you through these steps:
- Step 1: Install the Instagram Feed Plugin
- Step 2: Create Your Instagram Feed
- Step 3: Connect Your Instagram Account
- Step 4: Customize Your Instagram Feed
- Step 5: Embed Instagram Widget on Your WordPress Site
Let’s start by talking about why you need to embed an Instagram widget to WordPress.
Or, you can click here to skip ahead to the tutorial.
Why Add an Instagram Widget to WordPress?
As one of the biggest social media platforms in the world, Instagram is a great place if you want to reach tons of people.
For your business, that means more customers and sales.
And to help you make the most of Instagram, you can just embed Instagram feeds on your website. That way, your website visitors can check out your Instagram content, and you get more likes, comments, and followers.
At the same time, you can also make your website more engaging when you show relevant Instagram posts.
In fact, embedding Instagram in WordPress can help you in tons of more ways:
- Building trust: Your social photo feed makes your site looks fresh and up to date. So, your customers can see that your business is active and thriving.
- Better engagement: It’s a great way to increase social engagement and get new followers so you can promote your business on Instagram better.
- Consistent branding: Your Instagram photos can act as a branding element reinforcing your company’s image — and if you display user-generated Instagram images on your website, it’s a great way to use social proof to boost brand awareness.
- More sales: If you display shoppable Instagram posts on your eCommerce website, you make it easier for your site visitors to discover your products and buy from you.
- Better SEO: When visitors enjoy your images, they’ll spend more time on your site, especially if they click on the “load more” button on your Instagram feed. As a result, you can get much better SEO and reach tons of people.
As you can see, there are many ways to give your business a boost when you display posts from Instagram on your site.
Easiest Way to Add an Instagram Widget to WordPress
In the past, you could add Instagram links to WordPress and the oEmbed feature would automatically embed it. Sadly, the feature has been discontinued so it’s much harder to manually embed Instagram content.
The good news? You can easily add an Instagram widget to WordPress with the help of a WordPress Instagram plugin.
The best WordPress plugins enhance the functionality of your website and let you add new features even if you’re a beginner.
A plugin that comes in handy and makes the task (and your life) easier is the Instagram Feed Pro plugin. It’s 100% compatible with WordPress, Divi, Elementor and other page builders.
Smash Balloon’s Instagram Feed Pro is the best Instagram widget plugin for WordPress.
With it, you can easily create, customize, and embed Instagram WordPress widgets and embed them on your website — in just a few clicks!
What’s more, you can filter your feeds in the widget settings to show Instagram hashtag feeds and content from multiple Instagram accounts.
Plus, since the plugin’s designed with its users in mind, it’s built to be ultra-fast. And with an average rating of 4.9/5 stars, its premium version is happily recommended by over 1 million users all over the world.
With a few clicks, you can use the plugin to access its powerful Instagram features:
- Customizable layout: Choose between a classical grid layout mimicking the look of Instagram, Instagram slideshow widget, or highlight specific photos
- Responsive design: Your feeds are mobile-friendly and responsive, so they look great on both desktop and mobile
- Follow buttons: Make it easy for Instagram users to follow you with a simple click
- Instagram shopping: Using the plugin, you can add shoppable Instagram posts and display its feed as an Instagram widget on your WordPress website’s sidebar
- Social engagement: Display Instagram stories and Instagram photo thumbnails right on your website in a pop-up lightbox
- Reduced load time: Thanks to reliable data caching, you don’t have to worry about the plugin slowing down your website. With a faster website, you get better SEO as well
- Multi-display: Add multiple Instagram feeds to different areas of your site showing specific types of Instagram posts
Smash Balloon, the best social media feed plugin to display different feeds from your social networks, is also trusted by the largest brands all over the world, so you’re in great company.
With these in mind, let’s move on to the actual process of how to embed Instagram WordPress widgets on your website.
How to Add an Instagram Widget to WordPress
Ready to add an Instagram widget to your WordPress site? Dive in by following the steps below.
Step 1: Install the Instagram Feed Plugin
To begin, click here to get started with Instagram Feed Pro. Then download the plugin to your computer.
After that, you need to upload it to your WordPress website and activate it. If you need a refresher on how to install a WordPress plugin, check out this step-by-step guide.
Step 2: Create Your Instagram Feed
After you install and activate the plugin, it’s time to create your Instagram feed widget in this step.
First, navigate to the Instagram Feed » All Feeds menu from your WordPress dashboard and click on the Add New button.
You can then choose the type of Instagram feed that you want for your widget. The plugin’s pro version gives you 3 different options to choose from:
- User Timeline: Display your latest Instagram posts from your own account
- Public Hashtag: Show Instagram posts that have your chosen hashtags
- Tagged Posts: Embed Instagram posts that have tagged your account
On top of that, you can also select multiple options at the same time. So, you can combine different feed types into a single feed.
To proceed, just pick your Instagram feed type and then click on Next.
For our tutorial, we’ll pick the user timeline feed type here.
With that, you now have a new Instagram feed on your website.
You can now go to step 3 and connect your newly created feed to Instagram.
Step 3: Connect Your Instagram Account
In this step, we’ll show you how to link an Instagram account to WordPress.
Using your Instagram account as a source, your feed can then show Instagram posts on your website.
Click on the Add Source button on this page.
The plugin will then ask if you want to connect your personal or business Instagram profile.
Using a personal profile, you can only show your own Instagram posts in your feed.
For the other types of feeds, such as hashtag feeds, Instagram video feeds, mentions feeds, and more, you need a business profile.
Don’t have a business account yet? Just take a look at our handy guide that shows you how to change a personal Instagram account into a business profile.
In the Select Account Type option, pick the type of Instagram account that you want to connect to. Then, click on the Login with Instagram button.
You can now give the Instagram Feed Pro plugin a read-only access to your Instagram account. The plugin will use that access to view Instagram info, but it can’t actually make any changes.
That way, Instagram Feed Pro is completely safe to use.
To give the plugin read-only access, click on the Allow button here.
After that, the plugin will send you back to your WordPress site. To finish connecting your Instagram account, click on Next.
As you can see, it’s super easy to connect your feed to Instagram API automatically. Now you can start customizing the design of your feed in step 4.
Step 4: Customize Your Instagram Feed
The plugin will now open your Instagram feed in the live feed editor. On the left panel here, you can find your customization options.
You can change your feed layout template, color scheme, header design, post layout, and more using these options.
Towards the right, you can find a live preview where you can see any changes to your Instagram feed in real-time.
Now select the Feed Layout option from the left section to start the customization.
For your new Instagram feed, you can choose from 4 different layouts: Grid, Carousel, Masonry, and Highlight.
Want to show your Instagram posts in a clean way? Just select the grid layout which crops your Instagram thumbnails into neat squares and shows them in rows and columns.
If you want to show lots of Instagram posts without taking much space on your page, go for the carousel layout.
This option will display photos and videos in a beautiful Instagram carousel.
To show your Instagram content in different columns, you can pick the masonry layout instead. This layout will also keep the original proportions of your Instagram posts.
Finally, there’s the highlight layout that removes the captions and likes to put the focus on your Instagram posts. You can also increase the size of specific posts here to make them clearly visible.
To save your Instagram feed layout, click on the Save button at the top.
Now you can go ahead and customize the rest of your Instagram feed by clicking on the small Customize button.
Here, click on Color Scheme to start editing the colors of your Instagram feed.
To easily set your feed colors, you can just pick from 4 color schemes:
- Inherit from Theme: Use your WordPress theme’s colors for your Instagram feed.
- Light: Show a light background and dark font for your feed.
- Dark: Switch to a dark color for your background and a light color for your fonts.
- Custom: Manually pick all the colors for your Instagram feed yourself.
Just select the color scheme that you prefer and then click on the Save button.
Now you can use the remaining customization options to change your post layout, number of columns, header style, feed size, button style, and much more.
After you’re done customizing your Instagram feed, remember to click on Save again.
So far, you’ve created your feed, connected it to Instagram, and customized its design. Finally, we’ll show you how to add Instagram feeds to the WordPress footer or sidebar areas.
Step 5: Embed Instagram Widget on Your WordPress Site
From your live feed editor, you can go ahead and embed your Instagram feed in just a few clicks.
First of all, click on the Embed button in the top right corner.
You’ll then see a popup that asks you to pick the location for your new Instagram feed.
To continue, you can copy the shortcode and click on the Add to a Widget button.
Once you do that, Instagram Feed Pro will open the Widgets page of your WordPress website. You can manage all of your sidebar and footer widgets here.
To start embedding your Instagram feed widget, click on the Sidebar panel.
You can also click on a Footer panel here if you want to embed your Instagram feed on your footer widget area.
We’ll use our WordPress sidebar for this tutorial.
Now click on the plus icon (+) to add a new widget to your footer or sidebar. From the options, just select the Instagram Feed widget to embed your feed.
Once you click on Update, you can now see your Instagram widget added to your WordPress page, like this:
There you have it!
You’ve just added an Instagram widget to your WordPress site. With Instagram Feed Pro, all it takes is a few simple steps — no coding needed at all!
After that, you can engage your visitors with relevant visual content, transforming them into loyal Instagram followers.
Ready to embed Instagram widgets with ease? Get started with Instagram Feed Pro today.
Want to display other social media feeds on your website — fast, easy, and hassle-free? Check out this next article on how to add social media feeds to your WordPress.
Interested in growing your business with Instagram? Here are the best Instagram WordPress plugins your website needs today.
You can also read this next post on how to embed a Facebook feed on your website.
And if you enjoyed this article, feel free to follow us on Twitter and Facebook for more helpful tutorials.
good information to know, very helpful !!!!