How to Add Instagram Feed in WordPress (With ShareButton)

how to add instagram feed in wordpress

How to Add Instagram Feed in WordPress (With Share-Button) 1

Want an easy way to embed an Instagram feed in WordPress

By adding an Instagram feed to your website, you can make the content more interesting and engaging. It is a great way to promote your brand and improve the user experience on your site. 

In this tutorial, we’ll show you how to add Instagram feed in WordPress step by step. We’ll also show you how to add share and like buttons to increase social media engagement.

Before that, let’s learn the benefits of adding your Instagram feed to your site.

Why Add Instagram Feed in WordPress Site?

Instagram is undoubtedly one of the most popular social media platforms in the world. What started as a photo-sharing app, has now become the hub for marketers, influencers, and brands. 

With user-generated content such as photos, videos, and stories on Instagram, your brand becomes more visible and accessible to new people. And when you embed these Instagram feeds on your WordPress website, you can increase the interaction even more. 

For starters, you can use your Instagram content to reach a wider audience than just your Instagram followers.

It also builds trust among your website visitors and acts as social proof for your business. Seeing other people enjoying and loving your products makes new users want to try them out as well.

Because images and videos are more engaging than text content, it helps to increase the session time on your website. This means you can retain the attention of your audience for a longer period of time which is great for SEO too.

So, there are many advantages of embedding an Instagram feed on your site. It is a great marketing tool to grow your online presence and boost conversion rates. 

That said, let’s learn how you can add your Instagram feed to your WordPress site in a few simple steps. 

The Easiest Way to Add Instagram Feed in WordPress

Embedding an Instagram feed is usually a very technical task. You’ll need to embed code, connect your Instagram profile with an API key, and then use custom CSS to style the feed so that it looks good on your site.

We’re going to skip all that and use a plugin that manages everything for you. You don’t need to touch a line of code to showcase your feed on your website. 

For this tutorial, we’ll be using Instagram Feed Pro by Smash Balloon. 

smash balloon instagram feed homepage

SmashBalloon is the best social media feed plugin for WordPress. It offers 5 different plugins that allow you seamlessly integrate content from different social media platforms on your website.

These 5 plugins are:

  • Custom Facebook Feed: Add photos, posts, videos and broadcast live videos from Facebook on your WordPress site. 
  • Instagram Feed: Create Instagram photo feeds, hashtag feeds, and more on any WordPress page. There’s even an option to create shoppable feeds which is great for eCommerce sites.
  • Custom Twitter Feed: Show Twitter cards, tweets that mention your Twitter account, and allow users to scroll to view more tweets on your website. 
  • Feeds for YouTube: Showcase your YouTube videos, live streams, and favorite playlist on any post or page. 
  • Social Wall: Combine feeds from all Facebook, Twitter, Instagram, and YouTube on a single wall. 

With its Instagram Feed plugin, you can easily create custom Instagram feeds or use hashtags to display user-generated content from Instagram. It even adds the share button along with your Instagram photos.

Now usually to connect 2 apps like WordPress and Instagram, you’ll need to follow a very technical process. But with Smash Balloon, all of that is done behind the scenes so you won’t have to do anything more than click a few buttons to set up.

The plugin also offers many customization options to change the layout and design of your Instagram feeds. Not to mention, all the feeds you create with this plugin are fully responsive. 

And the best part is that as you create new posts on Instagram, this plugin will automatically fetch the content and update your WordPress feed.

Now that you know which plugin to use, we’ll show you how to embed your Instagram feed with ease. 

Step 1: Install and Activate Instagram Feed Pro 

First, you’ll need to sign up for a Smash Balloon account. Then, you can access the Instagram Feed Pro plugin file along with your license key on the dashboard. 

download instagram feed plugin

Now, you need to install the plugin on your WordPress site. If you want help with this, see our guide on how to install a WordPress plugin. 

After you install and activate the plugin, navigate to the Instagram Feed » License tab in your WordPress admin panel. Here, you need to enter your license and click on the Activate License button.

activate license

Once your account is verified, you can connect your Instagram account to your website. 

Step 2: Connect Your Instagram Account

Before you can display your Instagram feed on your site, you must connect your account first. 

For this, go to Instagram Feed » Settings tab and you’ll see the button to connect an Instagram account.

connect your instagram account

After you click on the button, you need to select the account type and log in to your account on the next screen. 

Choosing the Personal account lets you display feeds from your own Instagram account only.

Whereas, the Business account allows you to show feeds using hashtags, photo tags, and more filters. But, if you have a business Instagram account, you’ll need to log in with Facebook first. 

Here, we are choosing the account type as Personal and logging in with Instagram. 

select account type

In the next window, simply grant access to your Instagram account by clicking the “Allow” button. 

allow permissions

Then, you’ll be redirected back to your WordPress dashboard where you need to confirm your account by clicking on the Connect This Account button. 

connect account

Now, your account is successfully connected to your WordPress site. Scroll down to set up other options. 

In the Select a Feed Type section, there are 4 options:

  • User Account: Display a live feed from your Instagram account.
  • Hashtag: Show all the feeds with the chosen hashtags. 
  • Tagged: Add all the Instagram photos you are tagged in by other users.
  • Mixed: Display a single feed consisting of multiple feed types. 
set up feed type

Because we connected a Personal account, we’ll select the User Account option for this. But you can use the Hashtag, Tagged, and Mixed options if you are using a Business account.

Once you’re done with your account settings, click on the Save Changes button. 

