Cyber Monday Sale Ends in

0Days

0Hours

0Minutes

0Seconds

Buy Lifetime Membership
×
Add Instagram feed to your Divi website

Aug 2, 2022 | Divi Resources

How to Add the Instagram Feed to Your Divi Website

Does your client want to add an Instagram Feed to Divi? Or is it only you who wants to improve the website’s engagement by setting up a live Instagram Feed on the website?

In either case, it’s a smart move to leverage Instagram’s influence on your customers or users. 

Nevertheless, what’s essential is how to embed an Instagram Feed. And if you don’t know how to add Instagram Feed to Divi, then you’re about to unravel that mystery. Because this blog post is all about Instagram Feed and how to add it to a Divi site. 

And to achieve that, we’ll try different methods – including both using a plugin and without. But before we move to the steps to add Instagram Feed to Divi, let’s discuss why it’s crucial. 

In addition, we’ll also look at some Divi Instagram Footers at the end of the post. 

The Importance of Adding an Instagram Feed to Your Website


Based on Statista’s report, it’s found that around 1.28 billion user accounts are active on Instagram, which makes it about 28 percent of the world’s internet users. Furthermore, it’s projected that this will reach around 1.44 billion users by 2025. This simply means that there’s no downtime for Instagram in the near future. 

Number of Instagram users statistics

And if your company or client used to post on Instagram, then setting up a live Instagram Feed on the website will definitely prove to be useful. Why? Because Instagram Feeds can help you

  • Boost User Sessions and Engagement on the Website — Unlike an Instagram RSS feed, the live feed showcases all the images of Instagram at once, creating a beautiful image gallery. And galleries always catch users’ attention. When something is attentive, users will spend time, and when they spend time, it means your user session has improved.

  • Present Your Website’s or Business’ Credibility — You can use Instagram to post client testimonials. And by embedding the Instagram Feed into Divi, you can easily show them on the site. Thus, allowing you to present your authenticity in a much more creative way.

  • Increase Followers for the Instagram Account & Boost Sales —  When you add Instagram Feed to Divi, you provide users with a way to learn more about your products or services. So, they follow you without a doubt. And when you post something new on Instagram, and if they like it – they’ll definitely get it. 

Now, as you’ve looked at the benefits of adding an Instagram Feed, let’s move to our next section on how to add Instagram Feed to Divi.

Methods to Add an Instagram Feed to Your Divi Website


To add Instagram Feed to Divi, there are primarily two methods. One involves using a WordPress Instagram plugin. So, another can help you embed Instagram Feed using a simple code generated from Instagram itself. 

However, if you’re a non-techie user or don’t want to follow multiple complex steps. Plus, if you need more options to customize or use the Instagram Feed in a good way, then using a plugin is by far the best option.

Therefore, start with the following WordPress Instagram Plugin to add Instagram Feed to Divi. And if that’s what you don’t need, you can consider the 2nd method. 

Or, you can try the new Divi Instagram Footers if you need Instagram in the Footers.

Now, let’s move to our methods.

Method (1) – How to Add an Instagram Feed to Divi With a Plugin


The fastest and easiest way to add Instagram Feed to Divi is using a WordPress Instagram plugin. Therefore, we will use the popular Smash Balloon Social Photo Feed plugin by Smash Ballon. For setting up a live Instagram Feed on a Divi website, there’s nothing better than Smash Ballon.

Smash Balloon social photo feed for Divi Instagram feed

It’s a feature-rich WordPress Instagram plugin you can use for free to add an Instagram Feed to Divi. And not only adds the feed, but it also provides the intuitive options to customize that as well. So, you can use your Instagram Feed much more extensively. 

The options this plugin provides you are:-

  • Automatically powering your Instagram oEmbeds.
  • Showcasing images from multiple Instagram accounts in a single or separate feed.
  • Shortcode support.
  • Instagram Feed’s images size control.
  • Load More button.
  • Follow on Instagram button.
  • Add Custom CSS and JavaScript.
  • And much more.

With these options, adding and displaying Instagram Feed on a Divi website becomes even more exciting. Not only can you add the feed, but you can also enhance its working and get more benefits out of using it.

Now, with all these aspects in mind, let’s embed Instagram Feed to Divi in no time. 

Step 1 – Install Smash Balloon Social Photo Feed Plugin in Divi to Add Instagram Feed

From your WordPress Dashboard, go to the Plugins → Add New. Then search for Smash Balloon Social Photo Feed and click Install Now for the following plugin.

Installing Smash Balloon Social Photo Feed Plugin

Once the plugin is installed, click Activate

Activate Smash Balloon social photo feed plugin

Step 2 – Create Your Instagram Feed for Divi

Once the plugin is activated, you’ll find a new menu on your Dashboard sidebar as Instagram Feed.

Divi Instagram Feed Plugin

Now, to create your Instagram Feed for Divi, click All Feeds and then in the Smash Ballon Dashboard, click the Add New button. 

Creating an Instagram Feed for Divi

Once you do that, you get a new window asking you to create an Instagram User Timeline. Also, this is the only option you get when using the free version of the plugin. You can try the premium version to access other options like Hashtag, Tagged Posts, and Social Wall. 

Choosing Instagram User Timeline for Divi

Otherwise, click Next

Step 3 – Connect the Instagram Account to Smash Balloon

Upon clicking next, it’ll ask you to Add Source. 

Adding source to Add Instagram Feed to Divi

Now, the source is simply the Instagram Account you want to use to add a Divi Instagram Feed. Therefore, click the Add Source button, which will redirect you to a new page to connect to an Instagram Account.

3.1 Select Instagram Account Type

To connect your Instagram account, the first thing you need to do is select your account type. There are two types of accounts – 

  • Personal 
  • Business

If you want to add an Instagram Feed to the Divi of your business, simply select Business. Or you can go with the Personal type. 

Selecting Business account of Instagram

And if you don’t know whether your Instagram is Personal or Business, you can select I’m not sure. Then the plugin will share a brief detail about both the account types. Once you’re sure which one is your account type, you can select that and continue with the next step.

TipOr you can open your Instagram account, then go to click on the Profile Page → Tap on the Menu Bar in the top right corner → then click on Settings → Account → Choose Switch Account Type → If you’re a personal account type, you’ll get the option to switch to a Bussiness account.

3.2 Login With Instagram/Facebook

If you connect a business account, you need to Login With Facebook. Otherwise, you can continue with Instagram. We’ve selected the business account type. So, we need to Login with Facebook.

Login with Facebook to add Instagram Feed to Divi

Then, continue with your account. 

Selecting Instagram business account

After that, select the Instagram Business Account you want to connect to. 

Choosing Instagram Account for Divi Instagram Feed

It will further ask you to select a page you want to use with the Smash Balloon Social Photo Feed plugin. Simply select the page and then click Next

Selecting a page to be used with the Smash Balloon social photo feed

Once you do that, you need to allow permissions to the plugin. You need to keep all the permissions active for the plugin to work correctly. 

Allowing permissions

After allowing permissions, click the Done button. It takes a few moments to complete the connection. Once finished, you’ll see the confirmation. Click Ok to redirect to your Divi WordPress site and access the Instagram Feed.

Smash Ballon social linked to Facebook

Upon redirection, you’ll see a modal asking to select an Instagram Business account. 

Account Selection for Divi Instagram Feed

Select the account first and then click Add. Once it’s added as the source, select it again and click Next to access the Instagram Feed.

To add Instagram Feed to Divi

It will take a few moments to load the feed, but once it’s done, you’ll find the feed and other customization options as follows.

Customization Options for Instagram Feed in Divi

Now move to the next step to customize the feed’s look.

Step 4 – Apply Changes to the Instagram Feed

The customization options available to apply changes to the Instagram Feed are, 

  • Feed Layout
  • Color Scheme
  • Header
  • Posts
  • Load More Button
  • Follow Button
Divi Instagram Feed Tweak Options

Although it also displays the Lightbox option, it’s only accessible to pro users. Anyway, let’s take a deeper look at each available customization option. 

Feed Layout 

You can make changes to the Feed’s Height and Padding using the Feed Layout option. 

Divi Instagram Feed

You can also decide how many posts should be displayed in a single view. In addition, it also enables setting the number of columns for the feed for different devices. You can choose up to 10 columns for your Instagram Feed.

Choosing feed’s layout

If you get the pro version of the plugin, you can change Feed’s layout to Carousel, Masonry, and Highlight.

Color Scheme

In the Color Scheme, you get four options to change your Instagram Feed’s color. 

1) Inherit from Theme – Apply colors that your website has.

Color scheme for Divi Instagram feed

2) Light – Apply a white background to the feed.

Apply white background to the feed

3) Dark – Apply a dark/black background to the feed.

Apply a dark/black background to the feed

4) Custom – Change color scheme as per your choice. Add custom color for the background, Load More and Follow On Instagram Button.

Custom color scheme

Header

The Header option of the plugin provides you with multiple features to customize the feed. The first one is to Enable or Disable the header. 

Enable or disable header settings

If you keep showing the header, you get the option to change its size, avatar, text color, and custom bio. You also get the option to make it show outside the scrollable area.

Options to customise header

Posts

The Posts option of the plugin lets you change the Image’s resolution. 

Posts option to change image's resolution

And if you choose to get the pro version of the plugin, then you can decide to show Caption, Like and Comment Summary, and Hover State. 

Advance settings in pro version of the plugin

Load More

Using the Load More option, you can choose to Hide or Show the Load More button on the feed. Plus, you can set a custom text as well as color for the Background, Hover State, and Text. 

Load more button customisation setting

Follow Button

Likewise, Load More Button, the Follow Button option allows you to apply the same customization to the Follow Button. 

Follow button customisation setting

You can decide to show or hide the follow button. Change text and apply different colors for the Background, Hover State, and Text.

Step 5 – Add Your Divi Instagram Feed to a Page

We have customized our Instagram Feed; now, it’s time to embed it on our Divi website. However, before you do that, first, save the customization and the feed by clicking on the Save button. 

Embed Instagram feed in Divi website

After saving the feed and its customization, click Embed. This will bring the Embed Feed modal with the shortcode to embed the feed on your website. 

Embed feed modal with shortcode

Simply click Copy. Then, close the modal, go to pages and edit the page where you want to display an Instagram Feed in Divi. Ensure you edit it using the Divi Builder. Once the builder is loaded, insert the Code module. 

Pasting the code in code module

Then paste the code you’ve copied before, and as soon as you do that, you’ll find your Instagram Feed in Divi. 

Instagram feed added to Divi using the Smash Balloon social photo feed

That’s it; you’ve successfully added an Instagram Feed to Divi using the Smash Balloon Social Photo Feed. You can use Divi’s default settings to improve the feed even further. Above, we’ve added the feed to a Divi page. You can also add that to the header or footer of the site.

Method (2) – How to Add an Instagram Feed to Divi Without Plugin


This particular method to add an Instagram Feed to Divi won’t entirely bring all the images of your Instagram account. Plus, it won’t update on its own. To change photographs, you need to follow this method repeatedly. 

Therefore, going with a WordPress Instagram plugin is highly recommended. It brings all the posts and updates them regularly, and on top of that, you can customize it as well. However, if you don’t want to embed the Instagram Feed in WordPress without a plugin, you can proceed with the following steps.

Step 1 – Go to Instagram and Copy Embed Code

To add an Instagram Post to Divi, you need to copy the embed code of the post you want to add to the site. So for that, open your Instagram account, go to the post, and click the more options button (three horizontal dots.)

Add an Instagram post to Divi

Then, from the available options, select Embed.

Select embed from the option

This will showcase the Embed code with the option to keep the caption. If you like to display the caption on your post, you can keep it as it is. Or uncheck Include Caption

Check/uncheck include caption

Then, click Copy embed code

Step 2 – Paste the Embed Code to Embed Instagram Post in Divi

Once the code is copied, edit the page where you want to display it. Ensure, you edit the page using the Divi Builder. 

Insert the code module

Then after the builder is loaded, insert the code module as we have done in the 1st method. 

Paste code in the module

That’s it; you’ve embedded the Instagram Post to Divi. On the front-end, the post will be displayed like the following. 

Instagram post embedded to Divi

Introducing Divi Instagram Footers — Easily Add Instagram Feed to Divi at Bottom


The above methods allow you to add an Instagram Feed to Divi pages. However, if you want the feed in the website’s footer, it becomes a bit tricky. Also, you may or may not be able to apply all the tweaks to make the feed fit at the bottom. 

But, just like there’s a solution to add an Instagram Feed to Divi easily, and without following anything complex, there’s a solution to get the feed in the footer. And the solution is the new Divi Instagram Footers available in the Footers for Divi pack.

Divi  Flexile Footers

A total of 20 new Divi footers combined with Instagram Feed to allow you to build different websites with different footer styles having Instagram Feed on them. These new footers also use the Smash Balloon Social Photo Feed plugin, which you can configure just like we did in method 1. Then follow our simple documentation to learn how to get the feed on the footers. 

Once you do that, you’ll have astonishing Divi Instagram Footers on your website just like the followings.

Divi footers with Instagram feed

In addition to the new footers, there’s more you get with the pack.

  • A total of 110 Divi Footers with high customization possibility. 
  • Footers with client logo.
  • Footers with contact and sign-up forms.
  • WooCommerce footers.
  • Map footers.
  • Social Media footers.
  • Regular Updates.
  • Top-notch support.
  • And much more.

With all these footer layouts and other benefits, you’ll be able to use your Divi Instagram Footers the way you need. And not only Instagram Footers, but all of the ones included with the pack.

Wrapping Up


So that’s our take on adding an Instagram Feed to Divi using a plugin and without it. The method to use a plugin is by far the best option you have to show Instagram Feed on a Divi website. You can quickly bring different photos of your account; choose multiple accounts, refresh them regularly, and even apply customizations to the feed. So, if you go with the first method, you’ll go with what’s highly beneficial to your Divi project. It will save time as well as provides you with more options. 

And if you’re looking to add the Instagram Feed at the site’s footer, you can always try the Footers for Divi pack. Not only do you get the feed footers, but incredibly more than that. Therefore, stop waiting and quickly have your hands on the pack.

Divi Extended Cyber Monday Sale
Posted By:
Lokesh
With the sharp acumen and logical mind, Lokesh specializes in process analysis, mapping, improvement, requirements gathering, workflow automation, and helping his clients find their place in the ever so competitive business arena.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Extended Cyber Monday Sale
Cyber Monday Popup