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. 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.
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.
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.
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!
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.
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.
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.
Then, the plugin will ask you to connect your personal or business account.
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.
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.
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.
This layout type allows you to display your Instagram posts in a horizontal slideshow carousel, like this:
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 Header, Load More Button and Follow Button sections.
Start by customizing your Instagram slideshow feed’s header.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Paste the shortcode directly into the new page editor.
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 » Widgets. Then, drag the Instagram Feed widget to your sidebar area.
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.
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.