Step 3: Configure Instagram Feed Settings

With the Instagram Feed plugin, you can choose how to display your Instagram photos and videos according to your preferences.

On the Settings page, click on the Customize tab on the top. Here, you can see tons of customization options. 

First, you have the General settings such as width, height, and background color of your Instagram feed. 

customization options

Next, there are layout options where you can choose from 4 different templates: Grid, Carousel, Masonry, and Highlight.

change instagram feed layout

With the Grid layout, your Instagram content is displayed in uniform square-shaped columns.

display instagram feed in website

Or, you can choose the Carousel layout to display your Instagram photos and videos in a slider. There are also options to add navigation arrows.

carousel layout view

Like this, you can experiment with other layouts like Masonry and Highlight as well. Other feed settings include the number of photos, columns, and image padding. 

If you scroll down further, you’ll see the customization options for Feed Header, Load More Button, and Follow button.

show header load more follow button

After you are done customizing the layout and settings for your feed, click on the Save Changes button. 

If you want to add and customize user-generated content with hashtags, go to the Settings » Configure tab and add your public hashtags. Save your settings after you’re done.

hastag feed type

Then, open the Moderation tab on the Customize page. Here are options to show or remove photos and videos from your Instagram feed using hashtags. 

Moreover, the plugin offers the option to moderate your user-generated feed from the front end of your site. On the Moderation section, choose the moderation type as Visual

moderate hastag feed

After you save your settings, you’ll be able to add or delete any photos or videos from your hashtag Instagram feed on the front end.

hashtag feed

The moderation option is only visible to the logged-in users with admin privileges. You’ll need to click on the Moderate Feed button to select the photos you want to hide or show. 

moderate hashtag feed

Make sure you save your changes once you’re happy with the design and layout of your Instagram feed.

Now, you’re ready to display your Instagram feed on your WordPress site. 

Step 4: Display Your Instagram Feed

Smash Balloon allows you to display your customized Instagram feed on your site with Shortcodes and the Gutenberg block.

First, we’ll show you how to add your feed using the Instagram Feed custom block on a page. In your wp-admin menu, open a new page by navigating to Pages » Add New option.

In the block editor, add a new block and search for the Instagram Feed block. When you select it, your feed is automatically inserted into the page editor.

insert instagram feed

Then, all you need to do is click on the Publish button to display the Instagram feed on your WordPress site. You can preview the Instagram feed and see how it looks on the front end of your site.

publish feed page

When users click on any individual image from your feed, they can see the Instagram button to view the post on Instagram.

Additionally, there is a Share button that allows users to share the post on different platforms such as Facebook, Twitter, Pinterest, and more.

how to add instagram share button in wordpress

Alternately, you can add your Instagram feed in WordPress using the plugin shortcodes. Navigate to the Instagram Feed » Settings tab and click on the Display Your Feed tab.

Here, you’ll find shortcodes options for displaying your feed. 

display options how to add instagram feed in wordpress

For this tutorial, we only need the [instagram-feed] shortcode. So, you can simply copy this shortcode and paste it to any page, post, or widget area (like a sidebar or footer).

shortcode embed

Bonus: Embed Instagram Posts in WordPress with oEmbeds

Another great way of embedding your Instagram feed in WordPress is by using oEmbeds. 

But sadly, WordPress has discontinued the support for Facebook and Instagram oEmbeds. So now you need an Access Token to make them work. 

The good news is that Smash Balloon gives you the option to use oEmbeds without having to manually set it up. 

You only need to connect your Facebook account. Since Instagram is a part of Facebook, you don’t need to set up your Instagram account for it. 

To set up oEmbed, navigate to the Instagram Feed » oEmbeds tab on your WordPress dashboard. Here, click on Enable Instagram oEmbeds button.

instagram oembed embed instagram photos in wordpress

Then, you need to click on the Connect to Facebook button. On the next screen, you have to select the page that you want to add.

connect to facebook how to add instagram feed in wordpress

Next, click on the Done button to finalize your connection.

give permissions facebook

Now, you can easily embed Instagram feed in WordPress with oEmbeds. To do this, go to your Instagram dashboard and open the post you want to insert, and click on the three dots in the top right corner. 

instagram post how to add instagram feed in wordpress

Then, select the Copy Link option from the menu.

copy post link how to add instagram feed in wordpress

Now, head back to your WordPress dashboard and open the page or post where you want to add the image. 

With Smash Balloon, you can just paste the link on the text editor and it will automatically embed your Instagram post there. You can go ahead and publish the post on your website. 

oembeds link

Congrats! You have successfully learned how to embed your Instagram feed on WordPress. 

With the Instagram Feed plugin by Smash Balloon, you can add Instagram feed in WordPress in a few clicks. This lets you reach more people than Instagram users.

The plugin gives you the freedom to create and customize your own Instagram feed. 

Also, you can edit the layout and choose which posts to include or hide with ease.

Now that you know how easy it is to use Smash Balloon, you can also learn how to show your Facebook feed in WordPress.

And that’s all! We hope this tutorial helped you learn how to easily embed an Instagram feed in WordPress with share buttons.

For your next steps, you can check these resources out:

These posts will help you automate your social media integration and grow your email lists. The last one will help you create an Instagram link in bio page to increase traffic on your site.

Keep reading the article at IsItWP – Free WordPress Theme Detector. The article was originally written by Editorial Team on 2022-04-14 05:01:00.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

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

Show Your ❤️ Love! Like Us
Scroll to Top