Лента инстаграма на сайте с помощью js

Предыстория

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

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

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

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

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

До встречи!