Содержание
Вообще конечно, такие просмотрщики, как Fancybox, можно спокойно прикрутить и в том случае, если вы выводите фото из Instagram через JavaScript.
Для меня же метод вывода через JavaScript имеет два существенных преимущества:
- Асинхронные запросы в JavaScript не мешают быстрой загрузке страниц вашего сайта, в то же время наоборот, подкючение к API через cURL (PHP метод) может увеличить время ответа сервера.
- Если вы поставите кэширование (например плагин WP Super Cache для WP), то в PHP-способе новые фото не будут выводиться сразу же.
В то же время есть такие случаи, когда подходит только PHP-метод подключения к API, иначе зачем бы я вообще стал его рассматривать.
Подготовка. Функция подключения к API Инстаграм через cURL.
В первую очередь создадим функцию, которая будет подключаться к API Инстаграм и возвращать результат. Она вполне подойдёт для любых GET-запросов к Instagram API.
Добавьте её куда-нибудь в код своего сайта. Если это WordPress, то в файл functions.php текущей темы. Она понадобится нам во всех примерах, как средство подключения к API через cURL
А теперь перейдем к самим примерам.
Готовые к использованию примеры
И ещё одно, в каждом примере вам понадобится Access Token, о том, где его взять, я уже писал здесь.
Кроме того, если созданное вами приложение находится в песочнице (Sandbox Mode), то будут действовать ещё некоторые ограничения, вы сможете только:
- выводить информацию о пользователе, которому принадлежит Access Token (в этой статье мы как раз получали данные о количестве подписчиков, подписок и т.д.)
- Выводить не более 20 последних фото/видео пользователя, которому принадлежит токен.
- Вы можете использовать запросы и для вывода по тегу, но имейте ввиду, что результаты будут ограничены пунктом 2.
Если такие ограничения вас никак не устраивают, то статью дальше можете не читать.
По ID пользователя
Я не стал усложнять код и сделал вывод результатов в виде: ссылка (тег ) +картинка (тег ).
Так как согласно заголовку поста, мы хотим использовать последующие примеры в связке с лайтбоксом (например Fancybox), то я сделал для этого следующее:
- В атрибуте href указана не ссылка на сам пост в Инстаграм $post->link , а ссылка на самое большое разрешение изображения, в Инстаграм это 612х612, $post->images->standard_resolution->url
- В качестве же изображения, которое находится внутри ссылки используется наименьшее разрешение 150х150 $post->images->thumbnail->url .
- Каждой ссылке присвоен класс fancybox , но вы конечно можете использовать и другой селектор для инициализации лайтбокса.
Вывод постов фото / видео по хэштегу
Смотрите также
Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2019 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.
Статья неактуальна т.к. Instagram и Facebook перестали предоставлять свободный доступ к API, теперь работа ограничена только с личным профилем и доступна после проверки приложения (в Facebook отправляется запрос с обоснованием и скриншотами работы приложения).
Чтобы работать с API нужно сделать несколько действий:
1. Зарегистрироваться в разделе для разработчиков – https://www.instagram.com/developer/register/
2. После этого нужно добавить клиента (кнопка «Register a New Client»). В форме указать название и описание клиента, адрес вашего сайта и адрес редиректа (Valid redirect URIs) – он будет использован для получения токена. Важно также указать название компании, e-mail и Privacy Policy иначе клиент будет не активным.
После отправки формы вы получите CLIENT ID , далее нажав на кнопку «Manage», вкладка «Security» – нужно снять флаг «Disable implicit OAuth».
3. Далее нужно авторизовать клиента и получить access_token . Для этого понадобится сформировать ссылку подставив свои client_id , redirect_uri и перейти по ней в браузере:
https://www.instagram.com/oauth/authorize/?client_ >CLIENT_ID &redirect_uri= http://test.ru/ &response_type=token
После подтверждения прав произойдет редирект на ваш сайт с access_token в URL.
UPDATE: Starting October 15, 2019, new client registration and permission review on Instagram API platform are discontinued in favor of the Instagram Basic Display API .
To continuously improve Instagram users’ privacy and security, we are accelerating the deprecation of Instagram API Platform, making the following changes effective immediately. We understand that this may affect your business or services, and we appreciate your support in keeping our platform secure.
These capabilities will be disabled immediately (previously set for July 31, 2018 or December 11, 2018 deprecation). The following will be deprecated according to the timeline we shared previously :
- Public Content — all remaining capabilities to read public media on a user’s behalf on December 11, 2018
- Basic — to read a user’s own profile info and media in early 2020
For your reference, information on the new Instagram Graph API .