Quickstart: embed your Instagram feed in about three minutes
A working Instagram embed on your site in about three minutes. You'll connect your Instagram Business or Creator account once through Meta's official Instagram API (Instagram Login; Meta only allows those two account types), copy a snippet from your dashboard, and paste it on your site. FeedFusion rotates the access token automatically after that, so you never see another expiry email.
Here's what the integration looks like. Copy any of these snippets. They'll fail in a useful way until you replace the two placeholder values in Step 3, which is fine for now.
<!-- Drop this anywhere on your page -->
<div
data-feedfusion-username="your-username"
data-feedfusion-public-key="your-public-key"
data-feedfusion-columns="3"
data-feedfusion-gap="8"
></div>
<script src="https://www.feed-fusion.com/widget.js" async></script>// Server Component. Fetches at request time, ISR-friendly.
export default async function InstagramFeedPage() {
const res = await fetch(
`https://www.feed-fusion.com/api/feeds/your-username?publicKey=your-public-key&limit=12`,
{ next: { revalidate: 3600 } },
)
const { posts } = await res.json()
return (
<ul className="grid grid-cols-3 gap-2">
{posts.map((post) => (
<li key={post.id}>
<a href={post.permalink} target="_blank" rel="noopener noreferrer">
<img src={post.optimizedMediaUrl ?? post.thumbnailUrl ?? post.mediaUrl} alt={post.caption ?? ''} />
</a>
</li>
))}
</ul>
)
}// Plain fetch. Works in any framework or vanilla JS.
fetch('https://www.feed-fusion.com/api/feeds/your-username?publicKey=your-public-key&limit=12')
.then((res) => res.json())
.then(({ posts }) => {
const grid = document.getElementById('my-feed')
posts.forEach((post) => {
const a = document.createElement('a')
a.href = post.permalink
a.target = '_blank'
a.rel = 'noopener noreferrer'
const img = document.createElement('img')
img.src = post.optimizedMediaUrl ?? post.thumbnailUrl ?? post.mediaUrl
img.alt = post.caption ?? ''
a.appendChild(img)
grid.appendChild(a)
})
})Step 1. Create your account
Create an account at /sign-up. No credit card required. The free tier covers one Instagram feed, 10,000 feed loads per month, and 10 manual feed refreshes per month. Enough to ship a real client site and watch it work for a while before deciding whether to upgrade.
Step 2. Connect Instagram
After signup, the dashboard sends you to a chooser with two paths: "I'll authorize it" if you're connecting your own Instagram, or "The owner will authorize" if you're an agency setting it up for a client (this generates a one-time link they open from their own browser to authorize). Either path runs Meta's standard OAuth flow. Pick a Business or Creator account, accept the standard read-only scopes, and you're back in the dashboard with a working feed. FeedFusion stores the access token, rotates it before it expires, and re-fetches your posts on a schedule, so the integration keeps working without you ever touching the token again.

Step 3. Copy your real embed code
Open your feed in the dashboard and click "Copy embed code". The dashboard panel has the same three tabs as the demo at the top of this page, but pre-filled with your real username + publicKey. Pick the one that matches your stack and paste it into your site.
Allowed sites
New widgets ask where they'll run before showing the embed code. Add your website in the "Where this widget runs" card: up to 5 sites, www and non-www count as the same site, and *.example.com covers every subdomain. Browsers on any other site get a 403 and use none of your monthly feed loads.
Using Wix or another site builder? Some builders run custom code from their own address instead of yours. If the widget doesn't show, check "Tried to load on" in the dashboard: if the builder's address is listed (for Wix, something like abc123.filesusr.com), click Allow. If nothing is listed, the builder is running the code in a locked-down frame; add the snippet through the builder's site-wide custom code setting instead.
The Next.js snippet fetches on your server, so allowed sites don't affect it. Widgets created before October 2026 keep working everywhere until you confirm their sites. When a site isn't allowed, the widget shows nothing and logs this in the browser console: "FeedFusion: this site (example.com) is not on the widget's allowed sites. Add it in your FeedFusion dashboard."
Step 4. Customize
Both the HTML widget and CSS custom properties accept the same options. Set them via data-feedfusion-* attributes on the widget div, or via --ff-* CSS variables in your stylesheet. You can also set posts, columns, spacing and tile shape in your dashboard under "Customize widget", with no code change: once you save there, those settings replace the same options in your embed code.
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number (1 to 6) | 3 | Grid column count. Set via data-feedfusion-columns="4" or --ff-columns: 4. |
columnsMobile | number (1 to 6) | 2, or columns if lower | Columns when the widget is narrower than 480 px. Set via data-feedfusion-columns-mobile="1" or --ff-columns-mobile: 1. |
limit | number (1 to 100) | 12 | Number of posts to show (or set it in Customize widget in your dashboard). Rows = posts ÷ columns; 12 or 24 fill every row at 2 and 3 columns. |
gap | CSS length | 1rem | Space between posts. Any valid CSS length string. |
aspectRatio | "1" | "4/5" | "1" | Post tile aspect ratio. "1" for square, "4/5" for portrait. Other values fall back to default. |
borderRadius | CSS length | 0 | Corner rounding on each post tile. |
hoverEffect | "zoom" | "fade" | "none" | "none" | Hover animation on each tile. |
placeholder | CSS color | light grey | Tile background while an image loads. |
Questions? hello@feed-fusion.com
Continue reading