Лента instagram на сайте с 2020 года: с использованием API
Отредактировано: 01 Июня 2020
От регулярных изменений командой фейсбука политики доступа к контенту инстаграмма, в интернете появилось множество не работающих виджитов, плагинов и прочих статей о том как создать ленту на сайте. Работоспособность данного метода вы можете увидеть в нижней части страницы.
С начала 2020 года инстаграм закрывает базовый доступ к API (instagram basic API). С этой поры работает 2 уровня доступа:
Для создания ленты на сайте, сперва надо зарегистрировать аккаунт разработчика на фейсбуке. Затем, создать в интерфейсе разработчика новое приложение. Для простого отображения ленты на сайте проверка приложения не требуется, и главная задача — правильно заполнить нужные поля.
Настройка приложения
После того как дадите доступ тестовому пользователю к своему инстаграму, необходимо оформить ключ доступа (Access Token). Ключи бывают двух видов: короткий, действующий в течении часа, и длинный, на 60 дней.
Получение Access Token
Маркер доступа можно получать так как указано в документации, или путем использования скрипта. Cуть дальнейших действий — залогиниться тестовым пользователем, получить данные о состоянии аккаунта, записать данные в отдельный файл (в случае MODX в чанк) и выводить данный файл/чанк в соответствующем месте.
Php скрипт для получения access token с прошлой версии не изменился, за исключением того, что ключ теперь лучше оформить в отдельный запрос, который появится в статье позже. Итак, для получения токена сперва надо получить код авторизации по ссылке: введите в браузере ссылку для запроса параметра code, в которой CLIENT-ID заменить на полученный в процессе регистрации ID, а REDIRECT-URL заменить на адрес который был введен в поле OAuth redirect_uri. Код ссылки:
Для получения краткосрочного токена используйте следующий php фрагмент (в случае если используете MODX, вставьте в снипет и выведете на скрытой странице):
Дальше, необходимо воспользоваться оформлением долгосрочного токена. А в идеале, необходим скрипт, который самостоятельно будет обновлять код с использованием соответствующей возможности API. В данной статье только разрозненные куски кода, которые я предлагаю собрать вам самостоятельно. Это не вредность, это декрет 😉
Пример кода для вывда долгосрочного маркера доступа:
Вывод ленты Instagram на сайте
После того как получили Access Token, используйте примерно такой код (в случае если у вас MODX, вставьте данный код в сниппет и вызывайте по крону):
Для корректной работы на хостинге / сервере должна быть установлена библиотека cURL
Если у вас MODX, то для удобства можно вынести html в отдельный чанк:
Результатом работы сниппета будет созданный или обновленный чанк block.instafeedList_2020, который надо вызвать в том месте шаблона, где должна располагаться лента
Доступные поля для получения информации о пользователе (в документации):
Доступные поля для получения информации о медиафайлах (в документации):
Планируйте публикации с помощью нового API Graph для Instagram
АВТОР: Команда Instagram Business
В прошлом году мы начали обновлять API Instagram до API Graph для Instagram — компонента API Graph для Facebook. API Graph для Instagram помогает компаниям более эффективно управлять своим органическим присутствием на нашей платформе. Сегодня мы представляем новые функции этого API, позволяющие компаниям планировать публикации, а также просматривать публикации, где их отметили, и другие бизнес-профили.
Ранее мы уже представляли другие функции API Graph для Instagram, такие как просмотр статистики органического охвата и модерация комментариев. Новые возможности делают планирование контента и управление защитой аккаунта значительно удобнее. В частности, вашим сотрудникам больше не придется передавать друг другу учетные данные, чтобы получить доступ к статистике аккаунта или создать публикацию.
Чтобы начать планировать публикации, обратитесь к одному из партнеров Facebook по маркетингу или партнеров Instagram.
Instagram стремится предоставить разработчикам самые эффективные инструменты для развития бизнеса на нашей платформе, поэтому мы будем и дальше добавлять в API Graph для Instagram новые функции. Поддержка платформы API Instagram будет прекращена лишь в начале 2020 г., поэтому у разработчиков будет достаточно времени, чтобы перейти на API Graph для Instagram.
Подробнее о миграции аккаунта и обновлениях API Graph для Instagram см. здесь.
Получаем посты из своего аккаунта Instagram посредством нового API Instagram Basic Display
Создание приложения
Для начала нам необходимо создать учетную запись разработчика на Facebook и создать приложение. Для этого переходим на https://developers.facebook.com/, авторизуемся (если обычного аккаунта Facebook у вас нет, то система в любом случае предложит начать с его создания) и в меню «Мои приложения» выбираем «Создать приложение». После чего указываем название приложения и почту, нажимаем «Создайте ID приложения».
Укажите адрес вашего сайта, на котором вы будете размещать ленту из Instagram. Сохраните изменения.
Платформу можно не указывать, работать будет и без нее. Но в официальной документации данный пункт присутствует, поэтому я включил его в туториал. Скорее всего это необходимо для прохождения приложением проверки, но мы обойдемся и без нее. Так как нам достаточно только создать токен для доступа к данным аккаунта — об этом далее.
Затем перейдите в меню «Товары» и выберите Instagram, нажав на кнопку «Настроить». Страница обновится и появится дополнительное меню слева. Перейдите в меню «Basic Display» и внизу нажмите на кнопку «Create New App».
В открывшемся окне вводим название нашего приложения. После этого откроется страница настроек, где необходимо указать адрес нашего сайта. Во все три поля вводим одно и то же значение — этого будет достаточно для нашей задачи. Обратите внимание, что адрес сайта обязательно должен быть с https. Сохраняем данные и далее нажимаем на кнопку «Add or Remove Instagram Testers».
Внизу страницы нажимаем на «Добавить Instagram Testers». В окошке вбиваем название аккаунта, из которого будем тянуть фотографии и нажимаем «Отправить».
Далее нам необходимо перейти на сайт https://www.instagram.com/, залогиниться в аккаунт, указанный в приложении как тестировщик, и перейти в настройки, выбрав пункт «Apps and Websites».
Переходим во вкладку «Tester invites» и нажимаем «Accept» напротив нашего приложения.
Возвращаемся в кабинет разработчика Facebook и переходим в меню Basic Display и напротив нашего аккаунта нажимаем «Generate Token».
В открывшемся окне нам нужно войти в свою учетную запись Instagram, после чего нам будет предложено скопировать токен для доступа к Instagram API.
Это и есть так называемый long-lived token, который будет действителен в течении 60 дней. И именно его можно периодически обновлять — обновление доступно спустя сутки после создания/обновления предыдущего токена.
Получение ленты Instagram на PHP
Итак, настроив приложение в кабинете разработчика Facebook, можно приступать к интеграции ленты на сайт. Я буду использовать Heroku, так как на нем есть https и он позволяет бесплатно хостить простые приложения, но вы можете использовать любой подходящий вариант. Также обратите внимание на то, что в примерах кода используется библиотека curl — убедитесь, что она у вас установлена.
Предположим, что токен, а также дата его создания, будут храниться в базе данных. В примерах я базу использовать не буду, это не так важно в данном случае, поэтому обойдусь комментариями.
Сперва проверяем дату создания токена. Если токен был создан около 60 дней назад (но не более, иначе обновить не получится), то сперва нам нужно его обновить. Для этого используем endpoint GET /refresh_access_token.
Данные приходят в JSON-формате, а сам токен содержится в свойстве access_token.
Обновив токен, или же если он у нас был не такой уж и старый, мы можем отправить запрос на получение ленты из нашего аккаунта. С помощью Basic Display API можно получить изображения, видео, а также подписи к ним и ссылки на публикации. Для получения данных нам понадобится endpoint GET /me/media
Данные будут содержаться в свойстве data. Список всех возвращаемых свойств:
Но тут возникает проблема, решение которой я не нашел в документации. Если в ленте у нас есть публикации в виде альбомов (media_type будет равен CAROUSEL_ALBUM), то есть несколько изображений/видео в одном посте, то в ответе на запрос придет только первое изображение в карусели. Для получения всех изображений в параметре fields нам нужно указать параметр children. Но и в этом случае мы получим только id изображений:
В документации указано, что для получения изображений из карусели необходимо использовать endpoint GET /
Отправив такой запрос, мы получим все изображения постов, а в свойстве children помимо id будут находится все свойства, перечисленные в параметре запроса children
В итоге, наш окончательный код будет выглядеть так:
Обратите внимание, что я использую дополнительный параметр limit для указания количества получаемых постов. Если его не указать, то вернется количество по умолчанию, а именно 25. Если постов больше, чем запрашиваемое количество, то в ответе придет свойство paging, где будут указаны ссылки для пагинации, то есть для получения следующих и предыдущих постов.
Работающий код можно посмотреть тут.
Исходники тут.
Вывод постов из Instagram на сайт с помощью API
У инстраграма нет готового виджета для вывода постов на сайте. В прошлой статье мы рассматривали как создать Instagram виджет для сайта с помощью конструктора. Это самый простой и быстрый способ, и на мой взгляд самый лучший. Единственный его минус, как и в любом другом шаблонном конструкторе — это ограниченное изменение внешнего вида и функционала. Но с большинством задач конструктор вполне справится.
Если же вы хотите, что-то особенное, то тогда придется выводить посты с помощью API Instagram. В этой статье вы найдете уже готовый класс на PHP для работы с инстраграм. Это библиотека, которая облегчит вам жизнь, и которую вы можете использовать в своих проектах.
Получите токен Instagram
На данный момент для получения токена в Instagram требуется так же аккаунт разработчика Facebook.
1. Перейдите по ссылке https://developers.facebook.com и нажмите «Начать», затем во всплывающем окне «Далее».
2. На вновь открывшемся окне выберите «Создать свое первое приложение».
3. Введите желаемое имя и E-mail.
4. После заполнения формы страница будет перезагружена. Вас перенаправят на страницу панели нового приложения. В меню выберите Настройки → Основное.
5. В самом низу нажмите «Добавить платформу».
6. В открывшемся окне выберите платформу «Веб-сайт».
7. В конце страницы появится выбранная платформа «Веб-сайт» и поле для ввода URL-адреса сайта. Заполните его и сохраните изменения.
8. В меню нажмите «Товары», найдите карточку Instagram и перейдите к ее настройке.
9. После того, как вы перейдете к настройке товара, он станет доступным в левом меню. Разверните пункт «Instagram» и выберите пункт «Basic Display». Внизу страницы нажмите «Create New App».
Появится всплывающее окно, в котором будет указано ранее заполненное название приложения. На этом шаге просто сохраните изменения.
10. После сохранения настроек станут доступны новые поля. Необходимо заполнить следующие:
Во всех полях нужно указать адрес сайта, для которого будет настраиваться виджет.
11. В левом меню выберите пункт «Роли», в выпадающем меню еще раз пункт «Роли». На открывшейся странице выберите «Добавить Instagram Testers».
12. В открывшемся окне укажите имя пользователя аккаунта Instagram. После выбора отправьте приглашение пользователю.
13. Пользователь появится в списке тестировщиков, но со статусом «На рассмотрении». Чтобы подтвердить приглашение, необходимо перейти по ссылке в тексте.
13. Ссылка ведет на сайт Instagram, необходимо авторизоваться, чтобы принять приглашение. На открывшейся странице перейдите в Приложения и сайты → Приглашения для тестировщиков. Примите приглашение.
14. Разверните пункт «Instagram» и выберите пункт «Basic Display». В блоке «User Token Generator» нажмите кнопку «Generate Token».
15. Если вы не авторизованы, войдите в свой профиль Instagram. На открывшейся странице нажмите кнопку «Авторизовать». После успешной авторизации необходимо согласиться с предупреждением о необходимости передачи токена только доверенным лицам. Далее перед вами откроется окно в вашим токеном. Ваш токен сгенерирован, скопируйте его!
Библиотека на PHP для работы с Instagram API
К сожалению в Instagram нет стандартного функционала для вывода виджета на сайт, такого как например Вконтакте и Facebook. Но есть несколько способов создать подобный виджет. Первый это написать такой самому, второй воспользоваться готовым кодом конструктора. По сути конструктор это тоже Читать далее
Абсолютно любой предмет из нашей жизни мы можем описать по его характеристикам и состоянию, а так же воздействовать на это состояние. Например, ваш автомобиль имеет определенный цвет, марку, двигатель и т.д. Кроме того он может ехать, стоять, набирать или сбавлять Читать далее
Удалить значение из массива по ключу на PHP довольно простая задача, но вот когда необходимо удалить элемент массива именно по значению, то тут возникают небольшие сложности. Вроде бы банальная задача, но придется воспользоваться небольшой хитростью. В этой статье рассмотрим как Читать далее
В этой статье рассмотрим как создать простого чат-бота для Viber, который будет принимать и отправлять сообщения в чат. Шаг 1 Итак, для начала необходимо зарегистрироваться в сервисе Viber Admin Panel по этой ссылке. Шаг 2 Создаём бота. Для этого заполняем Читать далее
Instagram API Basic Display — получение токена, первый запрос
API Instagram Basic Display, то есть базовый интерфейс instagram API — это API для сторонних приложений и веб сайтов, с помощью которого они могут получить данные профиля пользователя Instagram, а также его видео и изображения.
Быстрая навигация:
Принцип работы API такой: сначала вы показываете пользователю окно авторизации, где он проходит процедуру аутентификации и авторизует ваше приложение для доступа к своим данным, а так же дает определенные разрешения. После аутентификации пользователь перенаправляется обратно в ваше приложение (веб сайт), в url которого будет добавлен код авторизации. Вам нужно будет получить этот код и обменять его на access token. Получив этот токен, вы сможете делать запросы к API и использовать данные и медиа, доступ к которым разрешил вам пользователь.
Не все данные пользователя будут доступны вам сразу. Для полноценной работы вашему приложению потребуется получить от пользователя следующие разрешения:.
Для того чтобы вы смогли получать от настоящего пользователя такие разрешения, вашему приложению нужно будет пройти процесс проверки. На проверку приложение необходимо будет направить после того как вы закончите процесс разработки. Сделать это можно будет на вкладке Basic Display > Проверка приложения «Instagram Basic Display»
Давайте начнем разработку.
1 Создание facebook приложения
Для начала перейдите по ссылке https://developers.facebook.com и войдите в свой facebook аккаунт. Затем нажмите вкладку Мои приложения и создайте новое. Или нажмите кнопку Начать, если вы не создавали facebook приложений ранее.
Вы окажетесь в панели facebook для разработчиков, нажмите Настройки, затем Основное. В этой форме нам понадобится заполнить данные:
Введите адрес сайта и сохраните изменения.
2 Настройка Instagram API Basic Display
Перейдите в раздел Basic Display и внизу страницы нажмите кнопку Create New App
Перед нами форма с настройками Basic Display. Желательно заполнить в ней все поля. Приступим:
3 Добавляем тестировщика Instagram
Добавим к нашему приложению пользователя для тестов. Такие пользователи могут проверять приложение только в режиме разработки. В боковой панели нажмите Роли > Роли и прокрутите страницу вниз до раздела Тестировщики Instagram. Нажмите кнопку Добавить тестировщика
Откройте новое приватное окно браузера и войдите в instagram профиль тестировщика. А в панели для разработчиков введите id этого пользователя, чтобы пригласить его. После чего тестировщику придет уведомление, с просьбой принять запрос из вашего приложения, которое тестировщик должен подтвердить. Чтобы это сделать, нужно зайти в профиль инстаграм, нажать Редактировать профиль, выбрать вкладку Приложения и сайты > Приглашения для тестировщиков.
4 Аутентификация тестировщика
В новом окне браузера вставьте сгенерированный URL. Должно появиться окно с именем приложения и вашего тестировщика. Нажмите авторизовать, чтобы предоставить приложению доступ к данным вашего профиля. Если все пройдет успешно, вы окажитесь на странице, которую вы указывали в поле URI. Посмотрите на URL, в конце после строки ?code= будет добавлен код авторизации. Скопируйте его без символов #_ в конце и сохраните под рукой. Этот код действует в течении 1 часа.
5 Получение токена Instagram API Basic Display
Для следующего шага нам понадобится интерфейс командной строки. Для отправки cURL запроса мы будем использовать Cmder. Отправьте следующий POST запрос в Instagram API:
Если вы нигде не ошиблись, вам придет JSON объект содержащий access token и id пользователя-тестировщика. Скопируйте токен, он нам понадобится в следующем шаге.
Токены доступа пользователей Instagram не долговечны и действительны только в течении 1 часа.
6 Запрос на получения имени пользователя
Попробуем получить имя пользователя. Для этого скопируйте url ниже, и замените в нем USER-ID и ACCESS-TOKEN данными, которые мы получили ранее.
Если вы все сделали правильно, Instagram API вернет вам JSON с id и именем пользователя.
Вы также можете использовать узел Me, который сам определит id пользователя Instagram, который предоставил токен. Результат будет таким же.
Параметр fields может содержать следующие значения: