How to Display Your Instagram on Your Website (Easy Way)
Home Blog How to Display Your Instagram on Your Website (Easy Way)

How to Display Your Instagram on Your Website (Easy Way)

How to Display Your Instagram on Your Website

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 10 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:

  1. Automated: You can use a trusted WordPress plugin and display a feed of Instagram posts on your website.
  2. 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.

best instagram feed pro plugin

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 a few simple clicks using the live feed customizer.

live feed customizer

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.

reviews instagram feed pro plugin

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.

create new feed instagram feed pro

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.

select user timeline import 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.

instagram add source for feed

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.

select instagram account type popup

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.

allow access to instagram account create feed

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.

confirm account as source for instagram feed

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.

live feed editor for instagram feed pro

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.

select feed layout options live feed editor instagram

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.

instagram grid layout on your website

You can select the grid layout to display your Instagram posts in an organized frame full of square-cropped images like this:

grid layout for your instagram feed

Or you can select the carousel layout to display your Instagram feed in a sliding horizontal layout similar to this example:

carousel layout instagram feed

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:

masonry layout instagram feed

Finally, you can also select the highlight layout to make specific photos in your Instagram feed stand out, as you can see below:

gallery layout instagram feed

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.

return to main customization options instagram

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.

color scheme options for instagram feed pro

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
color scheme options live instagram feed

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.

instagram click on the embed button

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.

add live instagram feed to page

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.

select page to embed live instagram feed

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.

add new content block on wordpress

Look for the Instagram Feed block and click on it to automatically add your Instagram feed to your page.

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

example of instagram feed wordpress

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.

open your instagram feed

From here, click on the Embed button at the top to start embedding your Instagram feed.

instagram click on the embed button

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.

add live instagram feed to widget

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.

open sidebar panel

Want to display your Instagram on the website footer instead?

Then click on a Footer panel here.

open footer panel

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.

add instagram widget to your sidebar area

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!

example of live instagram feed on the sidebar

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.

author avatar
Sajjan Sharma Senior Writer
Sajjan has been writing about WordPress, social media marketing, and online businesses for over 10 years. His professional interests extend to include influencer marketing, content curation and digital marketing strategies.

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.