How to Add an Instagram Slideshow Widget to WordPress (Easy)

Last updated on December 20th, 2020

Want to add an Instagram slideshow widget to your WordPress website? When you show your Instagram photos to your site visitors, you can boost your followers and increase your user engagement.

Plus, it saves you time since you can upload photos in Instagram and display it on your site — at the same time.

Instagram makes it hard for its 1 billion monthly users like you to embed photo slideshows on your site, though. So in today’s post, we’ll give you a step-by-step guide on how you can easily create an Instagram slideshow widget for WordPress.

Before jumping into the tutorial, let’s explain what an Instagram slideshow widget is.

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

What’s an Instagram Slideshow Widget?

A widget helps you add content to your website’s sidebar, footer and widget-ready areas. What kinds of content can you add? Using widgets allow you to add menus, popular posts, contact forms and other useful content to your WordPress site.

Want to see an example? Just check out your favorite website and look at their sidebar area. Each block of content found in the sidebar area is a widget.

instagram slideshow widget sidebar

Simply put, an Instagram slideshow widget is Instagram-specific content added to your website. In this case, it’s an Instagram feed displayed as an image slideshow.

instagram slideshow widget wordpress

To add an Instagram slideshow widget to your WordPress, you can either use code or a WordPress widget in your theme’s widget-ready areas. You’ll learn about these 2 methods in this article.

Now that you know what an Instagram widget is, you may be wondering what’s the easiest way to add it to your website. If there’s an easy and faster way to do it, it’ll make your job easier, too, right? Let’s talk more about this below.

Easiest Way to Add an Instagram Slideshow Widget to WordPress

The bad news? Instagram doesn’t make it easy for you to display slideshows of photos in WordPress. Using the platform, you can only embed single Instagram posts.

The good news? You can still easily embed an Instagram slideshow widget using a WordPress plugin. By using a beginner-friendly plugin like Smash Balloon’s Instagram Feed Pro, you can easily add your Instagram slideshow widget — no technical knowledge needed!

instagram slideshow widget plugin

No need to hire a developer or risk breaking your website with confusing code. Instagram Feed Pro will do the hard work for you. All you have to do is to install it and customize your Instagram feed so it looks exactly the way you want.

Plus, you don’t need to worry about the plugin slowing down your site. With over 1,000,000 users and a 4.9/5 star rating, Instagram Feed Pro is designed to be ultra fast.

instagram slideshow widget wordpress plugin

By using the plugin, you can also:

  • Create shoppable Instagram feeds and display them on your website to boost sales
  • Control your feed’s content by showing posts based on hashtags or keywords
  • Customize the look of your Instagram feed simply by checking and unchecking boxes
  • Combine multiple feeds into a single Instagram gallery

Want to know everything that Instagram Feed Pro can do for you? Check out the plugin’s full list of features here.

Finally, with the plugin’s 30-day 100% money-back guarantee, there’s practically no risk in trying it out and experiencing firsthand just how easy it is.

Ready to skyrocket your Instagram followers and grow your business over time? Dive in by following the steps below.

Step 1: Install and Activate Instagram Feed Pro Plugin

First, you can get your own copy of Smash Balloon’s Instagram Feed Pro plugin here.

instagram slideshow plugin for wordpress

Download the plugin to your computer and upload it to your WordPress. Not sure how to do this? Check out this helpful guide on how you can install a WordPress plugin on your website.

Step 2: Connect Your Instagram Account

Already activated the plugin? Good. You can now move on to the next step: connecting your Instagram account.

Start by navigating to Instagram Feed » Settings. From there, click the Connect an Instagram Account button.

instagram slideshow plugin settings

Then, the plugin will ask you to connect your personal or business account.

instagram slideshow widget plugin settings

To display your own Instagram feed only, choose personal account. Or, to display more types of feed such as user feed, hashtag feed, and shoppable feed, choose business account instead. Don’t stress too much about choosing, since you can always change this if you need to.

Want to know how you can convert your personal account into a business account? Check out this helpful tutorial for your step-by-step guide.

Don’t forget to click Connect to confirm your choice.

Step 3: Choose Your Instagram Slideshow Feed Type

Nice, your Instagram account’s already connected to the plugin!

The next step is choosing the type of slideshow feed you want to display. Instagram Feed Pro gives you 4 options to choose from:

  • User Account: Show a slideshow of Instagram posts from your own account.
  • Public Hashtag: Show a slideshow of Instagram posts from a public hashtag of your choice.
  • Tagged: Show a slideshow of Instagram posts where your Instagram account is tagged in.
  • Mixed: Combine multiple feeds and show them into a single slideshow.

To confirm your choice, click the radio button next to the feed type you want to embed on your WordPress.

instagram slideshow feed type

Remember to click on Save Changes.

Step 4: Choose Your Instagram Slideshow Widget Layout

First, you need to scroll up to the top of the settings page, then click on the Customize tab. Under the Customize » General tabs, you have the options to control the width, height and background color of your feed.

instagram slideshow widget layout

Here’s the important part: scroll down until you see the Layout section. Since you’ll add an Instagram slideshow widget to your website, choose Carousel.

