Integration of Instagram Graph API with a Website
You've tried pulling an Instagram feed using the official widget and got broken links within a week? A familiar pain: CDN links die, tokens expire, and clients see gray squares instead of stories. We've handled hundreds of such integrations—here's how to do it right without workarounds.
Instagram Graph API is the only legitimate way to fetch content from a business account. However, it requires a Business or Creator account, a linked Facebook Page, and an app in Meta Developer Portal with instagram_basic and pages_show_list permissions. Miss these nuances, and the project stalls at the first test. We have over 5 years of experience integrating with Instagram API and more than 50 successful projects for blogs and corporate portals.
Why Tokens Are a Headache and How to Avoid It
A short-lived token lasts one hour. A long-lived token lasts 60 days—but it must be refreshed before expiry. We automate this via a Laravel scheduler. Compare approaches: manual renewal leads to downtime; our automation guarantees 99.9% uptime.
// Exchange short-lived token for long-lived (60 days) $resp = Http::get('https://graph.facebook.com/oauth/access_token', [ 'grant_type' => 'fb_exchange_token', 'client_id' => config('services.instagram.app_id'), 'client_secret' => config('services.instagram.app_secret'), 'fb_exchange_token' => $shortLivedToken, ]); $longLivedToken = $resp->json('access_token'); Token Type Comparison
| Token Type | Lifetime | Renewal |
|---|---|---|
| Short-lived | 1 hour | Manual fetch required |
| Long-lived | 60 days | Automatic via cron |
How We Fetch Posts Without N+1
One endpoint /me/media returns all posts. We filter only IMAGE and CAROUSEL_ALBUM and cache the result for 6–12 hours. This is 5x more efficient than making multiple requests to each media link.
class InstagramService { public function getPosts(int $limit = 12): array { $resp = Http::get("https://graph.instagram.com/me/media", [ 'fields' => 'id,caption,media_type,media_url,thumbnail_url,permalink,timestamp', 'limit' => $limit, 'access_token' => $this->accessToken, ]); return collect($resp->json('data')) ->filter(fn($p) => in_array($p['media_type'], ['IMAGE', 'CAROUSEL_ALBUM'])) ->map(fn($p) => [ 'id' => $p['id'], 'caption' => $this->truncateCaption($p['caption'] ?? '', 150), 'image_url' => $p['media_url'], 'url' => $p['permalink'], 'date' => $p['timestamp'], ]) ->values() ->all(); } } Instagram Feed Widget on a Website
A React component with a grid of 2–4 columns and lazy loading:
function InstagramFeed({ posts }: { posts: Post[] }) { return ( <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2"> {posts.map(post => ( <a key={post.id} href={post.url} target="_blank" rel="noopener" className="aspect-square overflow-hidden rounded group"> <img src={post.image_url} alt={post.caption} loading="lazy" className="w-full h-full object-cover transition-transform group-hover:scale-105" /> </a> ))} </div> ); } How to Organize Caching and Avoid Rate Limits
The API limit is 200 requests per hour per token. We solve this by caching responses in Redis and updating via a background worker. Instagram media CDN links live ~7 days—so we download the files to your server on the first request. This ensures the feed is always fresh, even if the original is deleted. Server-side media caching reduces API load and speeds up page load, saving up to 30% on feed maintenance costs.
How to Handle Errors and Monitor the Integration
Typical issues: expired token, rate limit exceeded, unavailable media. We log every API response to Elasticsearch and set up Telegram/Slack alerts on errors. For example, if a token is about to expire, the scheduler tries to refresh it 5 days before the deadline. On rate limit, we queue requests with exponential backoff. This guarantees uninterrupted feed operation and immediate awareness of any failures. Monitoring enables proactive response, saving up to 2 hours of support per month.
What's Included in the Work
- App configuration in Meta Developer Portal
- Obtaining and auto-renewing long-lived tokens
- Developing a feed display component (React/Vue/native JS)
- Caching media files on your server
- Documentation for token renewal and maintenance
- Monitoring and alerts
Timeline and Cost
| Stage | Time |
|---|---|
| Token retrieval + basic feed | 2–3 days |
| Caching and auto-renewal | +1–2 days |
| Custom widget | +1–2 days |
| Testing and deployment | +1 day |
Timeline ranges from 2 to 7 working days depending on frontend complexity. A precise estimate is provided after a brief. Cost is calculated individually for your project; the basic package includes token retrieval and caching—a ready-to-use integration with no hidden fees. Auto-renewal and monitoring are included.
Common Mistakes and How to Avoid Them
- Wrong account type: Business or Creator required; personal accounts don't work.
- Forgetting to add a Facebook Page: without it, the token cannot be generated.
- Ignoring rate limits: cache responses or use a queue.
- Not renewing the token: set up a cron job 5 days before expiration.
Our team has over 5 years of experience and more than 50 completed Instagram integration projects. If you need a feed without pitfalls, order Instagram integration on your website: we assess your task in one day. Get a consultation on your project—contact us for a scope evaluation.