Do you want to create a custom Instagram feed in WordPress?
An Instagram feed can keep your site fresh and engaging, while also getting you more likes, shares, and Instagram followers.
In this article, we will show you how you can create a custom Instagram feed for your WordPress website.
Why Include an Instagram Feed on Your WordPress Site?
Adding an Instagram feed on your WordPress site lets you show fresh content to your visitors without lots of extra work. It also encourages readers to follow you on Instagram.
Instead of manually adding images in the WordPress block editor, you can simply upload them to Instagram and they’ll appear on your website. You can even show other people’s photos on your site by creating a hashtag feed or displaying the posts that other people have tagged your account in.
In the following image you can see an example of a brand that uses a custom Instagram feed to show user-generated content.
In this way, you can use a custom Instagram feed to provide valuable social proof and make more money online.
That being said, let’s see how you can create a custom Instagram photo feed in WordPress.
How to Create a Custom Instagram Photo Feed in WordPress
The easiest way to add an Instagram photo feed on your site is by using the Smash Balloon Instagram Feed plugin. It is the best Instagram plugin for WordPress and allows you to display content from your Instagram account to your WordPress site in an instant.
First, you’ll need to install and activate the Smash Balloon Instagram Feed plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Note: In the guide we’re using the premium version of Smash Balloon as it has powerful features that allow you to create a completely custom Instagram feed. This includes creating hashtag feeds and adding shoppable images in WordPress. If you’re just getting started or have a tight budget then there is also a free Smash Balloon Social Photo Feed plugin.
After you’ve installed the plugin, head over to Instagram Feed » Settings.
You can now enter your Smash Balloon license key into the ‘License Key’ field.
You can find this information in the confirmation email you got when you purchased Smash Balloon, and also in your Smash Balloon account.
After adding your license key, go ahead and click on the ‘Activate’ button.
Once you’ve done that, you’re ready to create a custom Instagram feed. To get started, select ‘All Feeds’ in the left-hand menu and then click on the ‘Add New’ button.
Smash Balloon will now show all the different types of Instagram feeds that you can create.
If you simply want to display your Instagram photos, then you can use a Personal Instagram account. However, you’ll need a Business Instagram account if you want to create a hashtag feed or show the posts that your account is tagged in.
Tip: Don’t have a Business Account? To convert your Personal Instagram account into a Business Account, simply follow Smash Balloon’s step by step instructions.
On this screen, find the feed type that you want to create and give it a click. You can then go ahead and click on the ‘Next’ button.
On the next screen, click on the ‘Add source’ button.
This opens a popup where you can choose whether to connect to a personal Instagram account or a business account.
To connect to a personal Instagram account, click on the ‘Personal’ button. You can then give the ‘Login with Instagram’ button a click and follow the onscreen instructions.
Do you want to use an Instagram Business account instead?
Then just click on the ‘Business’ radio button. You can then select ‘Login with Facebook‘ and follow the onscreen instructions.
No matter whether you use a personal or Instagram Business account, after making the connection Smash Balloon will take you back to the WordPress dashboard automatically.
If you’re using an Instagram Business account to show photos that have a particular hashtag, then you’ll need to type it into the ‘Hashtag’ field.
If you want to show multiple hashtags in the same feed, then make sure you separate each hashtag with a comma.
Do you want to show posts that your account was tagged in?
Then you’ll need to find the ‘Tagged’ section and click on its ‘Add Source’ button.
You can now follow the onscreen instructions to select the Instagram account that you want to use. For example, if you wanted to show all the posts that the WPBeginner Instagram account was tagged in, then you’d need to select the WPBeginner account.
After working your way through the settings on this screen, click on the ‘Next’ button. This opens an editor where you can customize the Instagram feed.
Smash Balloon shows a live preview of your Instagram feed to the right. On the left is a menu that shows the different settings that you can use to customize the social media feed.
Here, you can change the width and height of your feed, switch the layout, change the number of photos, columns, and more.
To change the layout, simply click on Feed Layout in the left-hand menu.
You can now choose from a Grid, Carousel, or Masonry layout. There is also a Highlighted layout that highlights every third photo, as you can see in the following image.
As you click on the different layouts, the live preview will automatically update to show the new layout. This makes it easy to try different layouts and find the one you prefer.
By default, Smash Balloon will show your Instagram photos in a four column grid.
To begin with, users will see 20 photos from the custom Instagram feed. They can see additional photos by clicking ‘Load More.’
To change how many photos Smash Balloon shows on desktop and mobile devices simply find the ‘Number of Posts’ section.
You can then type a new number into the ‘Desktop’ and ‘Mobile’ fields.
By default, Smash Ballon will split your photos into 4 columns on desktop, 2 columns on tablet devices, and a single column on mobile.
Do you want to use a different number of columns? Then just scroll to the ‘Columns’ section in the left-hand menu.
You can then type a new number into the Desktop, Tablet, or Mobile fields.
To make sure your Instagram feed looks good on mobile devices, it’s smart to view the mobile version of your WordPress website.
There are some more settings that you can use to style the custom Instagram feed. Most of these settings are self-explanatory so you may want to spend some time exploring the different settings on this page.
When you’re happy with how the custom Instagram feed looks, you can click on ‘Save.’
Showing a Feed of Your Instagram Photos in WordPress
Once you’ve configured an Instagram feed, it’s easy to add it to your WordPress blog by opening the page or post where you want to show the feed.
Here, click on the + symbol to add a new block. You can then type in ‘Instagram Feed’ and click to add the right block to the page.
The Instagram feed will be instantly added to the page or post.
At the bottom of the feed, you’ll see buttons where visitors can load more photos or follow you on Instagram.
If you’re happy with how it looks, then you can go ahead and publish or update the page.
Another option is to add the Instagram Feed widget to your website. This is a great way to show the Instagram feed on every page of your site. For example, you might add the Instagram widget to the WordPress theme’s sidebar or footer.
To add the Instagram Feed widget to your site, head over to Appearance » Widgets. You can then click on the blue ‘+’ icon towards the top of the screen.
In the panel that appears, type in ‘Instagram Feed’ to find the right widget.
As you can see in the following image, there are two Instagram Feed widgets so make sure you use the right one.
The widget we’re using lets you select which Instagram feed appears on your site, which is perfect if you’ve used Smash Balloon to create multiple different feeds.
After finding the right widget, you can simply drag and drop the widget onto the area where you want to show the Instagram feed on your website.
This will add a new Instagram Feed section to the widget editor.
Next, you can type in an optional title for the widget. This will appear above the Instagram feed on your website so visitors will be able to see it.
To add a title, simply type in the ‘Title’ field.
Next, open the ‘Feed’ dropdown.
You can now go ahead and click on the Instagram feed that you want to show in the widget.
Note: If you’ve created multiple Instagram feeds, then you may be unsure which feed to select. You can see a list of all your Instagram feeds and their names by going to Instagram Feed » All Feeds in the WordPress dashboard.
When you’re happy with how the widget is configured, you can click on the Update button. Now if you visit any page on your site, you’ll see the new Instagram Feed widget live.
Creating Multiple Instagram Feeds in WordPress
What if you want to show different Instagram feeds on your WordPress website?
You can create multiple Instagram feeds by repeating the same process described above. Smash Balloon will then automatically create a different shortcode for each Instagram feed.
To see the shortcodes, simply head over to Instagram Feed » All Feeds and take a look at the ‘Shortcode’ column.
You can add any of the custom Instagram feeds to your site by pasting its shortcode into a new Shortcode block or widget area. For step by step instructions, see our beginner’s guide on how to add a shortcode in WordPress.
Another option is to paste the shortcode into a special Instagram Feed block, which makes it easier to customize the feed.
To do this, simply add a new Instagram Feed block to a page, post, or widget-ready area.
By default, the Instagram Feed plugin will display the first custom feed that you created using Smash Balloon. To show a different feed, simply click to select the Instagram Feed block if it isn’t already selected.
Then, in the right-hand menu click to expand the Add Settings section.
In this section, you can either type in or paste the shortcode for the Instagram feed that you want to show.
Then, just click on the Apply Changes button.
The Instagram Feed block will now update to show content from the new feed.
When you’re happy with how the feed looks, you can simply update or publish the page.
Other Popular Instagram Feed Settings in WordPress
You might be perfectly happy with how the custom Instagram feed looks, as the Smash Balloon plugin does a great job without any customizations.
However, there are some common tweaks you may want to make depending on how you want to display your Instagram photos.
For example, you might want to show the photos without the captions. This is especially helpful if you’re displaying the feed in a small space.
To hide the captions, simply click to select the Instagram Feed block in the post editor.
Then, in the ‘Add Settings’ section type in the following shortcode:showcaption=”false”
When it shows up, click on the Apply Changes button to remove the captions from the Instagram feed.
Another popular option is changing the text of the Load More button. To do this, simply go to Instagram Feed » All Feeds.
You can then find the feed that you want to customize and click on the ‘Edit’ button, which looks like a pencil sign under the ‘Action’ column.
This opens the Instagram feed for editing.
In the right-hand menu, click on Load More Button.
In the ‘Text’ field, simply type in the text that you want to show on the button.
As you’re typing, the Instagram feed preview will update automatically to show the new text.
When you’re happy with how the button looks, simply click on the ‘Save’ button in the top right corner.
This screen has lots of other settings that you can use to change how the Instagram feed looks on your website.
As you click on the different settings the preview to the right will update automatically. This makes it easy to see how the changes will look on your website.
We hope this article helped you learn how to create a custom Instagram feed in WordPress. You might also want to see our comparison of the best WordPress giveaway plugins to grow your social following, and best email marketing services to increase your website traffic.