Quickstart

A working Instagram embed on your site in about three minutes. You'll connect your account once (Business or Creator only, per Meta's rules), 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.

index.html

html

<!-- 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>

Step 1. Create your account

Create an account at /sign-up. No credit card required. The free tier covers one Instagram feed, 10,000 widget views 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.

The FeedFusion dashboard's Add New Source chooser, showing 'I'll authorize it' and 'The owner will authorize' options.

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.

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.

Prop	Type	Default	Description
`columns`	`number (1 to 6)`	`3`	Grid column count. Set via data-feedfusion-columns="4" or --ff-columns: 4.
`limit`	`number (1 to 100)`	`12`	Number of posts to show.
`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.

Questions? hello@feed-fusion.com

API Reference Next.js Integration Guide