Интеграция Instagram Graph API с сайтом

Интеграция Instagram Graph API с сайтом

Instagram Graph API позволяет отображать публикации бизнес-аккаунта на сайте, получать статистику, управлять комментариями. Доступен только для профессиональных аккаунтов (Business или Creator).

Требования

• Instagram Business или Creator аккаунт
• Facebook Page, привязанная к аккаунту
• Приложение в Meta Developer Portal с правами instagram_basic, pages_show_list

Получение токена

// Обмен short-lived token на long-lived (60 дней)
$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 токен нужно обновлять каждые 60 дней. Реализуем задачу в планировщике.

Получение публикаций

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" на сайте

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

• Медиафайлы (image_url) доступны по CDN-ссылкам Instagram с ограниченным сроком жизни (~7 дней). Нужно периодически обновлять кэш
• Rate limit: 200 запросов/час на токен
• Reels требуют отдельного разрешения instagram_content_publish

Сроки

Отображение ленты публикаций с кэшированием: 2–3 рабочих дня.