Add an Instagram feed to your website using Elfsight

Important: The following guide demonstrates how to integrate custom code using the embed feature in Webflow. This feature is accessible on any paid Site plan as well as the Core, Growth, Agency, and Freelancer Workspace plans.

This tutorial covers the following topics: 

1. The process of creating an Instagram feed widget in Elfsight
2. Embedding an Instagram feed widget on your Webflow website

Steps to create an Instagram feed widget in Elfsight

Preliminary actions: If you haven’t done so already, please register for an Elfsight account.

Creation of your Instagram feed widget

To create your Instagram feed widget, follow these steps: 

1. Visit Elfsight’s Apps Catalog
2. Select the Instagram Feed option
3. Choose the preferred Instagram feed template for your website (e.g., Profile widget, Grid, etc.)
4. Continue with the selected template
5. Decide on the Instagram Source type, such as public accounts & hashtags, your business account, or your personal account
6. Enter the relevant Instagram source information — username (e.g., @webflow), hashtag (e.g., #webflow), location (e.g., California), etc.
7. Click Add
8. Repeat steps 6 and 7 for any additional Instagram sources you wish to include

You can utilize Filters and Sorting to manage your feed effectively. Filters help in displaying or concealing posts containing specific words or hashtags, while Sorting enables you to set the order of display for the Instagram posts in your feed.

Styling your Instagram feed widget

Posts

Navigate to the Post tab on the left panel to customize the appearance of your feed, such as image-only or full card display, and the elements visible on each post (likes count, comments count, post text, etc.). You can also determine the post behavior when clicked, such as whether it opens in a pop-up or on Instagram, which elements are displayed in the pop-up, etc.

Layout

Access the Layout tab to configure your widget’s layout. Here, you can opt for a slider or grid format, specify the number of columns and rows, adjust the gap between images, and include a title above your feed widget.

Appearance

Within the Style section, choose from pre-set color schemes or define custom colors for your feed. Modify the color of the overlay, buttons, links, background, and text by selecting the element options under Customize elements. You also have the option to utilize Custom CSS for advanced layout management.

Please Note: Different Elfsight widgets offer varying color options based on the selected feed template.

Customization

In the Settings section, you can specify the display language for your feed.

Saving your Instagram feed widget

After completing the customization of your Instagram feed widget, click Publish. Subsequently, click Copy code to retrieve the HTML code for your widget. 

Integration of an Instagram feed widget on your Webflow site

Now, you can insert your Instagram feed widget on your live Webflow site using the embed feature.  

To integrate your Instagram feed widget on your website: 

1. Access your site in the Designer
2. Navigate to Add panel > Advanced and add an embed element to the canvas
3. Paste the HTML code of your Elfsight widget in the code editor 
4. Save your changes

When ready, publish your site to view your newly added Instagram feed widget in action. 

Important: Your Instagram feed widget will not show on the Designer canvas, meaning you cannot preview the widget within the Designer itself. Instead, a placeholder will be displayed. Once you publish or export your site, the widget will appear at the designated location. For a preview before going live on a custom domain, publishing to the webflow.io staging subdomain is an option.