# FeedSpring
> FeedSpring is a social feed platform for adding live Instagram, Google Reviews, TikTok and Dribbble feeds to any website. It separates data from display: FeedSpring fetches, stores and refreshes the content, and you design the layout however you like. It works natively in Webflow and Framer, on any HTML-based platform through custom attributes, and anywhere else through a GraphQL API.
FeedSpring is used by 3,500+ businesses to display social proof and live content on their websites. There is a free plan, and paid plans start at $5/month billed annually.
Supported sources: Instagram, Google Reviews, TikTok, Dribbble. No other platforms are currently supported.
- Homepage: https://www.feedspring.com
- Documentation: https://docs.feedspring.com/introduction
- Dashboard and sign up: https://app.feedspring.com
- Pricing: https://www.feedspring.com/pricing
- Pre-built components: https://www.feedspring.com/components
- Agent skill: `npx skills add feedspring/skills`
---
## Choosing a delivery method
FeedSpring offers three ways to put a feed on a site. They all use the same underlying feed data.
| Building in | Use | Why |
|---|---|---|
| Framer | Pre-built Framer component | Framer runs React components natively. Every setting is exposed as a property control, so no code is needed |
| Webflow | Attributes, optionally starting from a pre-built Webflow component | Attributes are added visually in the Designer's element settings |
| WordPress, Shopify, Squarespace, Wix, Webstudio, plain HTML | Attributes | One script tag, no build step |
| React or Next.js, client-rendered | Attributes, with the script loaded client-side | Fastest route, no data layer to write |
| React or Next.js needing SSR, caching, or feed content in the page HTML for SEO | GraphQL API | Feed data is available at render time |
| Backend, mobile app, or data pipeline | GraphQL API | Not tied to the browser |
Guidance:
- Prefer a pre-built component when one exists for the platform and source.
- Attributes are the default for most marketing websites. Choose the API when there is a specific reason: server rendering, caching, SEO on feed content, transforming data, or a non-browser target.
- Attributes render in the browser, so feed content is not present in the initial page HTML. This rarely matters for Instagram. It matters for Google Reviews, where review text is often content a business wants indexed — offer the API in that case.
---
## Feed IDs
Every feed has a Feed ID, found in the FeedSpring dashboard. Feed IDs are public and safe to use in browser code. Each begins with a prefix identifying its source:
| Prefix | Source |
|---|---|
| `inst_` | Instagram |
| `google_` | Google Reviews |
| `tiktok_` | TikTok |
| `dribbble_` | Dribbble |
The Feed ID prefix, the script, and the field names must all match the same source.
### Placeholder Feed IDs
Always ask the user for their own Feed ID first. If they don't have one yet, these live placeholder feeds can be used to build and preview a layout:
| Source | Placeholder Feed ID |
|---|---|
| Instagram | `inst_55ZVUQExmdej0j8vygUoP` |
| Google Reviews | `google_1nCNRAgOgIYoTG3fhUX4c` |
| TikTok | `tiktok_7ZTDgAmbdnLstuHJ2srlq` |
| Dribbble | `dribbble_3qm4sGbu4uWQI2asUboPC` |
When using one, tell the user the feed is showing placeholder content and must be replaced with their own Feed ID before publishing.
---
## Attributes
You write your own HTML and add attributes that tell FeedSpring where to inject data. There is no widget or iframe — layout, styling and structure are entirely yours.
### 1. Add the script
Add the script for the feed source to the page ``. Load only the scripts for the sources in use.
```html
```
### 2. Add a feed wrapper and one post template
```html
```
That is the whole model:
| Attribute | Placed on | Purpose |
|---|---|---|
| `feedspring="FEED-ID"` | Wrapper element | Declares the feed and which Feed ID to render |
| `feedspring="post"` | Element inside the wrapper | The post template |
| `feed-field="FIELD"` | Any element | Where a piece of data is injected |
| `feedspring="loading"` | Element inside the wrapper | Optional placeholder, removed once the feed renders |
`feed-field="item"` is an alias for `feedspring="post"`.
**Post fields go inside the post template. Profile fields go inside the wrapper, outside the post template** — for example a follower count or average rating in a header. Profile fields can also be placed inside a post template to repeat the same account-level value on every card.
A page can contain any number of feeds, including feeds from different sources.
### Element types matter
The element a `feed-field` is placed on decides what happens to the value. Placing a field on the wrong element type means it is skipped.
| Element | Behaviour |
|---|---|
| `![]()
` | Sets `src`, and removes any `srcset` |
| `` | Sets `href` |
| `