Want to know how you can display your Instagram on your website — easily and quickly?
With 90% of Instagram users following a business, it makes sense to cross-promote your Instagram content on your website.
This helps widen your audience reach, increase your followers and even encourage more sales from your site visitors.
But it can be tricky to embed your Instagram feed on your website — especially if you’re not comfortable with coding.
With over 11 years of experience in social media feeds, we here at Smash Balloon created this post to show you the easiest way to show Instagram on your website.
Before we get started, let’s look at the different ways you can display Instagram content on your site.
Or you can skip directly to the step-by-step tutorial on showcasing your Instagram content here.
Easiest Way to Display Instagram on Your Website
There are 2 ways to embed your Instagram content on your WordPress website:
- Automated: You can use a trusted WordPress plugin and display a feed of Instagram posts on your website.
- Manual: You get the embed code of the Instagram posts that you want to display, tweak the code snippets to customize them, and add the code to your site.
For the easiest way to display Instagram on your website, you can use the 1st method and try a WordPress plugin.
And the best option for that is Instagram Feed Pro by Smash Balloon, as it’s the best Instagram feed plugin for WordPress.
With this WordPress Instagram feed plugin, you can simply follow a 3-step guided flow, and it’ll take you through the whole process of creating, customizing, and embedding Instagram feeds — no coding needed!
That way, you can easily add Instagram content such as hashtag feeds, posts with Instagram mentions and even shoppable Instagram posts on your website.
Another great thing about Instagram Feed Pro is that you can control your Instagram feed’s design in minutes, since the plugin comes with a built-in visual feed customizer with live preview.
Personally, I love the fact that I could also use Instagram Feed Pro’s visual customizer to moderate the Instagram posts I want to show or hide on my feed in just a few clicks!
Another reason why Instagram Feed Pro has a solid 4.9/5 stars rating and over 1 million users? It’s because of its ultra-fast performance.
Since the plugin loads your Instagram feeds as fast as possible, you don’t have to worry about it slowing down your website at all.
What’s more, Instagram Feed Pro also comes with an amazing customer support team of WordPress experts who will be happy to help you out.
With these in mind, let’s talk about the step-by-step tutorial on how you can display your Instagram on your website — easily and hassle-free.
How to Display Instagram Feed on Your Website (Easy Way)
To display Instagram posts on your website using Instagram Feed Pro, you can simply follow the tutorial below.
Let’s get started.
Step 1: Install Instagram Feed Pro
You can start by getting your own copy of Instagram Feed Pro here.
Download the plugin to your computer, then upload it to your WordPress website by installing it.
If you’re not familiar with how to do this, check out this helpful guide on how you can install a WordPress plugin.
After that, you can start using the plugin to create a new feed to show Instagram posts on your website.
Step 2: Create an Instagram Feed
The next step is easy: creating a new Instagram feed on your website.
To do this, first, go to your WordPress dashboard and navigate to Instagram Feed » All Feeds. Next, click on the Add New button at the top.
The next step to embedding your Instagram feed on your website? Decide on the type of Instagram feed that you want to display.
Instagram Feed Pro lets you choose from 3 different feed types, including:
- User Account: Embed an Instagram feed containing photos from your own account.
- Public Hashtag: Embed an Instagram feed from a public hashtag of your choice. This is great for displaying customer testimonials on your website.
- Tagged: Display an Instagram feed containing posts where your Instagram account is tagged in.
You can also combine multiple feed types and show them in a single Instagram feed.
For this tutorial, we’ll go with a user timeline feed and show posts from a single Instagram profile.
Now that you have a new Instagram feed, you can connect it to a source in the next step.
Step 3: Connect Your Instagram Account
To display Instagram posts on your website, you can connect the new feed to your Instagram account.
For that, click on the Add Source button to get started.
A popup will ask you to choose between connecting your personal or business account.
Here’s the difference: a personal account displays your Instagram feed from your own account only, while a business account shows different feed types, such as hashtag feeds, tagged feeds, and mixed Instagram feeds.
Once you’ve made your choice, select your account type and then click Login with Instagram.
Clicking on that will open Instagram in your browser. There, you can give the plugin read-only access to your Instagram account.
The plugin will use this access to view your Instagram info, but it can’t make any changes at all. As a result, Smash Balloon is safe to use.
To continue, click on the Allow button here.
This will bring you back to your WordPress website so you can confirm this account as the source for your Instagram feed.
You can do that by clicking on Next here.
Once you’re done connecting your Instagram account to the plugin, you can get started with the customization in the next step.
Step 4: Customize Your Instagram Feed
Remember when we mentioned that it’s super easy to customize your Instagram feed’s design?
You can use the live feed editor to change how your Instagram feed looks in a few simple clicks — no need to touch a single line of code.
Towards the left, you can find all the customization options for your Instagram feed, including the option to change your feed layout, header, color scheme, individual Instagram posts, button design, and much more.
What’s more, you can see a live preview of your feed on the right and track all of your changes in real-time.
You can now click on the Feed Layout option to start changing the design of your Instagram feed.
Here, you set your feed layout, which changes how the Instagram posts appear on your website.
With this plugin, you can choose from 4 different layout options: Grid, Carousel, Masonry, and Highlight.
You can select the grid layout to display your Instagram posts in an organized frame full of square-cropped images like this:
Or you can select the carousel layout to display your Instagram feed in a sliding horizontal layout similar to this example:
Want to display an Instagram gallery on your WordPress? Then, the masonry layout is perfect for you.
Since you’re showing images in their original aspect ratio, you can showcase your Instagram photos in their full glory, like this:
Finally, you can also select the highlight layout to make specific photos in your Instagram feed stand out, as you can see below:
Once you’ve chosen the layout of your Instagram feed, click on the Save button at the top.
Next, you can continue changing the design of your Instagram feed by clicking on Customize.
Next, you can use the customization panel on the left to edit the design of your Instagram feed once again.
To continue, click on the Color Scheme option.
You can easily change all the colors of your Instagram feed by selecting a color scheme. There are 4 color schemes to choose from here:
- Inherit from Theme: Automatically copy the colors of your WordPress theme
- Light: Display a light background along with a dark font for your feed
- Dark: Choose a light font color with a dark background
- Custom: Manually pick all the colors for your feed yourself
You can now use the remaining customization options to set your header design, button style, feed size, number of posts, and much more.
Satisfied with how your Instagram feed looks? Great! Remember to click on Save and move on to the final step below.
Step 5: Display Your Instagram Feed on Your Website
With the help of Instagram Feed Pro, you can embed your Instagram feed in 2 different ways:
- On your page in WordPress, or,
- On your sidebar or footer areas in WordPress
Let’s talk about both options below.
Embed Instagram Feed on WordPress Page
With Instagram Feed Pro, you can embed your Instagram feeds directly from the live feed editor in a few simple clicks.
First, click on the Embed button, which is at the top of your live feed editor.
Next, Instagram Feed Pro will ask where you want to display Instagram content. From here, you can choose to add it to a page, display it as a widget, or manually copy the shortcode.
To continue, click on the Add to a Page button.
The popup will then show you a list of all the WordPress pages on your site and ask you to choose one.
Just select a page and then click on the Add button below.
Now, the plugin will send you to that WordPress page so you can display your Instagram feed.
Once you’re directed to a new page, click on the plus (+) icon to add a new WordPress content block.
Look for the Instagram Feed block and click on it to automatically add your Instagram feed to your page.
And finally, you can click on Update so you can make it live on your WordPress website. In fact, you can open your website and see how it looks.
Now let’s look at the next way to display Instagram content on your website.
Embed Instagram Feed on WordPress Sidebar
To display your Instagram feed as a widget on your website’s sidebar, first, visit your WordPress admin panel.
Then, navigate to the Instagram Feed » All Feeds menu and then click on the Instagram feed that you want to embed.
From here, click on the Embed button at the top to start embedding your Instagram feed.
This opens the embed popup where you can choose the location of your Instagram feed.
To display your Instagram on your website’s sidebar or footer, click on the Add to a Widget button here.
Once you click on that, Instagram Feed Pro will send you to your Widgets page. This is where you can add, remove, or manage WordPress widgets.
To continue, you can click on the Sidebar panel.
Want to display your Instagram on the website footer instead?
Then click on a Footer panel here.
Once you do that, you can add a new widget to your website by clicking on the plus (+) icon at the bottom.
Finally, click on the Instagram Feed widget to embed your new Instagram feed as a widget.
Now, when you check out your website, you can see your embedded Instagram feed on your sidebar area. This way, your Instagram feed can be seen by your site visitors everywhere on your site!
And that’s it, folks! You’ve now reached the end of this tutorial.
We hope this step-by-step guide helped you display your Instagram on your website. By following the steps in this tutorial, you can take your Instagram marketing to the next level and get more followers and more sales in no time.
Ready to create engaging Instagram feeds? Get started with Instagram Feed Pro today!
While you’re here, you can also check out our list of the best Instagram marketing tips.
Finally, if you enjoyed this article, connect with us on Twitter and Facebook for more helpful social media marketing tips and tutorials.
