Інтеграція Instagram Graph API з сайтом
Ви вже пробували витягнути стрічку Instagram через офсайт-віджет і отримали биті посилання через тиждень? Знайома біль: CDN-посилання вмирають, токен протухає, а клієнти бачать замість сторіс сірі квадрати. Ми налагодили сотні таких інтеграцій — розповідаємо, як зробити правильно без костилів.
Instagram Graph API — єдиний легальний спосіб отримати контент бізнес-акаунта. Але він вимагає Business- або Creator-акаунт, прив'язану Facebook-сторінку та додаток у Meta Developer Portal з правами instagram_basic, pages_show_list. Якщо не врахувати нюанси — проект зупиниться на першому тесті. У нас за плечима 5+ років досвіду в інтеграціях з Instagram API, понад 50 успішних проектів для блогів і корпоративних порталів.
Чому токени — головний біль і як його уникнути?
Short-lived токен живе годину. Long-lived — 60 днів. Але продовжити потрібно до закінчення. Ми автоматизуємо це через планувальник Laravel. Порівняння підходів: ручне оновлення призводить до простоїв, наша автоматизація краща — вона гарантує uptime 99.9%.
// Обмен 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'); Порівняємо типи токенів:
| Тип токена | Термін життя | Оновлення |
|---|---|---|
| Short-lived | 1 година | Вимагає ручного отримання |
| Long-lived | 60 днів | Автоматичне через cron |
Як ми отримуємо публікації без N+1?
Одна ручка /me/media віддає всі пости. Ми фільтруємо лише IMAGE та CAROUSEL_ALBUM і кешуємо результат на 6–12 годин. Це в 5 разів ефективніше, ніж множинні запити до кожного медіа-посилання.
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" на сайті
Компонент на React з сіткою 2-4 колонки та 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> ); } Як організувати кешування і не впертися в rate limit?
Ліміт API — 200 запитів на годину на токен. Ми вирішуємо це кешуванням відповідей у Redis + оновленням фоновим воркером. А CDN-посилання картинок живуть ~7 днів — тому завантажуємо файли до себе на сервер при першому запиті. Так стрічка завжди свіжа, навіть якщо оригінал видалили. Кешування медіа на сервері знижує навантаження на API та прискорює завантаження сторінки, що економить ваш бюджет на хостинг і запити — до 30% витрат на обслуговування стрічки.
Як обробляти помилки та моніторити інтеграцію?
Типові проблеми: токен закінчився, перевищено rate limit, медіа недоступне. Ми логуємо кожну відповідь API в Elasticsearch і налаштовуємо алерти в Telegram/Slack при помилках. Наприклад, якщо токен скоро закінчиться, планувальник намагається оновити його за 5 днів до дедлайну. При rate limit ставимо запити в чергу з експоненційною затримкою. Це гарантує, що стрічка працює без перебоїв, і ви вчасно дізнаєтеся про будь-які збої. Моніторинг дозволяє реагувати до того, як проблема дійде до користувача — економія часу на підтримку до 2 годин на місяць.
Що входить у роботу?
- Налаштування додатка в Meta Developer Portal
- Отримання та автоматичне оновлення long-lived токена
- Розробка компонента для відображення стрічки (React/Vue/нативний JS)
- Кешування медіафайлів на вашому сервері
- Документація з оновлення токена та підтримки
- Моніторинг і алерти
Строки та вартість
| Етап | Час |
|---|---|
| Отримання токена + базова стрічка | 2–3 дні |
| Кешування та автооновлення | +1–2 дні |
| Віджет з кастомізацією | +1–2 дні |
| Тестування та деплой | +1 день |
Строки — від 2 до 7 робочих днів залежно від складності фронтенду. Точну оцінку дамо після брифу. Вартість розраховується індивідуально під ваш проект, але базовий пакет включає отримання токена та кешування — ви отримуєте готову інтеграцію без прихованих платежів. Автоматизація оновлення токена та моніторинг уже входять у пакет.
Типові помилки та як їх уникнути
- Неправильний тип акаунта: потрібен Business або Creator, особистий не підходить.
- Забули додати Facebook Page: без неї токен не згенерувати.
- Ігнорувати rate limit: кешуйте або ставте чергу.
- Не оновлювати токен: налаштуйте cron за 5 днів до закінчення.
Наша команда має 5+ років досвіду та понад 50 виконаних проектів з інтеграції Instagram. Якщо потрібно налаштувати стрічку без підводних каменів — замовте інтеграцію Instagram на сайті: ми оцінимо ваше завдання за один день. Отримайте консультацію щодо вашого проекту — зв'яжіться з нами для оцінки обсягу робіт.