instagram slideshow widget carousel

This layout type allows you to display your Instagram posts in a horizontal slideshow carousel, like this:

instagram slideshow example on website

Under this section, you can also customize the number of rows and loop type of your Instagram slideshow feed. Plus, you can also choose to show or hide navigation arrows, pagination, and set the slideshow to autoplay.

Click on Save Changes before continuing to scroll down for more customization options.

Step 5: Customize Your Instagram Slideshow Feed

Now, it’s time to customize how your Instagram slideshow feed will look like on your website.

To do this, scroll down until you can see the HeaderLoad More Button and Follow Button sections.

Start by customizing your Instagram slideshow feed’s header.

instagram slideshow example on wordpress

Choose among 3 various header styles: standard, boxed, and centered. Then, have more control over the information you display by showing or hiding the number of your Instagram followers or your bio text.

instagram slideshow widget header

Want another reason to use a business profile to show your Instagram feed? You can also show your Instagram profile’s stories here. So when someone visits your website and clicks on your profile picture, they can view your stories — without leaving WordPress!

Next is customizing your Instagram feed’s “load more” button.

instagram slideshow widget load more

Under this section, you can choose to show or hide the “load more” button. You can even change its background color, text color and text, if you want.

And finally, customize your “follow” button by scrolling down further.

instagram slideshow widget example wordpress

Since you’re using Instagram for business, it makes sense to optimize your feed’s follow button. This is the button that your site visitors click to follow you on Instagram, after all. Change the background and text color, if you want. You can also put your own customized text to encourage site visitors to follow you.

instagram slideshow plugin follow settings

To save your choices, click the Save Changes button.

Step 6: Add Your Instagram Slideshow Widget to WordPress

Great! You’ve now reached the final step: displaying your Instagram feed to your site by adding your Instagram slideshow widget. How? You can do this in 3 ways:

  • Instagram Feed Block: Have the new WordPress block editor? Instagram Feed Pro has a block you can easily use to embed your feed.
  • Instagram Feed Shortcode: Have the classic WordPress editor instead? You can also use the plugin’s simple shortcode.
  • Instagram Feed WordPress Widget: Just drag-and-drop to show your Instagram feed in seconds!

Don’t know which method you’d like to try? Check out the steps below and find out which is the right fit for you.

Add Instagram Slideshow Widget with the Instagram Feed Block

First, create a new post on your website. You can easily do this by going to Posts » Add New. After you’ve clicked on this, you’ll see a new blank post with the block editor.

instagram slideshow widget wordpress editor

To insert the Instagram Feed block, click on the Plus (+) icon. Search for “instagram” and click on the Instagram Feed block to add it to your post.

instagram slideshow widget block editor

Clicking on the Instagram Feed block automatically displays your Instagram slideshow feed in the block editor. Feel free to edit the title and go back to the plugin’s settings to customize your feed’s look.

instagram slideshow widget preview

Once you’re happy with how your Instagram slideshow feed looks like, click on Publish to make it live on your website.

Add Instagram Slideshow Widget with the Shortcode

What if you’re using the classic WordPress editor instead? No problem. You can easily add your Instagram slideshow widget to your website by using a shortcode.

Where would you get the shortcode? Navigate to Instagram Feed » Settings. On the bottom part of the page, you can see the Display Your Feed section. From here, copy the shortcode displayed.

add instagram slideshow widget shortcode

Now that you’ve copied the shortcode, the next step is creating a new page. It’s simple: just navigate to Pages » Add New to do this.

add instagram slideshow widget to wordpress page

Paste the shortcode directly into the new page editor.

instagram slideshow widget shortcode

Finally, click on Preview to check how your Instagram slideshow feeds look like. Or, click on Publish to start displaying your feed to your website visitors.

Add Instagram Slideshow Widget with Ready-Made Widget

Finally, what if you’d like to add your Instagram slideshow widget to your sidebar instead? We’ve got your back. Instagram Feed Pro has a ready-made widget that you can easily use.

To use it, just go to your WordPress dashboard and navigate to Appearance » WidgetsThen, drag the Instagram Feed widget to your sidebar area.

add instagram slideshow widget to wordpress sidebar

Don’t forget to click on Save so your feed can be displayed. Now, your site visitors can see your Instagram slideshow feed on your sidebar, like this.

instagram slideshow widget sidebar example

And, that’s it! You’ve now learned how you can easily add an Instagram slideshow widget to your website. Now, you can increase your Instagram followers by showing your posts to a bigger and more targeted audience — your website visitors.

Get started with Instagram Feed Pro today.

Or if you want unlimited access to Smash Balloon plugins so you can use them on unlimited websites, go ahead and get the Social Wall Pro bundle here.

The great part about Smash Balloon’s pricing method? It comes with a 100% no-risk money-back guarantee so you can try out the plugins first and see if it’s a good fit for you.

And if you found this post useful, connect with us on Twitter and Facebook for more helpful tutorials.

Want to Try our Instagram plugin for Free?

Enter the URL of Your WordPress website to install Instagram Feed Lite.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *