Creating a custom Instagram feed in your website

Nadejda
Creating a custom Instagram feed in your website

Why do you need an Instagram feed on your website?

Adding your IG feed to your website will provide fresh new content without a lot of hustle. This will also make readers visit your Instagram account and engage with it.

So, instead if adding the images manually to the site, you can just upload them to Instagram, making them appear on your website. You can also add a hashtag feed which will include photos by other users.

This is a fantastic opportunity to show customers who are using your products and providing social proof.

How to create a custom IG feed in your WordPress?

In order to create a custom Instagram feed, you would need the help of a plugin, more specifically Smash Balloon Instagram Feed.

Used by over 1 million active websites, today we will show you an example with the premium version of the plugin.

Install the plugin and go to Instagram Feed – Settings from your admin dashboard. Click on the License tab and enter your license key. This is located in the Smash Balloon account.

Click on Save Changes at the bottom after activation.

license key

Once activated, click on Configure and Connect an Instagram Account button.

Instagram Account button.

A pop up will appear, where you need to choose if you will be using a Business or Personal account.

Business or Personal account

If you choose a Personal account, only your feed photos will be visible. If you wish to add a hashtag feed, then use the Business account.

It’s quite simple to create a Business account and you can always switch back to a Personal one.

Click on Connect from your WP dashboard, and follow the steps to connect your account.

Next, you will see your account shown like this:

Connect from your WP dashboard

Note that, more than one account can be added.

Show your Instagram Feed in WordPress

If you want to keep your website looking updated with new content, it’s simply to add a feed of your most recent IG pictures.

Click on Add to Primary Feed, located next to the connected account:

Feed in WordPress

After that, you can simply open a page or post where you wish to add your feed. It can also be added to a sidebar widget.

We are now going to create a new page from Pages – Add New.

Click on the + symbol and add a new block, and choose Instagram Feed.

new block

This will instantly add your IG feed to your page, as well as a Follow button.

IG feed

With the classic editor, you would need to enter the code [instagram-feed] on the location you want the feed.

You can use this code of the IG Feed widget to add your posts in the sidebar, footer, etc. Click on Appearance – Widgets and drag the widget anywhere you like.

Appearance – Widgets

Customize your feed

By default, the photos will be displayed in a 4 -column grid. Users will be able to see 20 images from your account, with the Load More option available as well.

You have full control over these setting with the help of the Instagram Feed plugin.

To make changes to the feed style, go to Instagram Feed – Settings – Customize.

You can make changes to the height and width of the feed, change the layout, number of columns, images, etc.

If you wish to change the layout, just choose the style you want. You can also specify the number of columns you wish to split the photos into, as well as how many to be displayed.

Feed

Click on Save Changes.

This is how the feed with look in your website:

website

How to display a Mixed, Hashtag or Tagged IG Feed?

By default, the feed will show you the most recent posts on Instagram.

You might, however, want to show something different, like displaying posts with a specific hashtag. This is a way of showing photos from an event, for example.

You can choose this from Instagram Feed – Configure.

Go to Feed Type and choose a tagged feed or a hashtag.

tagged feed or a hashtag

How to create multiple IG feeds?

Do you want to show multiple IG feeds on your website? This is easy with a just a few touch ups.

Go to Instagram Feed – Settings, and choose Display your Feed.

A number of settings will be visible, which can be used within the [instagram-feed] shortcode.

If several accounts are connected, then use [instagram-feed type="user" username="example"] in order to specify the account.

You can also create feeds depending on the hashtags. In this case, use [instagram-feed type="hashtag" hashtag="#example"].

You can also create a feed, tagging a certain account. This is available only if your chosen user account is a Business profile.

With the help of shortcodes, you can create a mixed feed, combining all of the mentioned feed types.

If you choose to use the IG Feed block, you would not need a whole shortcode. Just add it to the block settings:

feed

Other Instagram settings in WordPress

There are some very common changes to the settings you could make, depending on the way you wish your photos to be displayed.

You might wish to remove the captions and leave only the photos.

shortcode

This could be achieved by adding showcaption="false" to the shortcode. The photos will then appear like this:

sidebar

If you are using a hashtag feed, you might want to filter posts. For example, avoid posts mentioned your competitors or rude words.

Just use excludewords="competitor, rude" In the shortcode, which will exclude posts with the words from the comma-separated words. You can change Rude and Competitor to any word you like.

To see all available settings from the plugin, go to Instagram Feed – Settings – Display your feed and go over the full list there.

Feed – Settings – Display

We hope today’s article was helpful, don’t hesitate to drop a comment bellow and tell us what you think!