Вывод постов из Instagram на сайт с помощью API

instagram-9016038

26 мая 2020 PHP Instagram

У инстраграма нет готового виджета для вывода постов на сайте. В прошлой статье мы рассматривали как создать Instagram виджет для сайта с помощью конструктора. Это самый простой и быстрый способ, и на мой взгляд самый лучший. Единственный его минус, как и в любом другом шаблонном конструкторе — это ограниченное изменение внешнего вида и функционала. Но с большинством задач конструктор вполне справится.

Если же вы хотите, что-то особенное, то тогда придется выводить посты с помощью API Instagram. В этой статье вы найдете уже готовый класс на PHP для работы с инстраграм. Это библиотека, которая облегчит вам жизнь, и которую вы можете использовать в своих проектах.

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

На данный момент для получения токена в Instagram требуется так же аккаунт разработчика Facebook.

1. Перейдите по ссылке https://developers.facebook.com и нажмите «Начать», затем во всплывающем окне «Далее».

instagram1-1024x442-5502354 Facebook for Developers

2. На вновь открывшемся окне выберите «Создать свое первое приложение».

instagram2-8915126 Создать свое первое приложение

3. Введите желаемое имя и E-mail.

instagram3-6774237 Создание нового приложения

4. После заполнения формы страница будет перезагружена. Вас перенаправят на страницу панели нового приложения. В меню выберите Настройки → Основное.

instagram4-1024x487-7874883 Страница нового приложения

5. В самом низу нажмите «Добавить платформу».

instagram5-1024x491-8684198 Добавить платформу

6. В открывшемся окне выберите платформу «Веб-сайт».

instagram6-6243929 Выбор платформы

7. В конце страницы появится выбранная платформа «Веб-сайт» и поле для ввода URL-адреса сайта. Заполните его и сохраните изменения.

instagram7-1024x475-9702482 URL-адрес сайта

8. В меню нажмите «Товары», найдите карточку Instagram и перейдите к ее настройке.

instagram8-1024x398-2337202 Меню товары

9. После того, как вы перейдете к настройке товара, он станет доступным в левом меню. Разверните пункт «Instagram» и выберите пункт «Basic Display». Внизу страницы нажмите «Create New App».

instagram9-1024x357-3092934 Create New App

Появится всплывающее окно, в котором будет указано ранее заполненное название приложения. На этом шаге просто сохраните изменения.

10. После сохранения настроек станут доступны новые поля. Необходимо заполнить следующие:

  • Действительные URI переадресации для OAuth.
  • Деавторизация URL обратного вызова.
  • URL запроса на удаление данных.

Во всех полях нужно указать адрес сайта, для которого будет настраиваться виджет.

instagram10-5738330 Клиентские настройки OAuth

11. В левом меню выберите  пункт «Роли», в выпадающем меню еще раз пункт «Роли». На открывшейся странице выберите «Добавить Instagram Testers».

instagram11-9668706 Добавить Instagram Testers

12. В открывшемся окне укажите имя пользователя аккаунта Instagram. После выбора отправьте приглашение пользователю.

instagram12-1280544 Добавление пользователя

13. Пользователь появится в списке тестировщиков, но со статусом «На рассмотрении». Чтобы подтвердить приглашение, необходимо перейти по ссылке в тексте.

instagram13-2145002 Тестировщики Instagram

13. Ссылка ведет на сайт Instagram, необходимо авторизоваться, чтобы принять приглашение. На открывшейся странице перейдите в Приложения и сайты → Приглашения для тестировщиков. Примите приглашение.

instagram14-9146256 Приложения и сайты

14. Разверните пункт «Instagram» и выберите пункт «Basic Display». В блоке «User Token Generator» нажмите кнопку «Generate Token».

instagram15-1024x440-1286979 Generate Token

15. Если вы не авторизованы, войдите в свой профиль Instagram. На открывшейся странице нажмите кнопку «Авторизовать». После успешной авторизации необходимо согласиться с предупреждением о необходимости передачи токена только доверенным лицам. Далее перед вами откроется окно в вашим токеном. Ваш токен сгенерирован, скопируйте его!

instagram16-3931364 Сгенерированный токен

Библиотека на PHP для работы с Instagram API

Использование библиотеки:

В массиве $instPosts будут содержаться все данные постов.

  

Read More