Webflow

Learn how to get started building an Instagram feed with Webflow.

1. Getting Started

Building a social feed with Webflow is straightforward and efficient. Our advanced attribute system powers Webflow feeds, allowing you to seamlessly integrate attributes directly within the platform. This enables the display of live, real-time feed data without the constraints of basic widgets and embeds.

Key Features:

Attribute Integration: Feeds are built by adding attributes directly to structure in Webflow.

1.1. Create Feed *

1.2. Installation *

Add the FeedSpring script to the <head> of your Webflow project.

<!-- FeedSpring Instagram Script -->
<script src="https://scripts.feedspring.com/instagram-attrs.js" async defer></script>

Webflow Code Settings: If you plan to display the feed on multiple pages, add the following script to the project settings. For a feed displayed on a single page, add the script to the page settings. Learn more about Webflow custom code here.

1.3. Pre-made Components

2. Setup

2.1. Feed Wrapper *

The Feed Wrapper specifies where the feed will be rendered on the page and can be added to any element that will enclose the entire feed. We recommend adding a new <div> block to wrap your feed and applying the attribute directly to this element.

Add the attribute name="feedspring" andvalue="YOUR-UNIQUE-ID" to the <div> block

Your unique feed ID is available on the feed setup page within the app and can be copied directly from there.

2.2. Post Wrapper *

The Post Wrapper contains the main content of a post and is nested inside the Feed Wrapper. This is where you'll add any layout elements related to your posts, such as captions or timestamps. To create the Post Wrapper, add the following attribute to a <div> block that will enclose your post. You can duplicate this block for as many posts as you wish to display.

Simply add the attribute name="feedspring" andvalue="post"

3. Building

Once the feed wrapper and the feed post have been created, you can start adding attributes to the required layout created inside them. For example, if you want to display a timestamp, you can add this attribute to a text element inside the post wrapper.

3.1. Available Attributes

The following attributes can be added to your layout to start displaying their respective data.

Post Attribute: Some attributes can only be added to structure inside the post wrapper, these attributes are labeled as 'Post Attribute' below. All other attributes can be placed anywhere inside your feed wrapper.

3.2. Build Feed

Building your feed is super simple, add attributes detailed below to your structural content and publish your site to see the feed in action.

3.2.1 Instagram Image

To display the image, add the following attribute to a <img> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="img"

Images: When displaying images in your feed, make sure you select the image element inside of Webflow and style it as you require. FeedSpring will inject the image into this element upon loading of the page.

3.2.2 Caption

To display the caption, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="caption"

3.2.3 Timestamp

To display the timestamp, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="timestamp"

3.2.4 Link

To link directly to the original post, add the following attribute to a <link> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="link"

3.2.5 Like Count

To display the like count, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="like-count"

3.2.6 Comment Count

To display the comment count, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="comment-count"

3.2.7 Username / Handle

To display the accounts username, add the following attribute to a <text> element on your page.

name="feed-field" andvalue="handle"

3.2.8 Avatar

To display the avatar, add the following attribute to a <img> element on your page.

name="feed-field" andvalue="avatar"

3.2.9 Bio

To display the bio, add the require following to a <text> element on your page.

name="feed-field" andvalue="bio"

3.2.10 Following Count

To display the following count, add the following attribute to a <text> element on your page.

name="feed-field" andvalue="following-count"

3.2.11 Follower Count

To display the follower count, add the following attribute to a <text> element on your page.

name="feed-field" andvalue="follower-count"

4. Additional Settings

FeedSpring provides a range of advanced options to further customize your feeds and enhance their functionality. Explore the following sections to discover how to implement these features into your builds:

4.1 Feed Options

4.2 Placeholder & Loading

4.3 Dynamic Attribute

4.4 Timestamp

4.5 Coded Solutions

PreviousInstagram NextFramer

Last updated 3 months ago

1. Getting Started

Building a social feed with Webflow is straightforward and efficient. Our advanced attribute system powers Webflow feeds, allowing you to seamlessly integrate attributes directly within the platform. This enables the display of live, real-time feed data without the constraints of basic widgets and embeds.

Key Features:

Attribute Integration: Feeds are built by adding attributes directly to structure in Webflow.
Pre-made Layouts: We provide a to get started faster.
Attributes Table: You can view all available attributes in the .
Flexability: All attributes are optional (eg. caption, avatar), only the and are required.

1.1. Create Feed *

From your , select the "Connect New Feed" option and follow the steps to create a new feed. For more detailed getting started instructions, page.

1.2. Installation *

Add the FeedSpring script to the <head> of your Webflow project.

