Важное обновление

Судя по-всему, у Инсты обновился API. Поэтому способ, описанный в этой статье, может не работать.

Получаем 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>
<?php
$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">
<?php
// получаем данные из инсты
$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>
<?php
$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 и отпишусь в этом посте.