How to Embed Instagram Feed on Webflow Website

Steps to Embed Instagram Feed On Webflow:

To create and embed Instagram feed on Webflow website, you need to follow the following steps:

Try Taggbox – Start Your 14 Days Free Trial

Step 1:

First, create your Taggbox Widget account or Sign in to existing account

how to add instagram to webflow

You’ll be redirected to Taggbox Dashboard, click “+ Create Widget” at the top right to create a new widget:

webflow instagram feed

Step 2:

A Dialog Box named “Create Widget” will appear with an input box, 

First: “Widget Name” Enter the name of your wish to name the Widget.

Second: “Your Unique Url” You’ll see that your widget name is your unique URL; if you’re happy with it, then let’s move ahead with “Profanity Filter” or else Taggbox gives you the option to change it according to your wish as well.

Third: To enable the “Profanity Filter,” you can click on the checkbox and click on “Create Widget.”

instagram feed webflow

Congrats, Your First Widget is created.

Tip: You can also create multiple widget available according to your selected Plan. Your Plan’s details can be seen in Dashboard>Account section always.

Step 3: 

  • Click Feeds (On the Left-Hand Menu)
embed instagram feed webflow
  • To create New Feed, Click Add Feed
webflow instagram widget

Step 4: 

On the new Dialog Box “Pick a source” select Instagram Business (Only “Instagram” is for embedding My Profile Account, select it if you want to embed Your Profile).

embed Instagram feed on webflow website

Step 5:

You’ll find 4 options to create your Instagram feed for Webflow website.

  1. HASHTAG (#) – To fetch Instagram feeds using hashtags(#).
add instagram hashtag feed on webflow

2. HANDLE (@) – To fetch feeds from a profile account.

add instagram handle feed on webflow

3. MENTIONS – To fetch feeds for particular accounts mentioned on Instagram Posts.

add instagram mention feed on webflow

4. TAGGED – To fetch feeds for particular accounts tagged on Instagram Posts.

add instagram tagged feed on webflow

Step 6:

Click “Create Feed” to start the processing of embedding Instagram feeds according to your selection.

Now complete the required authentication to fetch the feeds.

(Note: The Email Id you log in with on Facebook should have an Instagram account too because you know Facebook owns Instagram).

Once you’ve Logged In, in a short matter of seconds, your feeds will be displayed.

Tips : You will find a “Personalize” option to customize your feed’s display, with many options to choose between from Taggbox according to your need. 

Now, Let’s move towards embedding on a Webflow website.

Generate Instagram Feed Code For Webflow

Below are the precise steps to follow for generating Instagram feeds embedding code for your Webflow website

Step 1: 

Click “Embed Widget” button (At the bottom left of the screen)

how to add instagram to webflow

Step 2:

On the dialog box of “Choose Your Platform,” select the “HTML” to generate code.

webflow instagram feed

Step 3: 

A new Dialog Box will appear “HTML.” Enter the width and height into the input box according to your requirement and click GET CODE and COPY the code generated while clicking GET CODE.

instagram feed webflow

Embed Instagram Feed On Webflow Website

Step 1:

Login your Webflow Admin account and select your project.

Step 2: 

Click on “Add Elements” from the left-hand side menu and drag and drop the “Embed” Element to the desired section of your website page.

add Instagram feed on webflow

A Pop-up with HTML Embed Code Editor will appear, paste the code and click Save & Close. (Adjust any spacing if needed)

Step 3: 

Click on Publish and select Publish to selected domains.

Now Open your website and enjoy the Embedded Instagram Feeds on your Webflow website

Try Taggbox To Embed Instagram Feed – Start Your 14 Days Free Trial

If you have any questions or need help, please contact us or write us at [email protected]