Получение постов Instagram через API

Посмотрим как можно получить все изображения из Instagram с определенным хэштегом, используя API Инстаграма и PHP. Далее будем разбираться с API социальной сети Instagram и использование данного интерфейса социальной сети в языке программирования PHP. Разберем все аспекты такого понятия как API и работу с данным интерфейсом в языке программирования PHP.

Что такое API

API (Application Programming Interface) — описание способов взаимодействия одной компьютерной программы с другими. Проще говоря, — набор компонентов, с помощью которых компьютерная программа (бот или же сайт) может использовать другую программу.

Я работал с API Instagram для создания сайта социальной сети, где использовал многие из его функций, включая показ публичных изображений под определенным #хэштегом.

Хэштег — это великолепная функция социальных сетей, которая уже используется во всех основных сайтах социальных сетей, включая Facebook и Twitter.

Работа с API

Каждый API требует регистрации, прежде чем вы сможете использовать его возможности. Обратите внимание, что для показа изображений под определенным хэштегом нам необходима любая аутентификация при подключении к Instagram API для всех, кто получает пост Instagram. Нам действительно нужны ID клиента и секретные ключи (secret key) клиента, которые мы получим, как только зарегистрируем приложение на платформе Instagram API.

Итак, первым нашим шагом будет регистрация приложения на странице API Instagram — https://instagram.com/developer/

И нажатие на кнопку Register Your Application.

Вторым шагом нам нужен токен доступа для получения постов Instagram. В моем следующем уроке я рассмотрю как генерировать токен доступа API Instagram.

И последний шаг — это получение последних постов Instagram.

Здесь у нас будут три блока — PHP, HTML, CSS. Последние два отвечают за внешний вид, а первый за получение всех необходимых данных.

PHP код

Это основа взаимодействия нашего сайта (приложения) с API Инстаграма. Код не очень большой и будет понятен даже начинающим PHP программистам:

function GetPost($accessToken) {
    $url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' . $accessToken;
 
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $data = json_decode(curl_exec($ch), true);
 
    curl_close($ch);
 
    return $data;
}
$result = GetPost('ACCESS-TOKEN-XXXXXXXXXXXXXXXXXX');

Вместо ACCESS-TOKEN-XXXXXXXXXXXXXXXXXX укажите ваш токен.

CSS

CSS поможет нам навести красоту и задать стили отображения:

.wraper{
   width: 80%;
   margin: auto
}
.profile{
   float: left;
}
.profile img{
   border-radius: 50%;
}
.userDetail{
   float: left;
   margin-left: 6%;
   padding-top: 7%;
}
.header{
   clear: both;
   display: flow-root;
   width: 50%;
   margin: 0 auto 20px;
}
.post{
   clear: both;
   width: 100%;
}
.post-img img{
   width: 100%;
   height: 250px;
}
.post-img{
   width: 32%;
   margin-right: 10px;
   display: inline-block;
   margin-bottom: 10px;
   position: relative
}
.caption{
   display: none;
   position: absolute;
   background-color:rgba(0,0,0,0.5);
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   text-align: center;
   margin: auto;
   right: 0;
   bottom: 0;
}
.post-img:hover .caption{
   display: block
}
.caption label{
   color: #fff;
   position: absolute;
   width: 100%;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   margin: auto;
   text-align: center;
   height: 0;
   font-weight: bold;
}

HTML

Конечный HTML документ мы сформируем таким образом:

<div class="wraper">
            <div class="header">
                <div class="profile">
                    <img src="<?php echo $result['data'][0]['user']['profile_picture']; ?>">
 
                </div>
                <div class="userDetail">
                    <h3><?php echo $result['data'][0]['user']['username']; ?></h3>
                </div>
            </div>
            <div class="post">
                <?php foreach ($result['data'] as $row) { ?>
                    <div class="post-img">
                        <img src="<?php echo $row['images']['standard_resolution']['url']; ?>">
                        <div class="caption">
                            <label>Comments(<?php echo $row['comments']['count'] ?>) - Likes(<?php echo $row['likes']['count'] ?>)</label>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </div>

На этом всё. Со временем будет больше материалов про API и взаимодействие через АПИ с разными сайтами.