How to Add Instagram Widget for Your Website [Easy Guide]
Home Blog How to Add Instagram Widget for Your Website [Easy Guide]

How to Add Instagram Widget for Your Website [Easy Guide]

How to Add Instagram Widget For Your Website

Looking for an easy way to display Instagram widgets for your website?

Using Instagram widgets, you can turn website visitors into new followers, likes, and comments with ease. At the same time, you can show engaging content and keep people engaged.

But manually adding Instagram widgets to websites can get tough if you’re just starting out.

The good news? We’re going to show you the simplest way to link Instagram with a WordPress widget and show engaging photos and videos.

To get started, let’s look at the ways you benefit by adding Instagram widgets to your website.

Or, you can click here to skip ahead to the tutorial.

Why Add Instagram Widgets to Your Website?

Instagram is among the biggest social media sites out there and a fantastic platform to get photos and videos.

With over 1.44 billion active users, you can find tons of potential customers on this platform.

If you want to grow your Instagram following and reach more people, an easy solution is to show Instagram widgets on your website.

example of instagram widget

That way, anyone on your website can easily check out your Instagram content. You can then get tons of likes, comments, and followers with ease.

On top of that, you can also add Instagram widgets for your website to:

  • Show visitors that you’re active on Instagram, which makes them more likely to message you if they want to reach you.
  • Embed reviews and testimonials on your product pages to convert visitors into customers.
  • Post engaging photos and videos to keep people on your website for much longer.
  • Add a shoppable Instagram feed to give visitors a better experience of buying products on your website.
  • Add keyword-rich content from Instagram to boost your SEO and rank higher in search engine results.

And that’s just the beginning. Instagram widgets can help you boost your social media following, get more sales, and grow your business with ease.

With that, let’s look at the simplest way to embed an Instagram widget.

Easiest Way to Add an Instagram Widget to Your Website

If you want to integrate Instagram with WordPress, there are 2 ways you can do this:

  • Manual Way: Get the HTML embed code for each Instagram post and then manually insert that code into your website
  • Easy Way: Use a WordPress plugin to automatically embed an Instagram feed on your site — no coding needed.

With the first method, you’ll have to deal with lots of code, and it can take a lot of time if you want to show lots of Instagram posts.

embed code for instagram

If you add Instagram to WordPress without plugins, you’ll need to edit this code to change how the widget appears on your website.

As a result, you might end up with an Instagram widget that doesn’t match your branding at all.

The good news? You can simply use an Instagram feed plugin for your website and easily create a widget to showcase photos and videos from Instagram.

And the best option that you can get is the Instagram Feed Pro plugin.

best instagram feed pro plugin

Using this simple plugin, you can just follow a guided flow to create, customize, and add Instagram widgets for your website.

You can use your Instagram widgets to show your own Instagram content, posts with specific hashtags, Instagram stories, as well as your brand mentions.

Plus, all the Instagram widgets you create will automatically copy the design of your website and perfectly match your branding.

On top of that, you can use the live feed customizer to customize your Instagram feed widgets with ease — no coding needed.

live feed editor example instagram feed pro

All it takes is a few simple clicks, and you can change your feed layout, color scheme, header design, button style, and much more.

You can then engage your website visitors with relevant user-generated content (UGC) and social proof from Instagram.

Plus, the plugin is also ultra-fast, so you can embed as much Instagram content as you want, and your website will still load as fast as ever.

Instagram Feed Pro also comes with a customer support team of WordPress experts who are always ready to lend you a hand.

reviews instagram feed pro plugin

With all these amazing features, this plugin is the best Instagram feed plugin in the market, with a rating of 4.9/5 stars and over 1 million users.

All in all, it really is the best Instagram widget plugin in the market.

Ready to add Instagram widgets for your website? Get Instagram Feed Pro today.

With that, let’s go ahead and see how you can use this plugin to add Instagram widgets to your WordPress site.

How to Add Instagram Widgets for Your Website

