How to Embed Your Instagram on Your Website (Easy Guide)
Home Blog How to Embed Your Instagram on Your Website (Easiest Way)

How to Embed Your Instagram on Your Website (Easiest Way)

How to Embed Your Instagram on Your Website

Do you want to know the best way to embed your Instagram on your website easily, quickly and hassle-free?

With over 1 billion monthly active users, Instagram is one of the most popular social networks worldwide. But did you know that you can go beyond the app and display your Instagram feed on your website, too?

After all, embedding Instagram posts on your site is a great way to expose your Instagram marketing campaigns to more people.

branded-hashtag-feed-for-instagram

In this post, we’ll show you the easiest, fastest and best way to add an Instagram feed to your WordPress website.

Ready? Let’s get started.

Embed Instagram Feed With a Plugin

The easiest way for you to display your Instagram content on your website is by using a trusted WordPress plugin.

It’s because Instagram doesn’t make it easy for you to embed Instagram posts and feeds on your website manually.

In the past, when you copy the embed code of an Instagram post and paste it into your website, WordPress automatically converts it into an embedded Instagram post for you. This is known as an oEmbed.

But since WordPress discontinued its support for Instagram oEmbeds starting October 24, 2020, simply pasting the Instagram embed code into your website doesn’t work anymore.

wordpress oembed instagram

You have 2 ways to solve this issue so you can start embedding Instagram content on your WordPress:

  • Without a plugin: You need to be a registered developer with Facebook first. Then, you have to create an actual app so you can continue embedding Facebook and Instagram content into your website.
  • With a plugin: Simply install Smash Balloon’s Instagram Feed Pro plugin and connect it to your Instagram account. Then, use the plugin to automatically embed Instagram posts and Instagram feeds on your WordPress.

Easiest Way to Add Instagram to Your Website

As the best Instagram feed plugin for WordPress, Instagram Feed Pro helps you create, customize and display beautiful Instagram feeds on your website.

best instagram feed pro plugin

Since you can set up Instagram Feed Pro without having to deal with confusing code snippets, even WordPress newbies can easily use the plugin to embed Instagram content on their site — in under 5 minutes!

Here are some Instagram feed types you can showcase on your WordPress:

In fact, it’s so user-friendly that you can customize your Instagram feed in a few clicks using the live feed editor. No need to hire an expensive developer or designer to help you.

live feed editor instagram

The best part? Instagram Feed Pro is lightning fast since it efficiently retrieves data from Instagram’s API to minimize its loading time. So, it won’t slow down your website’s performance at all.

The plugin helps over 1 million active users embed Instagram content on websites worldwide.

And with its 4.9/5 solid star rating, you know you’re in great hands because Smash Balloon’s fast and friendly support team is always ready to help you out.

reviews instagram feed pro plugin

Now that you know the easiest way to embed Instagram feeds on your website, it’s time to talk about the step-by-step instructions.

You can get started adding Instagram content on WordPress by following the steps below:

Step 1: Install Instagram Feed Pro Plugin

The first step is to get your own copy of Instagram Feed Pro here. Next, download the plugin to your computer.

After downloading the plugin, you just need to upload it to your WordPress website and install it.

Don’t worry if you’re not sure how to do this. You can always check out this post on how to install a WordPress plugin for your guide.

Once you install and activate the plugin, you can create your Instagram feed in step 2.

Step 2: Create an Instagram Feed

With the Instagram Feed Pro plugin, you can create a new feed in just a few simple steps.

First, visit your WordPress dashboard and go to the Instagram Feed » All Feeds menu.

On this page, click on the Add New button at the top.

create new feed instagram feed pro

To continue embedding Instagram content into your website, you can now choose the Instagram feed type.

Instagram Feed Pro allows you to choose from 3 feed types:

  • User Timeline: Embed an Instagram feed from your account, so only the photos on your profile will be shown.
  • Public Hashtag: Embed an Instagram feed from a public hashtag of your choice. This can be a branded hashtag so you can display Instagram testimonials on your site.
  • Tagged Posts: Embed an Instagram feed of photos where your Instagram account is tagged in by other active users.

You can also combine multiple Instagram feeds and display them as a single embedded Instagram feed by selecting multiple options here.

Once you’ve selected the Instagram feed type, click on Next.

select user timeline import instagram feed

For this specific tutorial, we’re embedding a user timeline.

After that, it’s time to move to step 3 and connect this Instagram feed to your account.

Step 3: Connect Your Instagram Account

The next step to embedding Instagram on your WordPress site is to connect your Instagram account.

On this page, click the blue Add Source button to get started.

instagram add source for feed

Then, you’ll be asked to choose between connecting a personal or business Instagram account.

  • Personal account: With this option, you can only show photos from your own Instagram account.
  • Business account: Choose this if you want to display more types of Instagram feed such as user feed, hashtag feed, and shoppable Instagram feed.

If you want to learn more about getting a business account, check out this post on how to convert your Instagram account to a business profile.

Once you select your Instagram account type, click on Login with Instagram.

select instagram account type popup

The plugin will now send you to Instagram where you can give read-only access to your account.

Instagram Feed Pro is completely safe since it can use this access to view your info and doesn’t have permission to make changes.