<!-- FeedSpring Instagram Script -->
<script src="https://scripts.feedspring.com/instagram-attrs.js" async defer></script>

Webflow Code Settings: If you plan to display the feed on multiple pages, add the following script to the project settings. For a feed displayed on a single page, add the script to the page settings. Learn more about Webflow custom code here.

1.3. Pre-made Components

FeedSpring offers a number of pre-made components that you can copy and paste directly into your projects. This can help you start customizing a feed right away and provides an excellent example of how a feed is built. Browse our

2. Setup

2.1. Feed Wrapper *

The Feed Wrapper specifies where the feed will be rendered on the page and can be added to any element that will enclose the entire feed. We recommend adding a new <div> block to wrap your feed and applying the attribute directly to this element.

Add the attribute name="feedspring" andvalue="YOUR-UNIQUE-ID" to the <div> block

Your unique feed ID is available on the feed setup page within the app and can be copied directly from there.

2.2. Post Wrapper *

The Post Wrapper contains the main content of a post and is nested inside the Feed Wrapper. This is where you'll add any layout elements related to your posts, such as captions or timestamps. To create the Post Wrapper, add the following attribute to a <div> block that will enclose your post. You can duplicate this block for as many posts as you wish to display.

Simply add the attribute name="feedspring" andvalue="post"

3. Building

Once the feed wrapper and the feed post have been created, you can start adding attributes to the required layout created inside them. For example, if you want to display a timestamp, you can add this attribute to a text element inside the post wrapper.

3.1. Available Attributes

The following attributes can be added to your layout to start displaying their respective data.

Post Attribute: Some attributes can only be added to structure inside the post wrapper, these attributes are labeled as 'Post Attribute' below. All other attributes can be placed anywhere inside your feed wrapper.

3.2. Build Feed

Building your feed is super simple, add attributes detailed below to your structural content and publish your site to see the feed in action.

3.2.1 Instagram Image

To display the image, add the following attribute to a <img> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="img"

Images: When displaying images in your feed, make sure you select the image element inside of Webflow and style it as you require. FeedSpring will inject the image into this element upon loading of the page.

3.2.2 Caption

To display the caption, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="caption"

3.2.3 Timestamp

To display the timestamp, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="timestamp"

Timestamp Format: We also provide options to format the timestamp to suit your own requirements. Please review our to learn more about this.

3.2.4 Link

To link directly to the original post, add the following attribute to a <link> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="link"

3.2.5 Like Count

To display the like count, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="like-count"

3.2.6 Comment Count

To display the comment count, add the following attribute to a <text> element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper.

name="feed-field" andvalue="comment-count"

3.2.7 Username / Handle

To display the accounts username, add the following attribute to a <text> element on your page.

name="feed-field" andvalue="handle"

3.2.8 Avatar

To display the avatar, add the following attribute to a <img> element on your page.

name="feed-field" andvalue="avatar"

3.2.9 Bio

To display the bio, add the require following to a <text> element on your page.

name="feed-field" andvalue="bio"

3.2.10 Following Count

To display the following count, add the following attribute to a <text> element on your page.

name="feed-field" andvalue="following-count"

3.2.11 Follower Count

To display the follower count, add the following attribute to a <text> element on your page.

name="feed-field" andvalue="follower-count"

4. Additional Settings

FeedSpring provides a range of advanced options to further customize your feeds and enhance their functionality. Explore the following sections to discover how to implement these features into your builds:

4.1 Feed Options

you can add to your feeds, such as language tags and more.

4.2 Placeholder & Loading

loading experience for your feeds using placeholders.

4.3 Dynamic Attribute

, using the layout of a single post.

4.4 Timestamp

to suit exactly what you want for your feed.

4.5 Coded Solutions

built to help you solve problems with simple CSS/JS

Pre-made Layouts: We provide a to get started faster.

Attributes Table: You can view all available attributes in the .

Flexability: All attributes are optional (eg. caption, avatar), only the and are required.

From your , select the "Connect New Feed" option and follow the steps to create a new feed. For more detailed getting started instructions, page.

FeedSpring offers a number of pre-made components that you can copy and paste directly into your projects. This can help you start customizing a feed right away and provides an excellent example of how a feed is built. Browse our

Timestamp Format: We also provide options to format the timestamp to suit your own requirements. Please review our to learn more about this.

you can add to your feeds, such as language tags and more.

loading experience for your feeds using placeholders.

, using the layout of a single post.

to suit exactly what you want for your feed.

built to help you solve problems with simple CSS/JS

⚫

collection of pre-made layouts

pre-made components here

timestamp documentation

Learn about additional options

Learn how to create a seamless