Ready to add an Instagram widget to your WordPress site? Just follow the steps below to get started:

Step 1: Install the Instagram Feed Plugin

To get started, grab your copy of the Instagram Feed Pro plugin and then save it in your computer. After that, just install and activate this WordPress plugin on your website.

If you need a refresher on that, check out our guide on how to install a WordPress plugin.

After you do that, you can go ahead and create your Instagram widget in step 2.

Step 2: Create Your Instagram Widget

Now that your plugin is ready, you can use it to create an Instagram widget.

From your WordPress dashboard, navigate to the Instagram Feed » All Feeds menu and then click on the Add New button.

create new feed instagram feed pro

After you do that, you can choose the type of Instagram widget you want to embed:

  • User Timeline: Show the posts from your Instagram account
  • Public Hashtag: Pick specific hashtags and embed the Instagram posts with that hashtag
  • Tagged Posts: Display Instagram posts that mention your account

Want to combine different Instagram widget types? Just select more than 1 option here.

After choosing the option you prefer, just click on Next to continue.

select your feed type instagram feed pro

For this tutorial, we’ll show a user timeline using our Instagram widget.

As you can see, this plugin makes it easy to create Instagram widgets in a few clicks.

In the next step, you can connect this widget to your Instagram account.

Step 3: Connect Your Instagram Account

By connecting your Instagram account, your widget can show photos and videos from Instagram on your website.

To get started, click on the Add Source button on the page.

instagram add source for feed

Next, you can choose between connecting a personal or business Instagram profile for this Instagram widget.

If you pick a personal profile, your Instagram widget can only show posts from your own account.

On the other hand, you can use a business account to embed hashtag feeds, IGTV video feeds, mentions feeds, and more.

Choose the option you prefer in the Select Account Type option, and then click on the Login with Instagram button below.

select instagram account type popup

To connect your account, you can simply allow read-only access to the Instagram Feed Pro plugin. The plugin can then use that access to view Instagram info and won’t be able to make any changes.

Just click on the Allow button on the popup to continue.

allow access to instagram

Doing that will send you back to your WordPress site so you can confirm this account as the source for your Instagram widget.

To do that, just click on the Next button.

confirm account as source for instagram feed

After that, you can simply select this account as the source whenever you create a new Instagram widget.

With that, you can move on to the next step and then customize how your Instagram feed widget looks.

Step 4: Customize Your Instagram Widget

To help you easily change the design of your Instagram widget, the plugin comes with a live feed customizer.

On the left, you can see the customization panel with the options to change your color scheme, feed layout, header style, post elements, lightbox options, and much more.

Towards the right, you can see a live preview of your Instagram widget. That way, you can track your changes in real time.

live feed editor for instagram feed pro

To get started, you can change how Instagram posts appear on your widget.

Just click on the Feed Layout option from the left section.

select feed layout options live feed editor instagramselect feed layout options live feed editor instagram

From here, you can choose between 4 layouts for your Instagram feed widget: Grid, Carousel, Masonry, and Highlight.

Let’s take a look at these layouts below.

feed layout options instagram feed pro

Using the grid layout, you can show Instagram content using neat rows and columns.

As a result, you can show an Instagram gallery with tons of photos and videos at once.

grid layout for your instagram feed

Next, you have the carousel layout, which can turn your widget into a beautiful Instagram carousel.

Your website will be more interactive that way.

carousel layout for your instagram feed

Want to keep the original proportions of Instagram pictures and videos?

You can go for the masonry layout in that case.

masonry feed layout for your instagram feed

Next, you have the highlight layout that makes the Instagram posts more visible by removing details like captions.

It’s a great way to put the focus on specific Instagram posts on your widget.

highlights layout for your instagram feed

After you choose the layout for your Instagram widget, click on the Save button.

You can then click on the small Customize button to continue editing the design of your Instagram widget.

return to main customization options

Doing that will bring you to the main customization options once again.

To continue, click on the Color Scheme option to change the colors of your widget.