To continue, just click on the Allow button on the popup.

allow access to instagram account create feed

With that, Instagram Feed Pro will bring you back to your website once again.

Here, click on Next to confirm this Instagram account as the source for your new Instagram feed.

confirm account as source for instagram feed

Just like that, you’ve created a new Instagram feed and connected it to your account.

In the next step, you can customize how it looks using our live feed editor.

Step 4: Customize Your Instagram Feed’s Design

The plugin will now open the live feed editor so you can personalize your Instagram feed’s design with ease.

First, check out the customization options on the left panel. From here, you can control your Instagram feed’s size, layout, color, header style, design, and much more.

Whenever you make any changes, you can see how it looks using the real-time preview on the right.

live feed editor for instagram feed pro

To get started with the customization, click on the Feed Layout option on the left.

select feed layout options live feed editor instagram

Now, you can choose from 4 different layouts for your Instagram feed: Grid, Carousel, Masonry, and Highlights.

feed layout options instagram feed pro

Choose the grid layout to showcase your Instagram feed as an organized collection of square-sized images, like this:

grid layout for your instagram feed

Want to display an Instagram carousel feed? You can choose the carousel layout to showcase your Instagram photos in a scrolling horizontal feed.

carousel layout for your live Instagram feed

For Instagram users interested in displaying an Instagram gallery, the masonry layout is the best choice for you.

This way, your Instagram photos are showcased in their original proportions.

masonry layout instagram feed

Finally, if you want to emphasize specific Instagram photos in your feed, you can choose the highlight option.

Since highlighted photos are shown twice as large in your feed, this layout is helpful if you want to capture your audience’s attention.

instagram feed highlights layout

Select the layout type that you prefer and then click on the Save button at the top.

Next, click on the small Customize button to return to the main options.

return to main customization options instagram

Now, let’s go ahead and change the colors of your new Instagram feed.

First, click on the Color Scheme option on the left.

select color scheme option

You can now pick from 4 color schemes for your Instagram feed:

  • Inherit from Theme: Choose to automatically copy your website’s colors
  • Light: Show a light background along with a darker font
  • Dark: Use a light font color but with a darker background
  • Custom: Manually choose all of the colors yourself
color scheme options live instagram feed

Just select the option that you prefer from here and then click on the Save button to confirm your changes.

With the live feed editor, it’s super easy to customize the rest of your Instagram feed. In just a few clicks, you can set your header style, follow button, lightbox options, feed size, and much more.

After customizing your Instagram feed, remember to click on the Save button once again.

You can then go to the final step of the tutorial and embed your Instagram feed.

Step 5: Embed Your Instagram Feed on Your Website

Smash Balloon works seamlessly with both Instagram and WordPress, so it’s pretty easy to add your Instagram content to your website.

You can choose between adding your Instagram feed to a WordPress page or to your website’s sidebar area.

Display Instagram Feed on WordPress Page

Using the live feed editor, you can easily add your Instagram feed to a WordPress page.

First, click on the Embed button at the top.

instagram click on the embed button

You can now see a popup where you can set the location of your Instagram feed.

Just click on the Add to a Page option for now.

add live instagram feed to page

After that, select a WordPress page from the list and click on the Add button.

select page to embed live instagram feed

The plugin will open that page in the WordPress editor once you do that.

Click the Plus (+) icon on the editor so you can add a new WordPress content block.

add new content block on wordpress

Then, search for “instagram” and click the Instagram Feed block to add it to your page.

embed instagram feed block on wordpress page

You’ll see a preview of your Instagram feed on your page editor. Finally, click on Publish to make your new Instagram feed live on your website.

example live instagram feed

With that, let’s move on and take a look at the second method of embedding your Instagram feed.

Display Instagram Feed on WordPress Sidebar or Footer

To embed your feed on your website’s sidebar or footer, first, open your feed in the live feed editor.

For that, you can navigate to Instagram Feed » All Feeds from your WordPress dashboard.

On this page, you can click on the Instagram feed that you created earlier.

open your instagram feed

This will open the feed in the plugin’s live feed editor once again.

From here, click on the Embed button to continue.

instagram click on the embed button

Next, click on the Add to a Widget button on the popup.

This will open the widget page of your WordPress site.

add live instagram feed to widget

From here, you can add your new feed to your sidebar or footer as an Instagram widget.

You can now click on the Sidebar panel to manage the widgets on your sidebar.

open sidebar panel

Alternatively, click on the Footer panel if you want to start managing your footer widgets.

open footer panel

For our tutorial, we’re going to use the WordPress sidebar.

Finally, click on the plus (+) icon to add a widget, and then click on the Instagram Feed widget to embed your feed.

add instagram widget to your sidebar area

Doing this makes your Instagram feed live on your website’s sidebar. As a result, you’ll see this example when you visit your website:

example of live instagram feed on the sidebar

So, there you have it!

Now you know how to easily embed your Instagram feed on your website with the help of the best Instagram feed plugin for WordPress. As a result, you can enjoy more followers and more sales for your business.

Start giving your business the success it deserves.

Get started with Instagram Feed Pro today.

And if you found this post useful, feel free to connect with us on Twitter and Facebook for more helpful 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.

[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]
[class^="wpforms-"]