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
First, create your Taggbox Widget account or Log in to your existing account
You’ll be redirected to Taggbox Widget Dashboard:
Click on the “Add Social Feeds” option to start adding Instagram feeds to your widget.
Tip: You can also add multiple feeds from multiple sources like Instagram, Facebook, Twitter, Youtube, etc all in one widget.
On the new Dialog Box “Pick a source” select Instagram Business as your source of aggregating feeds:
A pop-up “Create Instagram Business Feed” will appear, where you’ll find 5 options to create your Instagram feed for the Webflow website.
1. HASHTAG (#) – To fetch Instagram feeds using hashtags(#).
2. HANDLE (@) – To fetch feeds from a profile account.
3. Stories – to fetch your profile’s Instagram Stories.
4. MENTIONS – To fetch feeds in which your account is mentioned on Instagram Posts.
5. TAGGED – To fetch feeds in which your profile is tagged on Instagram Posts.
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.
(Note: The Email Id you log in with on Facebook should have an Instagram account too because you know Facebook owns Instagram).
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 embedding code for 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
Click the “PUBLISH” button on the bottom-left of the screen, You can also see the PREVIEW of how your feeds gonna look on different devices.
On the dialog box of “Choose Your Platform,” select the “OTHER” to generate code.
A new Dialog Box will appear “OTHER”;
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.
Embed Instagram Feed On Webflow Website
Login your Webflow Admin account and select your project.
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.
A Pop-up with HTML Embed Code Editor will appear, paste the code and click Save & Close. (Adjust any spacing if needed)
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