Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
jQuery instagramFeed - Добавление фото из Instagram на свой сайт без API
Дата добавления: 09.03.2021 - 07:16
Категория: Хаки / Дополнения, Информеры
Добавил: Buger
Количество просмотров: 88
Количество комментариев: 0
Размер файла: 22.2 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Отзывчивый, настраиваемый плагин Instagram Photo Gallery, который добавляет фотографии Instagram от любого пользователя (или любого тега, который вы предоставляете) на ваш веб-сайт без использования токена доступа Instagram.
1. Создайте элемент-контейнер для отображения фотографий из Instagram.
2. Загрузите и подключите скрипт jQuery instagramFeed после библиотеки jQuery.
3. Вызовите функцию элемента контейнера и укажите имя пользователя, фотографии которого вы хотите получить.
4. Решите, где отображать профиль, биографию, IGTV.
5. Установите максимальное количество фотографий для отображения.
6. Установите максимальное количество фотографий в строке.
7. Установите расстояние между фотографиями.
8. Если вы хотите переопределить стили CSS по умолчанию.
9. Решите, отображать ли фотографии из Instagram в виде галереи.
10. Чтобы настроить шаблон для галереи Instagram, выполните следующие действия:
11. Плагин также поддерживает получение фотографий из Instagram по тегам:
12. Определите размер изображения: Допустимые значения [150, 240, 320, 480, 640].
13. Включите отложенную загрузку изображений, добавив атрибут loading="lazy". По умолчанию: false.
14. Настройте время истечения срока действия кеша ответов Instagram. По умолчанию: 360.
15. Определите местоположение Instagram '{id}/{slug}', откуда следует получить ленту. Обязательно, если имя пользователя, тег и user_id не определены. По умолчанию: null.
16. Определите количество попыток получить данные из Instagram до выброса. Полезно, чтобы избежать произвольных проблем с CORS. По умолчанию: 8.
17. Укажите URL-адрес для получения данных. Полезно, если Instagram меняет политику CORS. По умолчанию: https://www.instagram.com/.
18. Запуск функции при возникновении ошибки.
Как это использовать:
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>
<script src="jquery.instagramFeed.js"></script>
3. Вызовите функцию элемента контейнера и укажите имя пользователя, фотографии которого вы хотите получить.
Код
$(window).on('load', function(){
$.instagramFeed({
'username': 'instagram',
'container': "#instagram-feed-demo"
});
});
$.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
});
});
$.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
});
});
$.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
});
});
$.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
});
});
$.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
});
});
$.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 */
}
/* 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
});
});
$.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));
}
});
});
$.instagramFeed({
'username': 'instagram',
'callback': function(data){
$('#jsonHere').html(JSON.stringify(data, null, 2));
}
});
});
11. Плагин также поддерживает получение фотографий из Instagram по тегам:
Код
$(window).on('load', function(){
$.instagramFeed({
'tag': 'paradise'
});
});
$.instagramFeed({
'tag': 'paradise'
});
});
12. Определите размер изображения: Допустимые значения [150, 240, 320, 480, 640].
Код
$(window).on('load', function(){
$.instagramFeed({
'image_size': 640
});
});
$.instagramFeed({
'image_size': 640
});
});
13. Включите отложенную загрузку изображений, добавив атрибут loading="lazy". По умолчанию: false.
Код
$(window).on('load', function(){
$.instagramFeed({
'lazy_load': true
});
});
$.instagramFeed({
'lazy_load': true
});
});
14. Настройте время истечения срока действия кеша ответов Instagram. По умолчанию: 360.
Код
$(window).on('load', function(){
$.instagramFeed({
'cache_time': 360
});
});
$.instagramFeed({
'cache_time': 360
});
});
15. Определите местоположение Instagram '{id}/{slug}', откуда следует получить ленту. Обязательно, если имя пользователя, тег и user_id не определены. По умолчанию: null.
Код
$(window).on('load', function(){
$.instagramFeed({
'location': '{id}/{slug}'
});
});
$.instagramFeed({
'location': '{id}/{slug}'
});
});
16. Определите количество попыток получить данные из Instagram до выброса. Полезно, чтобы избежать произвольных проблем с CORS. По умолчанию: 8.
Код
$(window).on('load', function(){
$.instagramFeed({
'max_tries': 8
});
});
$.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/'
});
});
$.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){
// ...
}
});
});
$.instagramFeed({
on_error: function(error_description, error_code){
// ...
}
});
});
Поделись с друзьями:
