Опубликовано:

Выводим фото из Instagram у себя на сайте

Содержание:

Вступление

Один из заказчиков попросил вывести у него на сайте фотографии из их Instagram аккаунта. Раньше с подобной задачей мне сталкиваться не приходилось, поэтому пришлось немного погуглить. В итоге решение оказалось довольно простым, делюсь им с вами.

Получаем Instagram Token

Данные из Instagram-аккаунта будем получать с помощью Instagram API. Для работы с ним нам нужно получить Access Token. Чтобы его получить – нужны логин/пароль от Инстаграм аккаунта, с которого мы хотим доставать данные.

Есть много сервисов, позволяющих сгенерировать токен инстаграма, я использовал вот этот: https://instagram.pixelunion.net/

Если вдруг этот сервис не работает – загуглите generate instagram access token – подобных сервисов очень много.

Переходим на сайт и жмем на кнопку Generate Access Token:

Жмем Generate Access Token

Если мы не авторизованы в Инстаграме – нужно авторизоваться:

Авторизовываемся в Instagram

Теперь нужно разрешить этому приложению доступ к нашей информации:

Разрешаем доступ к Instagram

Нас вернули на сайт https://instagram.pixelunion.net/ , откуда мы можем скопировать свой Access Token:

Копируем Instagram Token

Сохраняем его, он пригодится нам далее.

Выводим фотографии из Instagram

Ниже привожу PHP код вперемешку с HTML, который выводит 12 последних фото с вашей странички Instagram. В переменную $access_token вставьте свой Access Token, а в $amount – количество фото, которое нужно выводить.

По понятным причинам в коде указан тестовый Access Token, который не работает. Обязательно замените его на свой.
<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>

Код получился не очень аккуратным, позже обязательно оформлю его в виде отдельного класса, а пока и так сойдет ;)

На выходе мы получаем такой результат:

Пример вывода фото из Instagram

На сайте клиента подключена библиотека 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>
По понятным причинам в коде указан тестовый Access Token, который не работает. Обязательно замените его на свой.

Скриншот результата:

Пример записей Instagram на сайте

В примере использованы следующие 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 и отпишусь в этом посте.

Другие посты из этой же рубрики:

Перейти в рубрику