How to Embed Instagram Feed on Webflow
Webflow is a web design platform that lets you create and publish responsive websites without coding. One of the features of Webflow is that you can embed custom code snippets to add functionality or integrations to your site. In this article, we will show you how to embed an Instagram feed on your Webflow site using an HTML code. This will allow you to display your Instagram posts or stories on your website and increase your social media engagement.
A few benefits of embedding Instagram Feed on Webflow are:
- Boost your brand exposure by driving traffic from your website to your Instagram profile and vice versa.
- Spark more interactions and engagement with your visitors by displaying fresh and genuine content from Instagram.
- Earn trust and loyalty from your potential customers by featuring user-generated content and social proof from Instagram.
Prerequisites
An Idukki Collection of Instagram Posts
An up-and-running Webflow website
Create a collection of Instagram posts in Idukki following these steps.
Edit your new collection based on requirements. Click here to learn how.
Curate the collection to make it suitable to embed on your Webflow site. Learn more.
Custom CSS allows you to add your CSS which will override the existing style and let you customize elements based on your brand guidelines.
Click Publish and click Copy to Clipboard to copy the HTML code. You will need it later. You can use the Preview button to check the preview of your collection.
Log in to your Webflow website and edit the page where you want to add the feed.
Drag and drop an Embed element present under Advanced section in the Add panel to the section where you want the feed to appear.
Paste the HTML code into the Custom Code section of the Embed element.
Save and publish your changes.
I hope this helps.
A few benefits of embedding Instagram Feed on Webflow are:
- Boost your brand exposure by driving traffic from your website to your Instagram profile and vice versa.
- Spark more interactions and engagement with your visitors by displaying fresh and genuine content from Instagram.
- Earn trust and loyalty from your potential customers by featuring user-generated content and social proof from Instagram.
Prerequisites
An Idukki Collection of Instagram Posts
An up-and-running Webflow website
Adding & Curating the Collection
Create a collection of Instagram posts in Idukki following these steps.
Edit your new collection based on requirements. Click here to learn how.
Curate the collection to make it suitable to embed on your Webflow site. Learn more.
Custom CSS allows you to add your CSS which will override the existing style and let you customize elements based on your brand guidelines.
Click Publish and click Copy to Clipboard to copy the HTML code. You will need it later. You can use the Preview button to check the preview of your collection.
Embedding HTML into Webflow
Log in to your Webflow website and edit the page where you want to add the feed.
Drag and drop an Embed element present under Advanced section in the Add panel to the section where you want the feed to appear.
Paste the HTML code into the Custom Code section of the Embed element.
Save and publish your changes.
I hope this helps.
Updated on: 15/08/2023
Thank you!