Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

jQuery instagramFeed - Добавление фото из Instagram на свой сайт без API

Дата добавления: 09.03.2021 - 07:16
Добавил: Buger
Количество просмотров: 88
Количество комментариев: 0
Размер файла: 22.2 Kb
Рейтинг материала: 0.0 / 0
jQuery instagramFeed - Добавление фото из Instagram на свой сайт без API
рейтинг 0.0
/
голосов 0
Отзывчивый, настраиваемый плагин Instagram Photo Gallery, который добавляет фотографии Instagram от любого пользователя (или любого тега, который вы предоставляете) на ваш веб-сайт без использования токена доступа Instagram.

Как это использовать:


1. Создайте элемент-контейнер для отображения фотографий из Instagram.
Код
<div id="instagram-feed-demo" class="instagram_feed"></div>

2. Загрузите и подключите скрипт jQuery instagramFeed после библиотеки jQuery.
Код
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.instagramFeed.js"></script>

3. Вызовите функцию элемента контейнера и укажите имя пользователя, фотографии которого вы хотите получить.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'username': 'instagram',
  'container': "#instagram-feed-demo"
  });
});

4. Решите, где отображать профиль, биографию, IGTV.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'username': 'instagram',
  'container': "#instagram-feed-demo",
  'display_profile': true,
  'display_biography': true,
  'display_igtv': false
  });
});

5. Установите максимальное количество фотографий для отображения.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'username': 'instagram',
  'container': "#instagram-feed-demo",
  'items': 8
  });
});

6. Установите максимальное количество фотографий в строке.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'username': 'instagram',
  'container': "#instagram-feed-demo",
  'items_per_row': 4
  });
});

7. Установите расстояние между фотографиями.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'username': 'instagram',
  'container': "#instagram-feed-demo",
  'margin': 0.5
  });
});

8. Если вы хотите переопределить стили CSS по умолчанию.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'username': 'instagram',
  'container': "#instagram-feed-demo",
  'styling': false
  });
});

Код
.instagram_profile {
  /* CSS styles here */
}

.instagram_profile_image {
  /* CSS styles here */
}

.instagram_username {
  /* CSS styles here */
}

.instagram_biography {
  /* CSS styles here */
}

.instagram_gallery {
  /* CSS styles here */
}

9. Решите, отображать ли фотографии из Instagram в виде галереи.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'username': 'instagram',
  'container': "#instagram-feed-demo",
  'display_gallery': true
  });
});

10. Чтобы настроить шаблон для галереи Instagram, выполните следующие действия:
Код
$(window).on('load', function(){
  $.instagramFeed({
  'username': 'instagram',
  'callback': function(data){
  $('#jsonHere').html(JSON.stringify(data, null, 2));
  }
  });
});

11. Плагин также поддерживает получение фотографий из Instagram по тегам:
Код
$(window).on('load', function(){
  $.instagramFeed({
  'tag': 'paradise'
  });
});

12. Определите размер изображения: Допустимые значения [150, 240, 320, 480, 640].
Код
$(window).on('load', function(){
  $.instagramFeed({
  'image_size': 640
  });
});

13. Включите отложенную загрузку изображений, добавив атрибут loading="lazy". По умолчанию: false.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'lazy_load': true
  });
});

14. Настройте время истечения срока действия кеша ответов Instagram. По умолчанию: 360.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'cache_time': 360
  });
});

15. Определите местоположение Instagram '{id}/{slug}', откуда следует получить ленту. Обязательно, если имя пользователя, тег и user_id не определены. По умолчанию: null.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'location': '{id}/{slug}'
  });
});

16. Определите количество попыток получить данные из Instagram до выброса. Полезно, чтобы избежать произвольных проблем с CORS. По умолчанию: 8.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'max_tries': 8
  });
});

17. Укажите URL-адрес для получения данных. Полезно, если Instagram меняет политику CORS. По умолчанию: https://www.instagram.com/.
Код
$(window).on('load', function(){
  $.instagramFeed({
  'host': 'https://images' + ~~(Math.random() * 3333) + '-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/'
  });
});

18. Запуск функции при возникновении ошибки.
Код
$(window).on('load', function(){
  $.instagramFeed({
  on_error: function(error_description, error_code){
  // ...
  }
  });
});
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: