Add Instagram Feed to Elementor Website

Add Instagram Feed to Elementor Website

Table of Contents:

1. Introduction
2. Installing the HTMega Plugin
3. Creating a Facebook App for Instagram Access Token
4. Adding Instagram Feed to Elementor using HTMega
5. Customizing the Instagram Feed Style
6. Setting the Cache Time Duration and Item Limit
7. Showing or Hiding Captions and Lightbox
8. Customizing the Follow Button
9. Changing the Style of the Instagram Feed
10. Saving Changes and Viewing the Instagram Feed

Adding Instagram Feed to Your Elementor Website

Adding an Instagram feed to your Elementor website can be a great way to showcase your Instagram content and engage with your website visitors. In this tutorial, I will show you step-by-step how to add an Instagram feed to your Elementor website using the HTMega plugin. I will also guide you through customizing the feed's style and settings to fit your website's design. Let's get started!

1. Introduction

Welcome to another quick tutorial! In today's video, I will show you how to add your Instagram feed to your Elementor website. By using a free plugin called HTMega, we can easily import our Instagram feed to our website and choose from four different styles. But before we begin, we need to obtain an Instagram access token by creating a free Facebook app. Let's dive in and get started!

2. Installing the HTMega Plugin

To add an Instagram feed to your Elementor website, we first need to install the HTMega plugin. Here's how:

1. Go to your WordPress dashboard and navigate to "Plugins" > "Add New".
2. Search for "HTMega" and install the "HTMega - Absolute Addons for Elementor" plugin.
3. Activate the plugin.

3. Creating a Facebook App for Instagram Access Token

Before we can proceed with adding the Instagram feed, we need to create a Facebook app to obtain an Instagram access token. Here's how:

1. Go to developers.facebook.com and log in to your Facebook account.
2. Click on "Create App" and select "Consumer" as the app type.
3. Enter a display name for your app (e.g., "Farjana's Blog and Creative").
4. Follow the instructions provided to set up your app and create a new app.
5. Scroll down to "Instagram Basic Display" and click on "Set Up".
6. Click on "Create New App" and enter the display name (same as before) for your app.
7. Save the changes.
8. Go to the "Tester Invites" section in your Instagram account settings and accept the invite.
9. In the Facebook Developers page, go to "Instagram Basic Display" and scroll down to "Instagram Test Users".
10. Click on "Generate Token" to obtain your access token.
11. Copy the generated token.

4. Adding Instagram Feed to Elementor using HTMega

Now that we have our Instagram access token, we can proceed with adding the Instagram feed to our Elementor website. Follow these steps:

1. Go to the page where you want to add the Instagram feed using Elementor.
2. Edit the page with Elementor and scroll down to the bottom area.
3. Add a new section and a full-column structure.
4. Add a new widget by clicking on the "+" icon.
5. Search for "Instagram" and select the "Instagram" widget from HTMega.
6. On the left side, paste the Instagram access token in the designated field.
7. Save the changes.

5. Customizing the Instagram Feed Style

By default, the Instagram feed will have a specific style. However, you can easily customize it according to your preferences. Here's how:

1. Go to the style settings of the Instagram widget.
2. Choose from the pre-made styles available (e.g., Style 2, Style 3, Style 4) to change the appearance of the feed.
3. Explore the different options such as cash time duration, item limit, column number, show caption, and show lightbox.
4. Make changes to these settings based on your desired layout and functionality.

6. Setting the Cache Time Duration and Item Limit

The cache time duration determines how often the Instagram feed will be updated. The item limit, on the other hand, determines the number of Instagram posts displayed. Here's how to set these options:

1. In the Instagram widget settings, choose your preferred cache time duration (e.g., one day, one hour, one week, etc.).
2. Adjust the item limit to display the desired number of Instagram posts.
3. You can experiment with different cache time durations and item limits to find the balance that works best for your website.

7. Showing or Hiding Captions and Lightbox

The Instagram feed can display captions for each post, and a lightbox feature allows users to view the images in a larger format. Here's how to control these options:

1. In the Instagram widget settings, choose whether to show or hide captions.
2. Enable or disable the lightbox feature based on your preference.
3. Customize the lightbox icon or replace it with your own image.

8. Customizing the Follow Button

By default, the Instagram feed comes with a follow button, linking to your Instagram profile. Here's how to customize it:

1. In the Instagram widget settings, choose whether to show or hide the follow button.
2. Add additional text to the follow button (e.g., "Follow @username").
3. Modify the follow button icon to suit your branding.

9. Changing the Style of the Instagram Feed

You can further customize the style of the Instagram feed to match your website's design. Here's how:

1. In the Instagram widget settings, navigate to the "Style" tab.
2. Modify the background color, padding, margin, and other style-related settings to fit your website's design.
3. Experiment with different style options until you achieve the desired look and feel.

10. Saving Changes and Viewing the Instagram Feed

Once you have made all the necessary customizations, don't forget to save your changes. Here's how to view the Instagram feed on your website:

1. Save the changes made to the Instagram widget in Elementor.
2. Preview or publish the page to see the Instagram feed in action.
3. Now, your website visitors will be able to view your Instagram feed directly on your Elementor website.

That's it! You have successfully added and customized an Instagram feed on your Elementor website using the HTMega plugin. You can always go back to the widget settings to make further adjustments and enhancements. Enjoy engaging with your visitors through your beautifully integrated Instagram feed!

Highlights:

• Easily add your Instagram feed to your Elementor website
• Choose from four different styles for your Instagram feed
• Customize the style, cache time duration, and item limit
• Show or hide captions and enable the lightbox feature
• Customize the follow button with additional text and icon
• Adjust the style of the Instagram feed to match your website's design
• Save changes and preview your Instagram feed on your website

FAQ:

Q: Can I add multiple Instagram feeds to my Elementor website? A: Yes, you can add multiple Instagram feeds by following the same steps for each feed you want to display.

Q: Can I customize the Instagram feed's layout? A: Yes, you can customize the layout, including the number of columns and the spacing between posts, in the widget settings.

Q: Is the HTMega plugin compatible with other page builders? A: No, the HTMega plugin is specifically designed for Elementor and may not be compatible with other page builders.

Q: Can I add the Instagram feed to specific pages only? A: Yes, you can choose the specific pages where you want to display the Instagram feed using Elementor's page settings.

Q: Does the Instagram feed automatically update with new posts? A: The Instagram feed can be set to automatically update based on the cache time duration you choose.