Лента инстаграма на сайте с помощью js
Привет! В этой статье расскажу о том, как сделать ленту из инстаграма у себя на сайте
Предыстория
Возможно, вы попали на данную страницу по ссылке на плагин 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, для вашего удобства.
До встречи!