Предыстория

Возможно, вы попали на данную страницу по ссылке на плагин instafeed.js. Я действительно делал ранее статью на эту тему, и даже видео на ютубе, однако решил обновить информацию. Плюс ко всему, instafeed лично у меня рано или поздно отваливался с сайта и переставал работать, да и был на jQuery.

Сейчас, садясь перезаписывать информацию, я столкнулся с тем, что работать с ним еще сложнее чем раньше: нужно получить токен, создать приложение, и сделать еще несколько довольно нудных вещей для работы плагина.

И я решил отказаться от него и поискать решение лучше. И нашел.

Мы будем использовать простой и удобный плагин — InstagramFeed.js. Он не требует никаких токенов, только название инстаграм-аккаунта.

Примечание: У данного плагина есть ограничение — больше 12ти фотографий он выводить не умеет. Но, как правило, на сайтах просто выводят последние 8, а дальше уж перейдите в инсту сами и посмотрите)

Однако стоит понимать, что у данного плагина есть ограничение — больше 12ти фотографий он выводить не умеет. Но, как правило, на сайтах просто выводят последние 8, а дальше уж перейдите в инсту сами и посмотрите)

Выше есть видео, если не устраивает текст — можете глянуть его. Плюс ко всему, там я показываю вариант с кастомным html-кодом для ленты инстаграма, чего не будет в статье.

Давайте по порядку, с html.

HTML

<div id="insta"></div>

Просто див для вывода фотографий.

JS

Не забудьте подключить файл instagramfeed.min.js к вашему html.

new InstagramFeed({
'username': 'ваш_юзернейм',
'container': document.getElementById("insta"),
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'display_captions': true,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 1
});

Самое важное, что нам тут нужно передать — это правильный селектор для контейнера, а так же правильный username. Остальное уже — просто примеры, где вы можете показать информацию пользователя, его профиль, подписи к изображениям и т.д.

Примечание: поскольку плагин использует запросы к инстаграму, запустить просто html-файл в браузере не выйдет. Обязательно нужен локальный сервер (Live Server или Browsersync) или хостинг.

Как я и писал выше, для создания кастомного html-кода инстаграм-ленты нужно потрудиться, и как именно это сделать я рассказал в видео выше. Пользуйтесь! Ниже — ссылка на github, для вашего удобства.

До встречи!