Instagram Graph API integration with website

Instagram Graph API Integration with Website

Instagram Graph API allows displaying business account publications on your website, retrieving statistics, and managing comments. Available only for professional accounts (Business or Creator).

Requirements

• Instagram Business or Creator account
• Facebook Page linked to your account
• Application in Meta Developer Portal with instagram_basic, pages_show_list permissions

Obtaining Access Token

// Exchange short-lived token for long-lived token (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');

Long-lived tokens must be refreshed every 60 days. Implement this as a scheduled task.

Retrieving Publications

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 Website

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>
  );
}

API Limitations

• Media files (image_url) are available via Instagram CDN links with limited lifetime (~7 days). Cache must be refreshed periodically
• Rate limit: 200 requests/hour per token
• Reels require separate instagram_content_publish permission

Timeline

Displaying publications feed with caching: 2–3 business days.