How to Create a Custom Instagram Photo Feed in WordPress

Recently, one of our readers asked if it was possible to add a customized Instagram photo feed to their site?

Specifically, they wanted to customize the Instagram photo feed to only show select photos instead of all photos from their profile.

In this article, we’re going to show you exactly how to create a custom Instagram photo feed in WordPress.

Why Include an Instagram Feed on Your WordPress Site?

Adding an Instagram feed on your WordPress site lets you add fresh content without a lot of work. It also encourages readers to follow you on Instagram.

Instead ofΒ adding photos manuallyΒ to your site, you can simply upload them to Instagram, and they’ll appear on your website. You can also include other people’s photos by using a hashtag feed.

This could be a great way to show people using your products, providing valuable social proof that could help youΒ make more money online.

How to Create a Custom Instagram Photo Feed in WordPress

To set up a custom Instagram photo feed on your site, 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.

This is the premium version of theΒ free Instagram feed pluginΒ which is used by over 1 million websites.

After you’ve installed the plugin, go toΒ Instagram Feed Β» SettingsΒ page in your WordPress admin and click the License tab to enter your license key. You can find this in your Smash Balloon account.

Don’t forget to click the β€˜Save Changes’ button at the bottom after activating your license key.

Once you’ve activated your license, go to the β€˜Configure’ tab and click the β€˜Connect an Instagram Account’ button.

You’ll then see a popup asking you to choose whether you’re using a Personal or Business Instagram profile.

If you simply want to display a feed of your photos, you can use a Personal Instagram account. However, if you want to show a hashtag feed, you’ll need a Business Instagram account.

Tip:Β Don’t have a Business Account? To convert your Personal Instagram account into a Business Account, you can followΒ Smash Balloon’s step by step instructions.

It’s free to create a Business Account with Instagram. You can switch back at any time in the Instagram app.

When you click the β€˜Connect’ button in the WordPress dashboard, you simply need to follow the prompts and connect your account.

After that, you’ll see your account listed next to the β€˜Instagram Accounts’ like this:

Note:Β You can connect more than one account. Later in this tutorial, we’ll look at how to show several different Instagram feeds on your site.

Showing a Feed of Your Instagram Photos in WordPress

If you want to keep your WordPress site looking fresh and up to date, it’s easy to add a feed of your latest Instagram photos. We’ll take a look at the basic method first, then cover how to customize your feed.

First, click the β€˜Add to Primary Feed’ button next to your connected Instagram account:

After that, you can open up a post or page where you’re going to add your feed. Alternatively if you prefer, you can add it in a sidebar widget.

We’re going to create a new page underΒ Pages Β» Add NewΒ for our feed.

Click the (+) symbol to add a new block, then select the β€˜Instagram Feed’ block from the Widgets section:

Your Instagram feed will be instantly added to your page, with a Follow button:

If you are usingΒ the classic editor, then simply enter the shortcodeΒ [instagram-feed]Β where you want your feed.

You can use the shortcode or the Instagram Feed widget to add your Instagram posts in your sidebar or footer, too. Just go toΒ Appearance Β» WidgetsΒ and drag the Instagram Feed widget to wherever you like.

Customizing Your Instagram Feed Style in WordPress

By default, your Instagram photos will be displayed in a four column grid. To begin with, users will see 20 photos from your account, but they can click β€˜Load More’ to see additional photos.

The Instagram Feed plugin gives you full control over these settings.

To change how your Instagram Feed looks, go toΒ Instagram Feed Β» Settings Β» Customize.

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 the option you want. We’re going to use a Highlight layout for our Instagram photos, with every 3rd photo highlighted.

You can also choose how many columns to split the photos into, and how many to display to begin with. We’ve chosen to have 6 photos in 3 columns.

Make sure you click the β€˜Save Changes’ button at the bottom of the screen after making any changes.

Here’s how the Instagram feed now looks on our website:

Displaying a Hashtag, Tagged, or Mixed Instagram Feed in WordPress

Instagram Feed defaults to showing the most recent posts from your connected Instagram account.

In some cases, you might want to show something different. For instance, you might want to display Instagram posts from any account so long as they use a specific hashtag. This could be a great way to showcase photos from anΒ event or conference.

You can change your feed type by going toΒ Instagram Feed Β» Configure. Under Feed Type, you can switch to a hashtag or tagged feed. You can click the (?) icon next to an option for more information.

We’re going to switch to a hashtag feed by using the Public Hashtag option. We’ll order it by most recent posts:

Note:Β You can’t create a mixed feed here. A mixed feed is one that combines different types, such as photos from a user account plus photos from a hashtag. You can follow the instructions in the next part of the tutorial to create a feed like that.

Here’s how the feed now looks on our site:

Creating Multiple Instagram Feeds in WordPress
Β 
What if you want to include several different Instagram feeds on your WordPress site? That’s possible as well with few simple configurations.
Β 
First, go to Instagram Feed Β» Settings and click on the β€˜Display Your Feed’ tab.
Β 
You’ll see a number of different settings that you can use within the [instagram-feed] shortcode.
Β 
Tip: If you only want to create one feed for your site, then you can change these settings under the Configure tab, as shown above.
Β 
If you have several user accounts connected, you can use [instagram-feed type=”user” username=”pluginthemehub”] to specify an account. Change pluginthemehub to the username you want.
Β 
You can also choose to create feeds based on hashtags here. In this case, you’ll need to use [instagram-feed type=”hashtag” hashtag=”#pluginthemehub”] where #pluginthemehub is your chosen hashtag.
Β 
Another option is to create a feed that has tagged a specific user account. This option is only available if your connected Instagram account in the plugin settings is a business account.
Β 
You can even use shortcodes to create a mixed feed that combines different feed types, such as your Instagram user account plus all photos with a specific hashtag.
Β 
If you’re using the Instagram Feed block in the WordPress visual editor, you don’t need to create the whole shortcode. You can simply add your shortcode settings in the block’s settings:

Make sure you click the β€˜Apply Changes’ button after making changes here.

Other Popular Instagram Feed Settings in WordPress

You might be perfectly happy with the default display of your photos, as Instagram Feed 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 instance, you might want to display just the photos without the captions. This is especially helpful if you’re adding the photos in a fairly narrow sidebar:

You can switch the captions off by addingΒ showcaption="false"Β to your shortcode. Then, your photos will display like this:

You may want to filter posts if you’re using a hashtag feed. For instance, you might want to avoid posts that mention one of your competitors or posts that use rude words in the caption.

You can useΒ excludewords="competitor, rude"Β in your shortcode. This will exclude any posts that use any of the words within the list of comma-separated words. Change β€œcompetitor” and β€œrude” to whatever words you want to exclude.

Another option you may want to use is to change the text of the Load More button. You can do this addingΒ buttontext="See More Photos"Β to your shortcode. Simply replace β€œSee More Photos” with the text you want to use.

There are lots of other settings you can use.Β Smash Balloon’s Instagram Feed pluginΒ lets you tweak everything about how your Instagram photos display on your site.

If you want to see all the possible settings, just go toΒ Instagram Feed Β» Settings Β» Display Your FeedΒ to get the full list:

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.

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.

Leave a Reply

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

Pin It on Pinterest

Add address