InstagramFeed + WordPress

Решил напи­сать пост допол­не­ние к мое­му видео о том как выве­сти лен­ту 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>

Наде­юсь кому-то поможет.

Метки

Tiku Instagram tiku.ru tiku.tv Веб-разработка Инстаграм Интернет