Webflow
Learn how to get started building an Instagram feed with Webflow.
Last updated
Learn how to get started building an Instagram feed with Webflow.
Last updated
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 collection of pre-made layouts to get started faster.
Attributes Table: You can view all available attributes in the attributes table.
Flexability: All attributes are optional (eg. caption, avatar), only the feed wrapper and post wrapper are required.
From your FeedSpring dashboard, select the "Connect New Feed" option and follow the steps to create a new feed. For more detailed getting started instructions, view our documentation page.
Add the FeedSpring script to the <head> of your Webflow project.
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.
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 pre-made components here
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.
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"
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.
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.
Building your feed is super simple, add the following attributes detailed below to your structural content and publish your site to see the feed in action.
To display the review text, 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="review"
To display the review author 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="avatar"
To display the review author name, 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="name"
To display star ratings for your reviews, you need to include two elements in your layout:
Active Star: This represents a positive rating and is typically yellow and filled.
Inactive Star: This represents a missing rating and is usually greyed-out or has lower opacity.
FeedSpring will handle the display of these elements to reflect the rating. For example, for a 4/5 rating, FeedSpring will display 4 active stars and 1 inactive star.
Active Star
To display an active star, add the attribute:
name="feed-field" value="star"
Inactive Star
To display an inactive star, add the attribute:
name="feed-field" value="star-inactive"
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 timestamp documentation to learn more about this.
To display the rating, add the following attribute to a <text> element on your page. This will display the rating as a number, for example '4'
name="feed-field" andvalue="rating"
To display the rating as a string, add the following attribute to a <text> element on your page. This will display the rating as a string, for example 'four'
name="feed-field" andvalue="rating-string"
To display the total rating, add the following attribute to a <text> element on your page.
name="feed-field" andvalue="total"
To display the average rating, add the following attribute to a <text> element on your page.
name="feed-field" andvalue="average-rating"
To link to the business page, add the following attribute to a <link-block> element on your page.
name="feed-field" andvalue="average-rating"
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:
Learn about additional options you can add to your feeds, such as language tags and more.
Learn how to create a seamless loading experience for your feeds using placeholders.
Learn how to create a dynamic feed, using the layout of a single post.
Learn how to adjust timestamp format to suit exactly what you want for your feed.
View our collection of coded solutions built to help you solve problems with simple CSS/JS
| Field | Attribute Name | Attribute Value | Post Attribute* |
|---|---|---|---|
Review Text
feed-field
review
Review Author Image
feed-field
avatar
Review Author Name
feed-field
name
Star (Active)
feed-field
star
Star (Inactive)
feed-field
star-inactive
Timestamp
feed-field
timestamp
Rating (#)
feed-field
rating
Rating (String)
feed-field
rating-string
Total Rating
feed-field
total
Average Rating
feed-field
average-rating
Link
feed-field
link
