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’s 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 Instagram Feed » All Feeds and then click on the ‘Add New’ button.
Smash Balloon will now show all the different types of Instagram feeds that you can create.
Simply select the type of feed you want to add to WordPress, and click on ‘Next.’
If you just 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.
If you select ‘Publish Hashtag,’ then you’ll need to type in the hashtags you want to use. To show multiple hashtags in the same feed, simply separate each hashtag with a comma.
Once you’ve done that, click on ‘Next.’
Do you want to show posts that your account was tagged in? Then you’ll need to select ‘Tagged Posts’ instead and then click on ‘Next.’
No matter what kind of feed you’re creating, you’ll need to connect WordPress to your Instagram account.
To get started, click on the’Add Source’ button.
After that, choose whether you want to show images from a personal or business account.
If you select the button next to ‘Personal’ then Smash Balloon won’t include the Instagram avatar and bio in your header by default. However, you can always add the Instagram avatar and bio manually in the plugin’s settings.
After choosing ‘Personal’ or ‘Business,’ click on ‘Login with Facebook.’
You can now select the Instagram account that you want to feature on your WordPress website, and click on ‘Next.’
After that, check the box next to the Facebook page that’s linked to the Instagram account you want to use.
With that done, click on the ‘Next’ button.
You’ll now see a popup with all the information Instagram Feed Pro will have access to and the actions it can perform.
To restrict the plugin’s access to your Instagram account, simply click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the photos that you can show on your WordPress blog or website.
With that in mind, we recommend leaving all the switches enabled. When you’re happy with how the feed is set up, click on ‘Done.’
You’ll now see a popup with the Instagram account you just added to your website.
Simply check the box next to that account and then click on ‘Add.’
Instagram Feed Pro will now take you back to the Instagram Feeds » All Feeds screen.
To create a custom Instagram feed, just check the box next to the Instagram account that you want to use. Then, click on ‘Next.’
The plugin will now create an Instagram photo feed that you can add to any page, post, or widget-ready area.
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, Masonry, or Carousel layout.
There is also a Highlighted layout that highlights every third photo by default.
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 shows the same number of photos on desktop computers and mobile devices.
You can preview how the Instagram feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.
Smartphones and tablets typically have smaller screens and less processing power, so you may want to show fewer Instagram photos and videos on mobile devices.
To do this, just type a different number into the ‘Mobile’ field under ‘Number of Posts.’
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, click on ‘Save.’
Showing a Feed of Your Instagram Photos in WordPress
You can add the custom Instagram feed to your website using a block, widget, or shortcode.
If you’ve created more than one feed using Smash Balloon, then you’ll need to know the feed’s code if you’re going to use a widget or block.
To get this code, go to Instagram Feed » All Feeds and then look at thefeed=""
part of the shortcode. You’ll need to add this code to the block or widget, so make a note of it.
In the following image, we’ll need to usefeed="4"
If you want to embed the Instagram feed in a page or post, then you can use the Instagram Feed block.
Just open the page or post where you want to embed your custom Instagram feed. Then, click on the ‘+’ icon to add a new block and start typing ‘Instagram Feed.’
When the right block appears, click to add it to the page or post.
The block will show one of your Instagram feeds by default. If you want to show a different Smash Balloon feed, then find ‘Shortcode Settings’ in the right-hand menu.
Here, simply add thefeed=""
code and then click on ‘Apply Changes.’
If you’re happy with how the custom Instagram feed 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 an 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.
Next, simply drag the widget onto the area where you want to show the Instagram feed, such as the sidebar or similar section.
The widget will automatically show one of the feeds you created using Smash Balloon. If this isn’t the custom Instagram feed you just created, then type the feed’s code into the ‘Shortcode Settings’ box.
After that, click on ‘Apply Changes.’
You can now make the widget live by clicking on the ‘Update’ button. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.
Another option is embedding the Instagram feed on any page, post, or widget-ready area using a shortcode.
Simply go to Instagram Feed » All Feeds and copy the code in the ‘Shortcode’ column. You can now add this code to any Shortcode block.
For help placing the shortcode, please see our guide on how to add a shortcode.
Are you using a block-enabled theme? Then you can use the full-site editor to add the Instagram Feed block anywhere on your WordPress website.
In the dashboard, go to Appearance » Editor.
By default, the full-site editor will show the theme’s home template. If you want to add the custom Instagram feed to a different template, then click on the arrow next to ‘Home.’
You can then choose any design from the dropdown, such as the footer template.
After choosing a template, simply hover your mouse over the area where you want to add the custom Instagram feed.
Then, just click on the ‘+’ button.
Once you’ve done that, type in ‘Instagram Feed.’
When the right block appears, click to add it to the template.
As always, Smash Balloon will show a feed by default. You can change this feed by adding a shortcode following the same process described above.
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 can 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 label on 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.
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 how to create an email newsletter.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Roy says
FYI – Smash Balloon Instagram Feed Lite / Pro plugin the latest version 2022 does not have a customize section as seen / mentioned in this Post.
WPBeginner Support says
Thanks for pointing that out, we will be sure to update that section when we update the article!
Admin
Karin Mainwaring says
This could be a very handy feature.
Thank you so much.
WPBeginner Support says
You’re welcome
Admin
Karima says
Thanks!!! well done with detailed information.
WPBeginner Support says
You’re welcome
Admin
Anitha says
I am a new blogger who is not as tech savvy as I would love to be. This article was loaded with information that I can use. Thank you
WPBeginner Support says
Glad our article was helpful
Admin
James Burke says
I agree with your Plugin choice. I tried several Insta Feed plugins but they got messed up with Facebook / Instagram API changes. Smash Balloon’s worked perfectly. If only other plugins worked as well as these
WPBeginner Support says
Glad you’ve been enjoying Smash Balloon’s plugins
Admin
Foram says
Very informative and in detailed.
WPBeginner Support says
Glad you found our guide helpful
Admin
Darshan Singh says
Thanks for such a detailed description of WP website Instagram use, I was searching such informative articles from many days, You describe it in very detailed manner.
WPBeginner Support says
Glad you found our guide helpful
Admin