Note: This tutorial uses Webflow’s embed element to add custom code. The embed element is available on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.
In this lesson, you’ll learn:
- How to create an Instagram feed widget in Elfsight
- How to embed an Instagram feed widget on your Webflow site
How to create an Instagram feed widget in Elfsight
Before you get started: If you haven’t already, create an Elfsight account.
Create your Instagram feed widget
To create your Instagram feed widget:
- Go to Elfsight’s Apps Catalog
- Click Instagram Feed
- Choose the Instagram feed template you want to use on your site (e.g., Profile widget, Grid, etc.)
- Click Continue with this template
- Choose the Instagram Source type you want to use (i.e., public accounts & hashtags, your business account, or your personal account)
- Add your Instagram source — username (e.g., @webflow), hashtag (e.g., #webflow), location (e.g., California), etc.
- Click Add
- Repeat steps 6 and 7 for any additional Instagram sources you want to add
You can use Filters and Sorting to organize your feed. Filters let you show or hide posts containing specific words or hashtags. Sorting lets you set the display order for the Instagram posts in your feed.
Design your Instagram feed widget
Posts
Go to the Post tab in the left panel to edit the style of your feed (i.e., image-only or full card display) and the elements visible on each post (e.g., likes count, comments count, post text, etc.). You can also define the behavior of your posts when a post is clicked, like whether the post opens in a pop-up or on Instagram, what elements are shown in the pop-up, etc.
Layout
The Layout tab lets you set your widget’s layout. Here, you can choose to display your feed in slider or grid format, set the number of columns and rows, control the gap between images, and add a title to display above your feed widget.
Style
In the Style tab, you can choose a preset color scheme or add custom colors to your feed. Click the element options under Customize elements to change the color of the overlay, buttons, links, background, and text. You can also click Custom CSS to manage your layout with custom code.
Note: Each Elfsight widget has different color options based on the feed template selected.
Settings
The Settings tab lets you define your feed’s display language.
Save your Instagram feed widget
Once you’ve finished customizing your Instagram feed widget, click Publish. Then, click Copy code to copy your widget’s HTML.
How to embed an Instagram feed widget on your Webflow site
Now, you can use Webflow’s embed element to add your Instagram feed widget to your published site.
To embed your Instagram feed widget in your site:
- Open your site in the Designer
- Go to Add panel > Advanced and add an embed element to the canvas
- Paste your Elfsight widget’s HTML code in the code editor
- Click Save & close
When you’re ready, publish your site to check out your new Instagram feed widget in action.