Home WordPress How To Add Instagram Feed to Your WordPress Website (For Gutenberg, Divi & Elementor)

How To Add Instagram Feed to Your WordPress Website (For Gutenberg, Divi & Elementor)

by stewart
How To Add Instagram Feed to Your WordPress Website - Stewart Gauld

By learning how to add your Instagram feed to WordPress, you’ll be able to showcase your images and videos directly from Instagram on your website.

You can boost your sales, conversions, and brand awareness through this fantastic activity of cross-promotion.

Not to mention, it will dramatically improve your audience engagement and reach.

How to Embed Instagram Feed on your WordPress Website?

In this brief tutorial, we’re going to explain how to embed your Instagram feed on WordPress (for Elementor, Divi, and Gutenberg).

Step 1: Install the WordPress Instagram Feed Plugin

Step 1

In the first step, we need to install an Instagram feed WordPress plugin called Smash Balloon.

To do that:

  • Log in to your WordPress dashboard
  • Hit ‘Plugin’ on the navigation menu and select ‘Add New’
  • Type in ‘Smash Balloon’ in the search bar
  • Locate the ‘Smash Balloon Social Photo Feed’ by Smash Balloon with over a million active installations and 3000+ reviews.
  • Before you install ANY plugins, it’s best practice to backup your website.
  • Hit ‘Install Now’ and ‘Activate’

Read More: How To Backup Your WordPress Website

Step 2: Connect Your Instagram Account

Step 2 Once your plugin has been activated, follow the steps below:

  • Click on ‘Instagram Feed’ on the navigation menu
  • Hit ‘Settings’ and select ‘Connect an Instagram Account’
  • Make sure ‘Personal’ is selected under ‘Account Type’
  • Click on ‘Login with Instagram’ and hit ‘Allow’
  • Select ‘Connect This Account’

Your Instagram account has been successfully connected with Smash Balloon.

Step 3: Configure the Settings

Configure the Settings

In the WordPress Instagram feed plugin settings, scroll down until you find ‘Check for new posts’.

We recommend keeping ‘When the page loads’ selected.

After that, choose a time frame for loading your posts. Remember to save your changes.

Step 4: Customize Your Instagram Feed

Customize Your Instagram Feed Next to ‘Configure’, we have the ‘Customize’ tab.

Click on it.

Here, you can customize the width, height, and background color of your Instagram feed.

Moreover, you can also choose a layout (we recommend keeping the grid view selected since it looks more professional), the number of photos, columns, and padding around images.

Under ‘Sort Photos By’, you can go ahead and select ‘Newest to oldest’.

If you scroll further down to ‘Header’, you can keep the ‘Show Feed Header’ check box selected (recommended).

Here, you can also choose to show your bio text on your WordPress Instagram feed.

If you prefer, you may add a custom bio text instead.

Below, you may change the header text color as well.

Remember, you can change these settings at any time later on.

Save your changes.

Step 5: Display Your Feed

Display Your Feed Next to ‘Customize’, we have ‘Display Your Feed’.

This is where you can copy your Instagram feed code.

To do that simply Right-click the code and copy the code.

To add the Instagram feed to your WordPress website, you need to embed this Shortcode directly onto your website pages.

You can also display multiple feeds by customizing the Shortcode based on the number of photos and columns.

Now, let’s understand how to paste this Shortcode into the Gutenberg editor as well as Divi, and Elementor!

Adding Your Instagram Feed into Gutenberg

Adding Your Instagram Feed into Gutenberg

Listed below are the required steps:

  • In the Gutenberg editor, click on the add button (the ‘+’ icon in the upper-left corner)
  • Type in ‘short’ in the search bar and select ‘Shortcode’ from the suggestions
  • In the Shortcode block that you have just added, right-click and select ‘Paste’
  • Click on ‘Publish’ in the upper-right corner and hit ‘Publish’ again
  • Select ‘View Page’ to see how the Instagram feed looks like on your website page
  • Your Instagram feed will now be displayed. Click ‘Load more’ to see more images from your feed
  • You’ll also notice the ‘Follow on Instagram’ button next to ‘Load more’

Adding Your Instagram Feed into Divi

Adding Your Instagram Feed into Divi

To add your Instagram feed using Divi’s visual builder, you need to follow the below steps:

  • Inside Divi’s visual builder, find the section and row where you want the Instagram feed to be displayed.
  • Now, to add a module, select the ‘+’ icon and then pick the text module
  • Under ‘Text Settings’, click ‘Text’ next to ‘Visual’
  • Replace the default text with your Shortcode (refer to the screengrab)
  • Click ‘Save’

You’ve successfully added your Instagram feed!

Adding Your Instagram Feed into Elementor

Adding Your Instagram Feed into Elementor

To add your Instagram feed in Elementor:

  • Enable the Elementor page builder
  • Locate your Shortcode through the search bar on your left (just like Gutenberg)
  • Drag and drop the Shortcode on your website page where you want it
  • Under ‘Shortcode’ (on your left), press right-click and select ‘Paste’
  • Click ‘Update’
  • View your changes to see the Instagram feed

Instagram Feed WordPress Plugin Tutorial (Video Tutorial)

The Instagram feed WordPress plugin called Smash Balloon allows you to seamlessly embed your Instagram social media feed directly onto your website pages. And you can do this completely for free.

Check out our video tutorial to ensure you don’t miss any steps! Enjoy!

You may also like

Leave a Comment

three + 10 =