24.01.2021 🕑 21:27 🧑 Tiku Digital
IFTTT, Instagram, tiku.tv, YouTube 📺, Веб-разработка, Интернет 🌐
Решил написать пост дополнение к моему видео о том как вывести ленту Instagram на сайте бесплатно и без API.
Вот видео :)
Дело в том, что у меня была потребность вывести ленту именно на статичной HTML / CSS странице и я думал, что те кто использует WordPress этим не заинтересуется и скорей найдут для себя удобный плагин, чем будут заморачиваться с HTML / CSS / JS.
Но мне написали с вопросом, как вывести ленту этим методом именно внутри поста WordPress и оказалось, что это достаточно просто.
Все делается внутри редактора поста, через блок HTML.
В блок вставляем вот такой код (это мой пример), а параметры меняем на свои.
В моем примере кода вывод сделан три раза т. к. я использую три варианта вывода под разные устройства — настольный компьютер, планшет и смартфон, для обеспечения адаптивности верстки.
<script src="https://tiku.ru/js/jquery.instagramFeed.min.js"></script>
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'ttiikkuu',
'container': "#instfeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 100,
'items_per_row': 6,
'margin': 0.25
});
});
})(jQuery);
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'ttiikkuu',
'container': "#instfeed2",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 100,
'items_per_row': 2,
'margin': 0.25
});
});
})(jQuery);
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'ttiikkuu',
'container': "#instfeed4",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 100,
'items_per_row': 4,
'margin': 0.25
});
});
})(jQuery);
</script>
<!-- Display none none --><div class="display-none-none">
<!-- Display none --><div class="display-none">
<div id="instfeed"></div>
<!-- Display none --></div>
<!-- Display none none --></div>
<!-- Display desctop --><div class="display-desctop">
<!-- Display tablet none --><div class="display-tablet-none">
<div id="instfeed2"></div>
<!-- Display tablet none --></div>
<!-- Display none none --><div class="display-none-none">
<div id="instfeed4"></div>
<!-- Display none none --></div>
<!-- Display desctop --></div>И вот так это выглядит внутри поста WordPress.
Надеюсь кому-то поможет.
💬 Комментариев к записи InstagramFeed + WordPress нет