DanbiHost

How to create a custom Instagram photo feed in WordPress

How to Create a Custom Instagram Photo Feed in WordPress


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 to create a custom Instagram photo 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 create a feed that updates automatically every time you post new photos to Instagram. You can even show other people’s photos on your site by creating a hashtag feed.

In the following image, you can see an example of a brand that uses a custom Instagram feed to show user-generated content.

An example of user-generated Instagram 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 to your site is by using the Smash Balloon Instagram Feed plugin. It is the best Instagram plugin for WordPress that allows you to display content from your Instagram account in an instant.

It’s also the easiest way to fix the Facebook and Instagram oEmbed issue in WordPress.

We will cover several steps in our tutorial, and you can use the quick links below to jump to the different sections:

How to Connect an Instagram Account to WordPress

First, you will 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 are using the premium version of Smash Balloon, as it allows you to create a completely custom Instagram feed. with hashtag feeds and shoppable images. If you are just getting started or have a small 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.

Adding a license to Smash Balloon's Instagram plugin

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 are ready to create a custom Instagram feed. To get started, select Instagram Feed » All Feeds and then click on the ‘Add New’ button.

Creating an Instagram feed for WordPress

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’.

How to add an Instagram timeline feed to WordPress

If you just want to display your Instagram photos, then you can use a Personal Instagram account. However, you will 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 will 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.

Adding Instagram hashtags to your WordPress website

Once you have done that, just click on ‘Next’.

Do you want to show posts that your account is tagged in? You will need to select ‘Tagged Posts’ instead and then click on ‘Next’.

How to show tagged posts in a custom Instagram feed

No matter what kind of feed you are creating, you will need to connect WordPress to your Instagram account.

To get started, click on the ‘Add Source’ button.

Creating a custom Instagram photo feed in WordPress

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.

Choose between a personal and business Instagram account

After choosing ‘Personal’ or ‘Business’, just 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’.

Connecting to an Instagram account

After that, check the box next to the Facebook page that’s linked to the Instagram account you want to use.

With that done, you need to click on the ‘Next’ button.

Connecting a Facebook page to WordPress

You will 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 appear on your WordPress blog or website.

With that in mind, we recommend leaving all the switches enabled. When you are happy with how the feed is set up, go ahead and click on ‘Done’.

Giving Smash Balloon access to your Instagram account

You will 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’.

How to connect Instagram to WordPress using Smash Balloon

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’.

Creating a new Instagram feed in WordPress

The plugin will now create an Instagram photo feed that you can add to any page, post, or widget-ready area.

How to Customize Your Instagram Photo Feed

By default, Smash Balloon will open your feed in its editor, ready for you to customize.

On the right, you will see a preview of your Instagram photo feed. On the left-hand side are all the settings you can use to customize the social media feed.

How to create a custom Instagram feed with Smash Balloon

Most of these settings are self-explanatory, but we will quickly cover some key areas.

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.

Switching to a different Instagram layout

There is also a Highlighted layout that highlights every third photo by default.

As you click on the different options, the live preview will automatically update to show the new layout. This makes it easy to try different designs 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.

Previewing an Instagram feed on desktop, mobile, and tablet

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’.

How to show a different number of Instagram posts on mobile

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 now type a new number into the Desktop, Tablet, or Mobile fields.

Showing a different number of columns in a custom Instagram feed

To make sure your Instagram feed looks good on mobile devices, it’s smart to view the mobile version of your WordPress website.

After making your changes, click on the ‘Customize’ link. This will take you back to the main Smash Balloon editor, ready for you to explore the next settings screen, which is ‘Color Scheme’.

Changing the Instagram feed color scheme

By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but it also has ‘Light’ and ‘Dark’ themes that you may want to use for your Instagram feed.

You can even create your own color scheme by selecting ‘Custom’ and then using the settings to change the link color, background color, text color in WordPress, and more.

Changing the Instagram color scheme

By default, Smash Balloon adds a header to the Instagram feed, which is your profile picture and the name of your page. This can provide some useful extra context so that visitors understand where these images are coming from.

To change how this section looks, return to the main settings screen and then select ‘Header’.

Adding a header to a custom Instagram photo feed

On this screen, you can change the background color, show your Instagram bio, change the header size, and more.

By default, the header includes your Instagram profile picture. However, you may want to show a different image, such as your site’s custom logo.

To change the profile picture, click on ‘Add Image’ under ‘Show custom avatar’. You can then either choose an image from the WordPress media library or upload a new photo.

Adding a custom Instagram avatar to your WordPress website

You can also add a different bio. For example, you might add a call to action that encourages people to visit your Instagram page.

To create a unique Instagram bio, simply type into the ‘Add custom bio’ box.

Adding a custom Instagram bio to your WordPress website

When you are happy with how the header looks, click on the ‘Customize’ link to go back to the main settings screen.

Now, you need to click on ‘Posts’.

Creating a custom Instagram photo feed in WordPress

To start, you can switch between boxed and regular layouts for the individual posts inside the Instagram feed.

To do this, select ‘Post Style’.

Customizing an embedded Instagram photo feed

You can now click to select the layout you want to use.

If you select ‘Boxed’, then you can change the background color, add a box shadow, and increase the border radius to create curved corners.

Adding a box style to an embedded social media feed

When you are happy with your changes, just click on the ‘Posts’ link to return to the previous Smash Balloon screen.

This time, select ‘Images and Videos’.

Changing the resolution of an embedded Instagram feed

