Інтеграція Instagram Graph API з сайтом

Інтеграція Instagram Graph API з веб-сайтом

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

Вимоги

• Instagram Business або Creator акаунт
• Facebook Page, пов'язана з вашим акаунтом
• Додаток у Meta Developer Portal з правами instagram_basic, pages_show_list

Отримання токена доступу

// Обмін короткотривалого токена на довготривалий (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');

Довготривалі токени необхідно оновлювати кожні 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 днів). Кеш потрібно регулярно оновлювати
• Ліміт запитів: 200 запитів/годину на токен
• Reels вимагають окремого дозволу instagram_content_publish

Графік

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