Что делать если вы хотите вывести изображения из Instagram на своем сайте, но совершенно не хотите связываться с Instagram API? Выход есть и он даже проще, чем вы можете себе представить. Все что нам нужно будет сделать — это установить и настроить jQuery библиотеку jquery.instagramFeed.
Начнем с установки. Для работы библиотеки требуется jQuery, подключим его через CDN.
HTML
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
Скачайте и подключите файл jquery.instagramFeed.min.js . Или посмотрите библиотеку на GitHub.
HTML
<script src="js/jquery.instagramFeed.min.js"></script>
Создайте в разметке контейнер, в котором будет отображаться изображения из инстаграм.
HTML
<div id="instafeed"></div>
Инициализируем библиотеку. Мы можем получить медиа файлы либо по имени пользователя, либо по тегу. По имени пользователя существует ограничение: не более 12 изображений. По тегу вы сможете получить значительно больше. Обратите внимание, что для работы библиотеки вам не нужен access token.
HTML
<script>
(function ($) {
$(window).on('load', function () {
$.instagramFeed({
'username': 'instagram', //Имя пользователя
'container': "#instafeed", //Контейнер для изображений
'display_profile': false, //Отображение профиля
'display_biography': false, //Отображение биографии
'display_gallery': true, //Отображение галереи
'styling': true, //Стандартные стили библиотеки
'items': 8, //Количество изображений в галереи
'items_per_row': 4, //Количество изображений в ряд
'margin': 0.5 //Отступ между изображениями
});
});
})(jQuery);
</script>
В результате мы получаем такую галерею:
Если вам не нравятся стандартные стили, их можно отключить, установив значение 'styling': false,. В результате работы библиотеки вы получите следующую разметку, напишите для нее собственные стили:
HTML
<div class="instagram_profile">
<img class="instagram_profile_image" src="..." alt="Instagram profile pic">
<p class="instagram_username">@Instagram (<a href="...">@instagram</a>)</p>
<p class="instagram_biography">....</p>
</div>
<div class="instagram_gallery">
<a href="..." rel="noopener" target="_blank">
<img src="..." alt="instagram instagram image 0" />
</a>
...
</div>
<div class="instagram_igtv">
<a href="..." rel="noopener" target="_blank">
<img src="..." alt="instagram instagram image 0" />
</a>
...
</div>
Опции
Если вы не хотите использовать jQuery, то можно скачать библиотеку InstagramFeed.min.js. Это та же самая библиотека, но без jQuery. Ее опции ничем не отличаются, вот пример ее инициализации:
HTML
<script>
(function(){
new InstagramFeed({
'username': 'instagram',
'container': "#instafeed",
'display_profile': true,
'display_biography': true,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 1
});
})();
</script>
Надеюсь, что данный материал был полезен. Если вас интересует Instagram API, посмотрите нашу статью о Instagram API Basic Display