Smash Balloon automatically analyzes your Instagram photos and shows them at the best resolution. We recommend using these default settings, as they are designed to boost your WordPress speed and performance. However, you can make the Instagram images bigger or smaller if you need to.

To change the image size, simply open the ‘Resolution’ dropdown and choose one of the default WordPress image sizes from the list.

Changing the resolution for an embedded Instagram feed

Once again, click on the ‘Posts’ link to return to the previous screen.

This time, select ‘Caption’. On the next screen, you can show the Instagram caption next to each image by clicking on the ‘Enable’ slider.

Showing Instagram captions on your WordPress website

If you add Instagram captions to your feed, then you can change the text size and color and set a maximum text length.

With that done, just click on the ‘Posts’ link to return to the previous screen.

Showing social media captions on a website or blog

The next setting is ‘Like and Comment Summary’.

Here, you can add or hide the total number of likes and comments on each image. If your Instagram posts get a good amount of engagement, then these numbers can encourage people to visit your Instagram page or start following you on social media.

Showing social media comments and likes on a website or blog

As always, you need to click on ‘Posts’ to return to the earlier screen.

The final option is ‘Hover State’, which is the overlay that Smash Balloon adds to a post when you hover your mouse over it.

Customizing the hover state for an embedded social media photo feed

Here, you can choose the information that Smash Balloon shows when someone hovers over a post using the settings under ‘Information to display’.

You can also change the color of the hover overlay.

Adding a custom Instagram feed to WordPress

When you are happy with the changes you have made, click on the ‘Customize’ link.

This takes you back to the main Smash Balloon settings page, where you can click on ‘Load More Button’.

Adding a load more button to a custom Instagram photo feed in WordPress

Here, you can help the ‘Load More’ button stand out by changing its background color, text color, and hover state.

You can also try adding your own messaging to the button by typing into the ‘Text’ field.

Customizing the load more button on a custom Instagram photo feed

While we recommend leaving this button enabled, you can remove it. For example, you might encourage people to visit your Instagram by limiting the number of photos they can see on your site.

To remove the button, simply toggle off the ‘Enable’ slider so that it turns grey.

Removing the 'Load More' button on a custom Instagram photo feed

If visitors like what they see, they may decide to subscribe using the ‘Follow on Instagram’ button that appears below the embedded feed.

Since it’s such an important button, you might want to add some custom styling to help it stand out. To do this, select ‘Customize’ to return to the main settings screen. Then, select ‘Follow Button’ in the left-hand menu.

Here, you can change the button’s background color, hover state, and text color.

Customizing the Instagram follow button

By default, the button shows a ‘Follow on Instagram’ label.

You can replace this with your own messaging by typing into the ‘Text’ field.

Adding your own messaging to an Instagram CTA button

Smash Balloon comes with a built-in lightbox that allows visitors to open your Instagram photos and videos without leaving your website.

To configure this feature, go back to the main Smash Balloon settings screen and then click on ‘Lightbox’.

The Smash Balloon lightbox feature

Here, you can change how many comments Smash Balloon will show in the lightbox.

If you don’t want to use the lightbox feature, then you can disable it using the ‘Enable’ slider.

Enabling the WordPress lightbox feature

When you are happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes.

You are now ready to add the Instagram feed to your WordPress website.

Showing a Feed of Your Instagram Photos in WordPress

You can add the custom Instagram feed to your website using a block, a widget, or a shortcode.

If you have created more than one feed using Smash Balloon, then you will need to know the feed’s code to use a widget or block.

To get this code, you must go to Instagram Feed » All Feeds and then copy the text under ‘Shortcode.’

In the following image, we will need to use instagram-feed feed=4.

Getting a shortcode for your custom Instagram feed

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.

Adding the Feeds for Instagram block to your WordPress website

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 the shortcode and then click on ‘Apply Changes.’

Adding a social media feed to WordPress using shortcode

If you are 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.

Adding an Instagram feed to a widget-ready area

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.

Adding the Instagram feed widget to a WordPress sidebar

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.

An example of an embedded Instagram feed

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.

How to add an Instagram feed to WordPress using the full-site editor

By default, the full-site editor will show the theme’s home template.

If you want to add the Instagram feed to a different area, then click on either ‘Template’ or ‘Template Parts’.

Adding an Instagram feed to a WordPress template

The editor will now show a list of all the template parts that make up your WordPress theme.

Simply click on the template where you want to show the Instagram feed.

A list of templates, in the WordPress full-site editor (FSE)

WordPress will now show a preview of the design.

To edit this template, go ahead and click on the small pencil icon.

Editing the WordPress homepage template using the full-site editor

After choosing a template, just hover your mouse over the area where you want to add the Instagram photo feed.

Then, click on the blue ‘+’ button.

How to add a block to a template using full-site editor (FSE)

Once you have done that, you need to type in ‘Instagram Feed’.

When the right block appears, click to add it to the template.

Adding a Instagram feeds block using the full-site editor (FSE)

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.

Bonus: Let Customers Buy Your Products Through Instagram

If you have an online store, then you can also use your custom Instagram feed to easily sell your products.

Smash Balloon Instagram Feed Pro allows you to tag your Instagram images with product links so that users are able to click on them and buy them directly instead of navigating through your product pages. This can increase sales and boost profits in your store.

How to add a shoppable link to an Instagram post

For more details, you can see our complete guide on how to add Instagram shoppable images in WordPress.

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 learn 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.



Source link