Вы находитесь в новой версии нашей документации. Сейчас мы активно переносим статьи и некоторый контент может быть не доступен. Вы все еще можете воспользоваться старой версией документации.

ГлавнаяНекстайп: ПраймНастройка готового решенияБлок Instagram-ленты (API Instagram Basic Display)

Блок Instagram-ленты (API Instagram Basic Display)

Виджет Instagram* располагается на главной странице сайта. Изображения в этот блок подгружаются автоматически из привязанного к сайту аккаунта Instagram*.

Для того, чтобы настроить отображение снимков, необходимо получить специальный код "Долгосрочный маркер доступа" и добавить его на сайт с помощью настроек решения.

Инструкция по получению долгосрочного маркера доступа пользователя Instagram*

Прежде чем начать!

Вам понадобятся:

аккаунт разработчика Facebook*;
аккаунт Instagram* с медиафайлами;
общедоступный сайт, принадлежащий вам (это может быть как реальный сайт, так и бесплатный тренировочный ресурс — например, страница Github или веб-приложение Heroku).

Шаг 1. Создайте приложение Facebook*

Перейдите на сайт developers.facebook.com и войдите под своим аккаунтом в Facebook. Нажмите кнопку “Начать”.

Если у Вас нет аккаунта разработчика, то система предложит Вам его создать.

Нажмите “Продолжить”, на следующем пункте укажите свой адрес электронной почты, который будет привязан к Вашему аккаунту как основной. На третьем пункте выберите один из вариантов и завершите регистрацию.

После завершения регистрации откроется страница с приложениями, нажмите “Создать приложение”.

В типах приложений выберите “Потребительское”.

Укажите название приложения и свою электронную почту.

После создания приложения появится интерфейс настройки приложения.

Выберите “Instagram Basic Display”.

Откроется страница с информацией о Вашем новом приложении. Прокрутите до конца и нажмите “Настройки”. Либо на левой панели выберите “Настройки” -> “Основное”.

Откроется страница с настройками, прокрутите до конца и нажмите “Добавить платформу”.

Выберите "Веб-сайт":

Укажите URL своего сайта и сохраните изменения.

Шаг 2. Настройте базовое представление Instagram*

В левом меню выберите Instagram Basic Display, прокрутите страницу до конца и нажмите Create New App.

Заполните форму, как описано ниже.

Отображаемое название

Укажите название приложения Facebook*, которое вы только что создали.

Действительные URI переадресации для OAuth

Укажите URL своего сайта. Это поле предназначено для специального URI, регистрирующего параметры перенаправления, но в данном курсе мы для удобства будем использовать URL вашего сайта.

Пример: https://site.com

Деавторизации URL обратного вызова

Ещё раз укажите URL своего сайта.

URL запроса на удаление данных

Ещё раз укажите URL своего сайта.

Сохраните изменения.

Шаг 3. Добавьте тестового пользователя Instagram*

Выберите "Роли" > "Роли" и прокрутите до раздела "Тестировщики Instagram*". Нажмите "Добавить тестировщиков Instagram*".

Введите ваше имя пользователя Instagram* и отправьте приглашение.

Откройте новое окно браузера, перейдите на сайт www.instagram.com и войдите в приглашенный аккаунт Instagram*. Выберите (Значок профиля) > "Настройки" > "Приложения и сайты" > "Приглашения для тестировщиков" и примите приглашение.

Теперь ваше приложение Facebook* будет иметь доступ к аккаунту Instagram* даже в режиме разработки.

Шаг 4. Авторизуйте тестового пользователя и получите токен доступа

Нажмите “Generate token” в разделе Вашего приложения в Instagram Basic Display и скопируйте токен для подключения API.

В настройках решения вставьте токен и путь к аккаунту Instagram* в соответствующих полях.

Instagram API

Обновление долгосрочного маркера

Обновление долгосрочного маркера делает его действительным в течение 60 дней. Срок действия маркеров, которые не были обновлены в течение 60 дней, истекает.

Введите в адресной строке браузера запрос к API Instagram. Ваш запрос должен включать:

Действительный (не истекший) долгосрочный маркер доступа пользователя Instagram*.

Пример запроса:

https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token=lo..., где long-lived-access-token -- Ваш действующий токен.

Пример ответа:

{

"access_token":"long-lived-user-access-token" // Ваш новый токен

"token_type": "bearer",

"expires_in": 5183944 // Время в секундах до истечения срока действия токена

}

Если всё-таки прошел 60-тидневный срок и Ваш токен доступа истёк Вы можете зайти в раздел из шага 2 и получить новый токен с помощью кнопки “Generate token”.