Выводим фото из Instagram у себя на сайте
Вступление
Один из заказчиков попросил вывести у него на сайте фотографии из их Instagram аккаунта. Раньше с подобной задачей мне сталкиваться не приходилось, поэтому пришлось немного погуглить. В итоге решение оказалось довольно простым, делюсь им с вами.
Получаем Instagram Token
Данные из Instagram-аккаунта будем получать с помощью Instagram API. Для работы с ним нам нужно получить Access Token. Чтобы его получить – нужны логин/пароль от Инстаграм аккаунта, с которого мы хотим доставать данные.
Есть много сервисов, позволяющих сгенерировать токен инстаграма, я использовал вот этот: https://instagram.pixelunion.net/
Переходим на сайт и жмем на кнопку Generate Access Token:
Если мы не авторизованы в Инстаграме – нужно авторизоваться:
Теперь нужно разрешить этому приложению доступ к нашей информации:
Нас вернули на сайт https://instagram.pixelunion.net/ , откуда мы можем скопировать свой Access Token:
Сохраняем его, он пригодится нам далее.
Выводим фотографии из Instagram
Ниже привожу PHP код вперемешку с HTML, который выводит 12 последних фото с вашей странички Instagram. В переменную $access_token вставьте свой Access Token, а в $amount – количество фото, которое нужно выводить.
<h2>Последние фото из моего Instagram</h2>
<?
$access_token = '4632177397.8791ed0.3c560ad9853d49bd9d1acf495xsc3df9'; // замените на свой Access Token
// функция, которая вытягивает из инсты нужную инфу
function GetDataFromInstagram($access_token)
{
$api_url ="https://api.instagram.com/v1/users/self/media/recent/?access_token=".$access_token;
$connection_c = curl_init();
curl_setopt($connection_c,CURLOPT_URL, $api_url);
curl_setopt($connection_c,CURLOPT_RETURNTRANSFER,1);
curl_setopt($connection_c,CURLOPT_TIMEOUT,20);
$json_return = curl_exec($connection_c);
curl_close($connection_c);
return json_decode($json_return);
}
?>
<div class="instagram__block">
<?
// получаем данные из инсты
$user_search = GetDataFromInstagram($access_token);
$amount = 12; // выведем 12 фото
$counter = 0;
foreach ($user_search->data as $post)
{
echo "<a href='{$post->images->standard_resolution->url}' data-fancybox><img src='{$post->images->low_resolution->url}' alt='{$post->caption->text}' title='{$post->caption->text}'></a>";
$counter ++;
if($counter >= $amount)
{
break;
}
}
?>
</div>Код получился не очень аккуратным, позже обязательно оформлю его в виде отдельного класса, а пока и так сойдет ;)
На выходе мы получаем такой результат:
На сайте клиента подключена библиотека fancybox3, поэтому у ссылок указан атрибут data-fancybox (чтобы фото увеличивались при клике).
В примере использованы следующие CSS стили:
.instagram__block {display: flex;flex-wrap: wrap;margin: -2px;}
.instagram__block a {width: 25%;padding: 2px;box-sizing: border-box;}
.instagram__block a img {width: 100%;height: 100%;object-fit: cover;}Выводим записи из Instagram
Теперь немного изменим формат вывода информации: выведем не только картинки, но и подписи к ним. А при клике на картинку будем открывать страничку с записью на самом Instagram.
После небольших правок код выглядит следующим образом:
<h2>Последние фото из моего Instagram</h2>
<?
$access_token = '4632177397.8791ed0.3c560ad9853d49bd9d1acf495xsc3df9'; // замените на свой Access Token
// функция, которая вытягивает из инсты нужную инфу
function GetDataFromInstagram($access_token)
{
$api_url ="https://api.instagram.com/v1/users/self/media/recent/?access_token=".$access_token;
$connection_c = curl_init();
curl_setopt($connection_c,CURLOPT_URL, $api_url);
curl_setopt($connection_c,CURLOPT_RETURNTRANSFER,1);
curl_setopt($connection_c,CURLOPT_TIMEOUT,20);
$json_return = curl_exec($connection_c);
curl_close($connection_c);
return json_decode($json_return);
}
?>
<div class="instagram__block">
<?
// получаем данные из инсты
$user_search = GetDataFromInstagram($access_token);
$amount = 12; // выведем 12 фоток
$counter = 0;
foreach ($user_search->data as $post)
{
echo "<div class='instagram__block-item'><a href='{$post->link}' target='_blank'><img src='{$post->images->low_resolution->url}' alt='{$post->caption->text}' title='{$post->caption->text}'></a>{$post->caption->text}</div>";
$counter ++;
if($counter >= $amount)
{
break;
}
}
?>
</div>Скриншот результата:
В примере использованы следующие CSS стили:
.instagram__block {display: flex;flex-wrap: wrap;margin: -2px;}
.instagram__block-item {width: 25%;padding: 2px 2px 1rem;box-sizing: border-box;}
.instagram__block a {display: block;width: 100%;height: 300px;margin-bottom: 0.5rem;}
.instagram__block a img {width: 100%;height:100%;object-fit: cover;}На этом всё :) Позже обязательно оформлю всё это в виде отдельного класса, выложу на GitHub и отпишусь в этом посте.
Другие посты из этой же рубрики: