💻
HTML / Any Website Guide
One script tag. Works everywhere HTML runs — React, Vue, plain HTML, custom CMS.
Estimated time: 1 minute · Difficulty: Trivial
The short version
Paste this one line anywhere in your HTML where you want the feed to appear — before the closing </body> tag, or inline inside any <div>:
<script src="https://feedpane.com/widget.js" data-key="YOUR_UNIQUE_KEY"></script>Replace YOUR_UNIQUE_KEY with your actual API key from the FeedPane dashboard. That's it.
Step-by-step
- 1Log in to your FeedPane dashboard and connect your Instagram account
- 2Find the Embed Code section and click Copy Code
- 3Open your website's HTML file or template
- 4Paste the code in the exact spot where you want your Instagram feed to appear
- 5Save and deploy — the feed appears immediately
Full page example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h2>Follow us on Instagram</h2>
<!-- FeedPane widget goes here -->
<script
src="https://feedpane.com/widget.js"
data-key="YOUR_UNIQUE_KEY">
</script>
</body>
</html>Customisation options
Add data attributes to the script tag to control how the widget looks:
| Attribute | Default | Description |
|---|---|---|
data-key | (required) | Your FeedPane API key |
data-layout | "grid" | "grid" or "slider" |
data-cols | "3" | Number of columns on desktop (1–6) |
data-mobile-cols | "2" | Number of columns on mobile |
data-gap | "4" | Gap between posts in pixels |
data-radius | "4" | Border radius of posts in pixels |
4-column grid, rounded corners, tight gap:
<script src="https://feedpane.com/widget.js" data-key="YOUR_KEY" data-cols="4" data-gap="2" data-radius="12"></script>Slider layout, 4 visible on desktop, 2 on mobile:
<script src="https://feedpane.com/widget.js" data-key="YOUR_KEY" data-layout="slider" data-cols="4" data-mobile-cols="2"></script>Using with React / Next.js
'use client'; // Next.js only
import { useEffect } from 'react';
export default function InstagramFeed() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://feedpane.com/widget.js';
script.setAttribute('data-key', 'YOUR_UNIQUE_KEY');
document.body.appendChild(script);
return () => { document.body.removeChild(script); };
}, []);
return <div id="feedpane-container" />;
}Performance notes
- The widget is under 15KB gzipped — smaller than a single Instagram thumbnail
- It loads asynchronously — it never blocks your page from rendering
- Images are lazy-loaded — only images in the viewport are fetched
- Feed data is cached on our CDN — no Instagram API call happens on each visitor page load
- Verified zero impact on Core Web Vitals (LCP, CLS, FID)