How To Embed Instagram Feed On Webflow Website

If we talk about visual marketing, then Instagram and Webflow are similar. They both provide opportunities for artists to showcase their art.

Webflow allows designers to create a visual canvas for their website without any coding. On the other hand, Instagram is a social media platform that is designed to focus on the visuals and all the conversations around them.

Want to know how you can embed Instagram feed on your Webflow website? Read this step-to-step guide.

Steps to Embed Instagram Feed On Webflow:

Try Taggbox Widget – Start Your 14 Days Free Trial

1. First, create your free Taggbox Widget account or Log in to your existing account

how to add Instagram to Webflow

You’ll be redirected to Taggbox Widget Dashboard:

webflow Instagram feed

2. Click on the “Add Social Feeds” option to start adding Instagram feeds to your widget. 

Instagram feed webflow

3. On the new Dialog Box “Pick a source” select Instagram Business as your source of aggregating feeds:

embed Instagram feed on webflow website

4. A pop-up “Create Instagram Business Feed” will appear, where you’ll find 5 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 feed on webflow using handle

3. Stories – to fetch your profile’s Instagram Stories.

Display Instagram Feed on Webflow

4. MENTIONS – To fetch feeds in which your account is mentioned on Instagram Posts.

add Instagram mention feed on webflow

5. TAGGED – To fetch feeds in which your profile is tagged on Instagram Posts.

add Instagram tagged posts on webflow

5. Choose your aggregating method and enter the input accordingly.

Finally, click the “Create Feed” button to start the process of aggregating Instagram feeds according to your selection.

If asked complete the required authentication to fetch the feeds.

On successful authentication, in a short matter of seconds, your feeds will be displayed on Taggbox Editor.

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

Now, Let’s move towards generating Instagram feed embed code for a Webflow website.

Generate Instagram Feed Embed Code For Webflow

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

1. Click the “PUBLISH” button on the bottom-left of the screen, to add Instagram feed on Webflow.

how to add Instagram to webflow

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

webflow Instagram feed

3. A new Dialog Box will appear “OTHER”; 

Instagram feed on webflow

4. Enter the width and height into the input box according to your requirement;

Click GET CODE and COPY the generated code; you can also share the code on email ID by clicking the SHARE button.

Instagram feed webflow

Embed Instagram Feed On Webflow Website

1. Login your Webflow Admin account and select your project.

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)

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]