JavaScript

Как разместить Instagram фото на сайте без использования Instagram API

165
Как разместить Instagram фото на сайте без использования Instagram API
Active vision

Что делать если вы хотите вывести изображения из Instagram на своем сайте, но совершенно не хотите связываться с Instagram API? Выход есть и он даже проще, чем вы можете себе представить. Все что нам нужно будет сделать — это установить и настроить jQuery библиотеку jquery.instagramFeed.

Instagram фото на сайте

Начнем с установки. Для работы библиотеки требуется 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>

Опции

Атрибут
По умолчанию
Описание
username
null
Имя пользователя Instagram, от которого будет получена лента
tag
null
Instagram тег, по которому будет получена лента
container
null
Селектор, в котором будет размещена лента. Требуется, если get_data имеет значение false
callback
null
Функция обратного вызова. Применяется только если включена get_data
get_data
false
Позволяет получать необработанные данные с помощью функции callback
display_profile
true
Включает отображение профиля
display_biography
true
Позволяет отображать биографию. Только для пользователей
display_gallery
true
Позволяет отображать галерею
display_igtv
true
Включает отображение канала IGTV, если доступно. Только для пользователей
styling
true
Включает стиль по умолчанию
items
8
Количество изображений для отображения в галерее. Допустимые значения [0-12]
margin
0.5
Отступы между изображениями в галерее
image_size
640
Размер изображений. Допустимые значения - 150, 240, 320, 480, 640. Не распространяется на превью видео.
host
https://www.instagram.com/
URL, где можно получить данные. Полезно, если Instagram меняет политику CORS

Если вы не хотите использовать 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

1 комментарий

  • Vadim Selishchev Новый пользователь
    Вчера 05:21
    Спасибо, очень помогло, а то какой-то темный лес с новым Graph API.

Написать комментарий