select color scheme option live feed editor instagram

Instagram Feed Pro comes with simple color scheme options that you can use to change all the colors at once:

  • Inherit from Theme: Copy your WordPress theme’s colors
  • Light: Pick a light layout along with a dark font color
  • Dark: Display a light-colored font on top of a dark background
  • Custom: Manually pick all the colors yourself
color scheme options instagram feed pro

After you select your color scheme, click on the Save button to confirm your choice.

You can now change your feed size, header style, post elements, number of posts, and much more using the remaining customization options here.

Finally, click on Save to confirm your changes, and you’re ready for the final step.

Step 5: Embed Instagram Widget on Your Website

With Instagram Feed Pro, there are 2 ways you can add your Instagram widget on a website:

  • Embed Instagram widget on your website page
  • Embed Instagram widget on your website sidebar or footer

Let’s take a look at both of these methods below:

Embed Instagram Widget on Your Website Page

You can start embedding your Instagram widget directly from your live feed editor. Plus, you can do this in a few easy clicks — no need for shortcodes or coding languages like HTML or CSS.

First, click on the Embed button at the top to get started.

instagram click on the embed button

Clicking on that will open a popup that shows the possible locations for your Instagram widget.

For now, you can click on Add to a Page here.

add live instagram feed to page

The plugin will then show you a list of WordPress pages that you have and ask you to choose where to embed your widget.

Just select the option you want and click on Next.

select page to embed live instagram feed

Once you do that, Instagram Feed Pro will open that page in the WordPress editor so you can add your widget.

First, add a new content block by clicking on the plus (+) icon.

add new content block on wordpress

Now use the search bar at the top to look for the “instagram” block. Next, click on Instagram Feed from the search results below.

embed instagram feed block on wordpress page

Just like that, you’ve added your Instagram widget to your WordPress website. Remember to click on Update to confirm your changes here.

After that, you can simply open your website to see how it looks.

example of instagram feed wordpress

Now let’s see how you can add this Instagram widget to your website sidebar or footer using this plugin.

Embed Instagram Widget on Your Website Sidebar or Footer

Like with the previous method, you can use the live feed editor to easily embed your widget.

First, navigate to the Instagram Feed » All Feeds menu from your WordPress dashboard area to see a list of your Instagram widgets.

From that list, click on the widget that you created earlier.

open your instagram feed

As you can see, this will open the live feed editor once again.

From here, just click on the Embed button in the top right corner to continue.

instagram click on the embed button

Now you can use the popup to choose the location of your Facebook widget.

Click on the Add to a Widget button here to embed Instagram content on your sidebar or footer areas.

add instagram feed to widget instagram feed proadd instagram feed to widget instagram feed pro

After you do that, Instagram Feed Pro will send you to the widgets page of your website so you can add your Instagram widget.

Want to show Instagram content on your sidebar? Click on the Sidebar panel here.

open sidebar panel to embed social media widget

Or you can click on a Footer panel instead. That way, you can display your Instagram widget at the bottom of your web pages.

For this example, we’ll use a WordPress sidebar here.

open footer panel to embed social media widget

To add a new widget, just click on the plus icon (+) at the bottom and then select the Instagram Feed widget from the options.

add instagram widget to your sidebar

Finally, click on Update to confirm your changes, and your Instagram feed will now be online on your website.

Just open your site to see how it looks to your visitors.

instagram widget wordpress sidebar

And that’s it!

Now you know how to add Instagram widgets for your website free of any hassle. With Instagram Feed Pro, all it takes is a few simple clicks, and you can engage your visitors with photos and videos from Instagram.

That way, you can easily get tons of Instagram followers, boost your sales, and even grow your business.

Ready to embed Instagram widgets with ease? Get started with Instagram Feed Pro today.

Want to get started with the best social media aggregators from Smash Balloon? Take a look at our guide on how to add social media feeds to your WordPress.

And if you enjoyed this article, feel free to follow 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.

[extended]
[extended]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]
[EXTENDED]