Embed an Instagram feed on your site with Elfsight

Updated

Showcase a customized Instagram feed on your Webflow site with Elfsight.

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. 

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: 

  1. Go to Elfsight’s Apps Catalog 
  2. Click Instagram Feed
  3. Choose the Instagram feed template you want to use on your site (e.g., Profile widget, Grid, etc.) 
  4. Click Continue with this template
  5. Choose the Instagram Source type you want to use (i.e., public accounts & hashtags, your business account, or your personal account) 
  6. Add your Instagram source — 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 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: 

  1. Open your site in the Designer
  2. Go to Add panel > Advanced and add an embed element to the canvas
  3. Paste your Elfsight widget’s HTML code in the code editor 
  4. Click Save & close

When you’re ready, publish your site to check out your new Instagram feed widget in action. 

Note

Your Instagram feed widget won’t render on the Designer canvas — that is, you won’t be able to preview the widget in the Designer. Instead, a placeholder will be shown in its place. Once you publish or export your site, the widget will render (i.e., display) where you placed it. If you need to preview the widget before publishing your site live to a custom domain, you can publish your site to the webflow.io staging subdomain. 

Related articles