Вывод фото из инстаграм на сайт
Что делать если вы хотите вывести изображения из Instagram на своем сайте, но совершенно не хотите связываться с Instagram API? Выход есть и он даже проще, чем вы можете себе представить. Все что нам нужно будет сделать — это установить и настроить jQuery библиотеку jquery.instagramFeed.
Начнем с установки. Для работы библиотеки требуется jQuery, подключим его через CDN.
HTML
Скачайте и подключите файл jquery.instagramFeed.min.js . Или посмотрите библиотеку на GitHub.
HTML
Создайте в разметке контейнер, в котором будет отображаться изображения из инстаграм.
HTML
Инициализируем библиотеку. Мы можем получить медиа файлы либо по имени пользователя, либо по тегу. По имени пользователя существует ограничение: не более 12 изображений. По тегу вы сможете получить значительно больше. Обратите внимание, что для работы библиотеки вам не нужен access token.
HTML
(functionwindow).on('load', functioninstagramFeedusername': 'instagram', //Имя пользователяcontainer': "#instafeed", //Контейнер для изображенийdisplay_profile': false, //Отображение профиляdisplay_biography': false, //Отображение биографииdisplay_gallery': true, //Отображение галереиstyling': true, //Стандартные стили библиотекиitems': 8, //Количество изображений в галереиitems_per_row': 4, //Количество изображений в рядmargin': 0.5 //Отступ между изображениямиjQuery);
В результате мы получаем такую галерею:
Если вам не нравятся стандартные стили, их можно отключить, установив значение 'styling': false,. В результате работы библиотеки вы получите следующую разметку, напишите для нее собственные стили:
HTML
@Instagram (@instagram)
http://res.cloudinary.com/drf3eqq87/image/upload/v1655236606/p33-1.jpg.src="http://res.cloudinary.com/drf3eqq87/image/upload/v1655236606/p33-1.jpg" alt="instagram instagram image 0http://res.cloudinary.com/drf3eqq87/image/upload/v1655236606/p33-1.jpgimg src="http://res.cloudinary.com/drf3eqq87/image/upload/v1655236606/p33-1.jpg" alt="instagram instagram image 0http://res.cloudinary.com/drf3eqq87/image/upload/v1655236606/p33-1.jpg
ОпцииАтрибутПо умолчаниюОписаниеИмя пользователя Instagram, от которого будет получена лентаInstagram тег, по которому будет получена лентаСелектор, в котором будет размещена лента. Требуется, если get_data имеет значение falseФункция обратного вызова. Применяется только если включена get_dataПозволяет получать необработанные данные с помощью функции callbackb>display_profileВключает отображение профиляb>display_biographyПозволяет отображать биографию. Только для пользователейb>display_galleryПозволяет отображать галереюb>display_igtvВключает отображение канала IGTV, если доступно. Только для пользователейВключает стиль по умолчаниюКоличество изображений для отображения в галерее. Допустимые значения [0-12Отступы между изображениями в галерееb>image_sizeРазмер изображений. Допустимые значения - 150, 240, 320, 480, 640. Не распространяется на превью видеоhttps://www.instagram.comURL, где можно получить данные. Полезно, если Instagram меняет политику CORSinstagram_gallery a:last-of-type imgmargin-bottom: 10px !importanttable__rowgrid-template-columns: 1fr 1fr 2frmedia (min-width: 768pxinstagram_gallery a:last-of-type imgmargin-bottom: 20px !importantp> Если вы не хотите использовать jQuery, то можно скачать библиотеку InstagramFeed.min.js. Это та же самая библиотека, но без jQuery. Ее опции ничем не отличаются, вот пример ее инициализации:
HTML
(functionnew InstagramFeedusername': 'instagramcontainer': "#instafeeddisplay_profile': truedisplay_biography': truedisplay_gallery': truecallback': nullstyling': trueitems': 8items_per_row': 4margin': 1pre>
Надеюсь, что данный материал был полезен. Если вас интересует Instagram API, посмотрите нашу статью о Instagram API Basic Display
вывод фото из инстаграм на сайт
Уверен, вы видели немало сайтов, у которых где-нибудь в сайдбаре или в футере есть небольшой виджет с фотографиями из Instagram. В виджетах могут выводить как все фотографии пользователя, так и фотографии, отмеченные каким-либо тегом.
Пока что еще не встречал хороший плагин без багов и косяков, которые позволял бы выполнять эти две функции (возможность создания виджета фотографий пользователя Instagram либо фоток по тегу), если вы знаете такой плагин, буду рад, если поделитесь в комментах.
Пока что мы разберемся только с тем, как выводить ленту фотографий пользователя, о том, как выводить фото по тегу, будет написано чуть позже, а насколько позже — это зависит от количества просмотров и комментариев, которые наберет этот пост, кроме того, согласно последним изменениям в API, для вывода по тегу нужно вытаскивать приложение из песочницы (Sandbox mode).
В этом посту я подразумеваю, что у вас уже есть базовые знания PHP, поэтому описываю только то, что связано непосредственно с работой с API Instagram и не объясняю, что такое foreach, array_slice() и т.д.
Шаг 1. Регистрация приложения в Instagram, получение Access токена
Это шаг номер один, то, что вы должны сделать прежде всего, иначе никакой из последующих кодов и виджетов у вас работать не будет (плагин будет).
Ничего сложного тут нет, для начала авторизуемся (или регистрируемся) в инстаграм и переходим по этой ссылке: http://instagram.com/developer/. В итоге мы попадаем на страницу:
После нажатия на кнопку «Register Your Application» вы попадете на страницу со всеми зарегистрированными вами приложениями:
Итак, нажали на кнопку «Регистрация новой программы» и попали на страницу с формой co следующими полями:
Application name — название приложения. Нельзя использовать производные от слов Instagram, IG, Insta или gram.
Description — описание.
Website — сайт. Неважно, какой сайт вы укажите в этом поле — вывод фотографий по тегу будет работать в любом случае, даже на локалке. Указывать URL нужно с http://.
OAuth redirect_uri — куда перенаправлять пользователя после авторизации приложения или отмены — тут важно указать URL, который нужен в инструменте получения токена.
Ну вот и всё, вводим капчу и нажимаем кнопку «Register», чтобы создать приложение. Обратите внимание на CLIENT ID и CLIENT SECRET приложения — они понадобятся вам для получения Access Token уже в инструменте.
Сейчас будем выводить все фото конкретного пользователя из инстаграм, но прежде чем начать, убедитесь, что вы уже зарегистрировали приложение в Шаге 1.
Кроме того, вам необходимо обратить внимание, что если ваше приложение находится в режиме песочницы, то вы можете выводить только фото/видео того пользователя, которому принадлежит токен только 20 последних фото. Хотите снять эти ограничения? Отправляйте своё приложение на одобрение.
Ниже расположен листинг с кодом для вывода фото, вы можете вставить этот код непосредственно туда, где собираетесь выводить фотографии, а можете создать PHP-функцию с несколькими параметрами.
/*
* создаем новое подключение к API Instagram, о том, как получить $token, написано выше;
*/
$token = 'тут указывайте свой Access Token';
/*
* Тут указываем либо ID пользователя, либо "self" для вывода фото владельца токена
* Как получить ID? Да в том же инструменте, в котором вы получали токен
*/
$user_id = 'self';
$instagram_cnct = curl_init(); // инициализация cURL подключения
curl_setopt( $instagram_cnct, CURLOPT_URL, "https://api.instagram.com/v1/users/" . $user_id . "/media/recent?access_token=" . $token ); // подключаемся
curl_setopt( $instagram_cnct, CURLOPT_RETURNTRANSFER, 1 ); // просим вернуть результат
curl_setopt( $instagram_cnct, CURLOPT_TIMEOUT, 15 );
$media = json_decode( curl_exec( $instagram_cnct ) ); // получаем и декодируем данные из JSON
curl_close( $instagram_cnct ); // закрываем соединение
/*
* количество фотографий для вывода
*/
$limit = 4;
/*
* размер изображений (высота и ширина одинаковые)
*/
$size = 200;
/*
* функция array_slice() задает количество элементов, которые нам нужно получить из массива
* если нам нужно вывести все фото, тогда: foreach($media->data as $data) {
*/
foreach(array_slice($media->data, 0, $limit) as $data) {
echo ' . $data->link . '" target="_blank">';
echo '';
echo '';
}
На моем тестовом сайте этот код вывел 4 изображения из моего профиля, со ссылками. То есть по логике получаем, что $data->link — это ссылка, а $data->images->low_resolution->url — URL изображения. Давайте рассмотрим больше параметров полученного объекта $data.
В описание параметров я использовал переменные $data, $comment и $user — это сделано ради простоты и удобства, названия этих переменных могут быть какими угодно. Если вы хоть немного разбираетесь в PHP, вам не нужно это объяснять.
$data->id ID публикации. $data->link Ссылка на это изображение в Instagram. $data->images->low_resolution->url URL копии изображения низкого разрешения (306×306). $data->images->thumbnail->url URL изображения-миниатюры (150×150). $data->images->standard_resolution->url URL копии изображения стандартного разрешения (612×612). $data->tags Массив, содержащий все теги данного изображения. $data->filter Название используемого фильтра. $data->caption->text Описание фото. $data->created_time Дата публикации в UNIX-формате. Мы можем изменить формат даты при помощи функции gmdate():echo gmdate("Y-m-d H:i", $data->created_time);
$data->user->username
Имя пользователя, который запостил фотографию.
$data->user->id
ID пользователя.
$data->user->full_name
Полное имя пользователя.
$data->user->profile_picture
URL аватарки пользователя.
$data->comments->count
Количество комментариев к изображению.
$data->comments->data
Массив объектов комментариев, который также можно пропустить через цикл foreach и получить информацию о каждом оставленном комменте, например:
// выводим текст каждого комментария и имя пользователя, оставившего его foreach( $data->comments->data as $comment ) : echo '
' . $comment->from->username . '
' . $comment->text . '
Тогда получаем следующие параметры комментариев:
$comment->created_time Дата публикации комментария в UNIX формате. $comment->id ID комментария. $comment->text Текст комментария. $comment->from->username Имя пользователя, оставившего комментарий. $comment->from->id ID пользователя. $comment->from->full_name Полное имя пользователя. $comment->from->profile_picture URL аватарки пользователя. $data->likes->count Количество «лайков». $data->likes->data Массив объектов пользователей, которым понравилась фотография, также можно пропустить через цикл foreach:// в качестве примера давайте выведем имена всех пользователей, которым понравился пост foreach( $data->likes->data as $user ) : echo $user->username . '$user->id ID пользователя. $user->username Имя пользователя. $user->full_name Полное имя. $user->profile_picture URL аватарки.
'; endforeach;
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Для многих уже не секрет, что в конце 2019 года Instagram API изменилось. При этом старое API все еще поддерживается — отключение изначально планировалось в начале весны 2020, но позже было отложено на 29 июня 2020. После этой даты все приложения, использующие устаревшее API, перестанут работать. В этом небольшом туториале мы разберем как можно вывести на странице ленту из своего аккаунта с учетом текущих изменений. Материал рассчитан на новичков в подобного рода интеграциях.
Создание приложения
Для начала нам необходимо создать учетную запись разработчика на 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.
$url = "https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_tokenaccess_token=" . $accessToken; $instagramCnct = curl_init(); // инициализация cURL подключения curl_setopt($instagramCnct, CURLOPT_URL, $url); // адрес запроса curl_setopt($instagramCnct, CURLOPT_RETURNTRANSFER, 1); // просим вернуть результат $response = json_decode(curl_exec($instagramCnct)); // получаем и декодируем данные из JSON curl_close($instagramCnct); // закрываем соединение // обновляем токен и дату его создания в базе $accessToken = $response->access_token; // обновленный токен
Данные приходят в JSON-формате, а сам токен содержится в свойстве access_token.
Обновив токен, или же если он у нас был не такой уж и старый, мы можем отправить запрос на получение ленты из нашего аккаунта. С помощью Basic Display API можно получить изображения, видео, а также подписи к ним и ссылки на публикации. Для получения данных нам понадобится endpoint GET /me/media
$url = "https://graph.instagram.com/me/media?fields=id,media_type,media_url,caption,timestamp,thumbnail_url,permalinkaccess_token=" . $accessToken; $instagramCnct = curl_init(); // инициализация cURL подключения curl_setopt($instagramCnct, CURLOPT_URL, $url); // адрес запроса curl_setopt($instagramCnct, CURLOPT_RETURNTRANSFER, 1); // просим вернуть результат $media = json_decode(curl_exec($instagramCnct)); // получаем и декодируем данные из JSON curl_close($instagramCnct); // закрываем соединение
Данные будут содержаться в свойстве data. Список всех возвращаемых свойств:
Но тут возникает проблема, решение которой я не нашел в документации. Если в ленте у нас есть публикации в виде альбомов (media_type будет равен CAROUSEL_ALBUM), то есть несколько изображений/видео в одном посте, то в ответе на запрос придет только первое изображение в карусели. Для получения всех изображений в параметре fields нам нужно указать параметр children. Но и в этом случае мы получим только id изображений:
stdClass Object ( [data] => Array ( [0] => stdClass Object ( [id] => 18140723445053387 [media_type] => CAROUSEL_ALBUM [media_url] => https://scontent-iad3-1.cdninstagram.com/v/http://res.cloudinary.com/drf3eqq87/image/upload/v1655236606/p33-1.jpg [caption] => caption [timestamp] => 2020-04-22T11:19:28 0000 [permalink] => https://www.instagram.com/p/B_R_5Ihttp://res.cloudinary.com/drf3eqq87/image/upload/v1655236606/p33-1.jpg/ [children] => stdClass Object ( [data] => Array ( [0] => stdClass Object ( [id] => 17880333085571127 ) [1] => stdClass Object ( [id] => 17895333339472851 ) [2] => stdClass Object ( [id] => 18107333661126811 ) ) ) ) ) )
В документации указано, что для получения изображений из карусели необходимо использовать endpoint GET /{media-id}/children. Но выходит что на каждую карусель нам необходимо посылать дополнительный запрос к API. А если мы получаем 50 каруселей? Я решил поэкспериментировать и в итоге нашел способ получения данных изображений карусели в изначальном запросе. Для этого я использовал следующий формат:
$url = "https://graph.instagram.com/me/media?fields=id,media_type,media_url,caption,timestamp,thumbnail_url,permalink,children{fields=id,media_url,thumbnail_url,permalink}limit=50access_token=" . $accessToken;
Отправив такой запрос, мы получим все изображения постов, а в свойстве children помимо id будут находится все свойства, перечисленные в параметре запроса children{fields=http://res.cloudinary.com/drf3eqq87/image/upload/v1655236606/p33-1.jpg}.
В итоге, наш окончательный код будет выглядеть так:
$accessToken = "token"; // получаем токен из базы
$tokenDate = "date_from"; // получаем дату создания из базы
// Вычисляем сколько полных дней прошло с даты создания токена
$tokenTimestamp = strtotime($tokenDate);
$curTimestamp = time();
$dayDiff = ($curTimestamp - $tokenTimestamp) / 86400;
if (!empty($accessToken)) {
if ($dayDiff > 50) { // Если токену уже более 50 дней, то обновляем его
// Запрос на обновление токена
$url = "https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_tokenaccess_token=" . $accessToken;
$instagramCnct = curl_init(); // инициализация cURL подключения
curl_setopt($instagramCnct, CURLOPT_URL, $url); // адрес запроса
curl_setopt($instagramCnct, CURLOPT_RETURNTRANSFER, 1); // просим вернуть результат
$response = json_decode(curl_exec($instagramCnct)); // получаем и декодируем данные из JSON
curl_close($instagramCnct); // закрываем соединение
// обновляем токен и дату его создания в базе
$accessToken = $response->access_token; // обновленный токенПолучаем ленту
$url = "https://graph.instagram.com/me/media?fields=id,media_type,media_url,caption,timestamp,thumbnail_url,permalink,children{fields=id,media_url,thumbnail_url,permalink}limit=50access_token=" . $accessToken;
$instagramCnct = curl_init(); // инициализация cURL подключения
curl_setopt($instagramCnct, CURLOPT_URL, $url); // подключаемся
curl_setopt($instagramCnct, CURLOPT_RETURNTRANSFER, 1); // просим вернуть результат
$media = json_decode(curl_exec($instagramCnct)); // получаем и декодируем данные из JSON
curl_close($instagramCnct); // закрываем соединение
$instaFeed = array();
foreach ($media->data as $mediaObj) {
if (!empty($mediaObj->children->dataforeach ($mediaObj->children->data as $childreninstaFeed[$children->id]['img'] = $children->thumbnail_url ?: $children->media_urlinstaFeed[$children->id]['link'] = $children->permalinkelseinstaFeed[$mediaObj->id]['img'] = $mediaObj->thumbnail_url ?: $mediaObj->media_url;
$instaFeed[$mediaObj->id]['link'] = $mediaObj->permalinkpre>
На выходе я получаю переменную $instaFeed, содержащую массив с превью изображений/видео и ссылками на эти публикации в Instagram.Обратите внимание, что я использую дополнительный параметр limit для указания количества получаемых постов. Если его не указать, то вернется количество по умолчанию, а именно 25. Если постов больше, чем запрашиваемое количество, то в ответе придет свойство paging, где будут указаны ссылки для пагинации, то есть для получения следующих и предыдущих постов.
Работающий код можно посмотреть тут.
Исходники тут.
P.S.
Сами запросы выполняются достаточно долго, так что рекомендую использовать любой асинхронный вариант.
Используемые материалы:
Документация Basic Display API
