Create A Custom Instagram Feed On Your WordPress Website

SkyStra
Feb 15, 2021

Using an Instagram feed on your website is an excellent way to showcase your products, add fresh content, and engage with your website visitors. 

Many plugins can embed photos from your Instagram profile to your WordPress website. With that comes a caveat wherein you can’t usually customize anything, as the process is automated, so it shows all photos from your account.

We’ve got you covered though.

This article will teach you how to add a custom Instagram feed to your WordPress website.

Let’s start!

Preparation

Install Plugin (SmashBalloon)

This article will use SmashBalloon’s Instagram Feed plugin to add photos from Instagram to our WordPress website. It’s a premium, well-written plugin that allows you to customize almost any aspect of the custom Instagram feed you need to add.

SmashBallon also has a free version of this plugin here, but we need the premium version to use hashtags and other customization options.

Sign up for the account, purchase the plugin and download it in ZIP format to your computer.

Log in to your WordPress Dashboard, head to Plugins > Add New, and click the Upload Plugin button on top:

Click Browse, select the plugin’s ZIP file on your computer, and click the Install Now button to install the plugin on your website:

Once installed, click Activate to activate the plugin, then head to Instagram Feed > Settings > License tab, and enter your license key (you can find the license key in your SmashBalloon account). Make sure to click Save Changes to activate your license key.

Connect Your Instagram Account

Once the plugin is installed, we need to link it with our Instagram account. 

Head to Instagram Feed > Settings > Configure tab, and click the Connect an Instagram Account button. You’ll see a pop-up that asks you if you want to link to a personal or a business Instagram account. A Personal account allows you to display a feed of your photos, while a Business account allows you to show pictures from hashtags. 

If you don’t have a Business account, we recommend converting your account to it as it’s completely free, and you can switch it back anytime you want. 

In the pop-up, select Business and click Connect to proceed further. The process is straightforward, so follow the prompts to connect your account.

Once completed, you will be able to see your Instagram account listed on the main Configure page of the plugin’s settings. If you have more than one Instagram account – you can go ahead and connect all of them to the plugin.

Add Your Instagram Feed

Basic Feed

Let’s add a basic feed first! Click the Add to Primary Feed button next to your account in the Instagram Feed > Settings > Configure tab. 

You can now add the photos to an existing post or a page, create a new post or a page, or show it in a widget.

To add it to the new page, head to Pages > Add New, fill in the title, category, and tags, and then click the + symbol to add a new block via Gutenberg editor. Use the search bar or find the Widgets section and select the Instagram Feed block. 

That’s it! The plugin will automatically add your Instagram feed to your page with a Follow button.

If you’re still using the Classic WordPress editor, you can add your feed by pasting the following shortcode into the body:

[instagram-feed]

You can also add the feed to your website widget area. Head to Appearance > Widgets, and drag the Instagram Feed widget to any sidebar you want.

Customize Your Instagram Feed

The plugin displays your photos in a four-column grid by default, and visitors see 20 photos from your account, but they can click the Load More button to see more photos.

To change your feed’s look, head to Instagram Feed > Settings > Customize. Here, you can choose the predefined layout and then adjust any options to customize your feed (width, height, number of photos, etc.).

It’s straightforward – select the layout, insert the number of photos you want to display and select the number of columns you want to see.

Hashtag Feed

Your Instagram Feed shows the most recent photos from the connected Instagram account by default. If you want to spice things up, you can show Instagram posts from any account that uses a specific hashtag. This is particularly useful if you want to showcase pictures from a conference, exhibition, or event. 

Head to Instagram Feed > Settings > Configure tab, and select the Public Hashtag option under the Feed Type section. Fill in the hashtag you want to pull photos from and choose the order of posts (top or most recent).

That’s it! Your feed will now show all the photos used with a specific hashtag you’ve chosen previously.

Multiple Feeds

The plugin also allows you to add multiple different Instagram feeds to your website. Head to Instagram Feed > Settings > Display Your Feed tab, and you’ll find various options you can use in the [instagram-feed] shortcode.

For example, if you have multiple Instagram accounts connected to the plugin, you can specify the account with the following shortcode:

[instagram-feed type="user" username="Skystra"]

(replace Skystra with your Instagram username)

If you want to create a feed with a specific hashtag, you can use the following shortcode:

[instagram-feed type="hashtag" hashtag="#Skystra"]

(replace #Skystra with the desired hashtag)

The plugin offers endless possibilities. You can showcase photos from a tagged user account, create mixed feeds (all pictures from a specific Instagram profile + all images with a particular hashtag), and so on. 

If you’re using the Gutenberg editor on your site, you don’t have to create the entire shortcode – simply add the desired shortcode in the Instagram Feed block settings.

Display Options

The plugin does a good job showing your photos by default, but we recommend tweaking some display options depending on how you display your feeds. 

For example, if your feed is in a narrow area (like a widget, for example), you might want to turn the captions (photo description) off to offer a clean look. 

To do this, add showcaption=”false” to your shortcode. 

If you want to filter posts in a hashtagged feed (the feed you can’t control), you can use excludewords=”” in the shortcode. For example, if you don’t want to include photos that have specific words like rude or sex, you would do it like this:

excludewords="rude, sex"

Another handy option allows you to change the Load More text of your Instagram feed. Add the following option to your shortcode:

buttontext="See More Images"

(replace See More Images with the desired text)

You can see the list of all available options on the Instagram Feed > Settings > Display Your Feed tab.