InstagramFeed + WordPress

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>

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

Как добавить InstagramFeed на ваш WordPress сайт: пошаговое руководство

Instagram — это мощ­ная плат­фор­ма для при­вле­че­ния ауди­то­рии и уве­ли­че­ния вовле­чен­но­сти. Но как исполь­зо­вать ваш Instagram-кон­тент для улуч­ше­ния ваше­го WordPress сай­та? В этой ста­тье мы подроб­но рас­ска­жем, как доба­вить InstagramFeed на ваш сайт WordPress. Это лег­ко, инте­рес­но и помо­жет сде­лать ваш сайт более живым и привлекательным.

Почему стоит интегрировать Instagram с WordPress?

Инте­гра­ция Instagram с вашим WordPress сай­том может при­не­сти мно­же­ство преимуществ:

• Повы­ше­ние вовле­чен­но­сти: Люди любят про­смат­ри­вать кра­си­вые фото­гра­фии и видео, и ваш InstagramFeed может стать при­вле­ка­тель­ным эле­мен­том на вашем сайте.
• Обнов­ля­е­мый кон­тент: Ваш сайт будет авто­ма­ти­че­ски обнов­лять­ся с каж­дым новым постом в Instagram, что поз­во­лит под­дер­жи­вать его акту­аль­ность без лиш­них усилий.
• Соци­аль­ное дока­за­тель­ство: Пуб­ли­ка­ции из Instagram могут слу­жить дока­за­тель­ством вашей актив­но­сти и попу­ляр­но­сти, что может повы­сить дове­рие к ваше­му брен­ду или бизнесу.

Шаг 1: Выберите плагин для интеграции Instagram с WordPress

Пер­вый шаг — это выбор пла­ги­на, кото­рый помо­жет инте­гри­ро­вать InstagramFeed на ваш сайт. Вот несколь­ко попу­ляр­ных плагинов:

• Smash Balloon Social Photo Feed: Один из самых попу­ляр­ных и настра­и­ва­е­мых пла­ги­нов для отоб­ра­же­ния Instagram ленты.
• Instagram Feed WD: Про­стой в исполь­зо­ва­нии пла­гин с мно­же­ством полез­ных функций.
• 10Web Social Photo Feed: Пла­гин, кото­рый поз­во­ля­ет лег­ко настра­и­вать и отоб­ра­жать InstagramFeed на вашем сайте.

Шаг 2: Установите и активируйте выбранный плагин

После выбо­ра пла­ги­на, уста­но­ви­те и акти­ви­руй­те его на вашем WordPress сай­те. Для это­го выпол­ни­те сле­ду­ю­щие действия:

1. Перей­ди­те в админ-панель ваше­го сай­та WordPress.
2. В меню сле­ва выбе­ри­те «Пла­ги­ны» и нажми­те «Доба­вить новый».
3. Вве­ди­те назва­ние выбран­но­го пла­ги­на в стро­ку поис­ка и нажми­те «Уста­но­вить».
4. После уста­нов­ки нажми­те «Акти­ви­ро­вать».

Шаг 3: Настройте плагин

Теперь, когда пла­гин уста­нов­лен и акти­ви­ро­ван, необ­хо­ди­мо настро­ить его. Вот при­мер настрой­ки для пла­ги­на Smash Balloon Social Photo Feed:

Пример настройки плагина Smash Balloon Social Photo Feed

Шаг 4: Добавьте InstagramFeed на ваш сайт

Теперь, когда пла­гин настро­ен, оста­лось доба­вить InstagramFeed на ваш сайт. Для это­го исполь­зуй­те шорт­код, предо­став­ля­е­мый пла­ги­ном. Напри­мер, для пла­ги­на Smash Balloon Social Photo Feed исполь­зуй­те сле­ду­ю­щий шорткод:

[instagram-feed]

Вы може­те доба­вить этот шорт­код в любую стра­ни­цу, запись или виджет ваше­го сай­та. Вот при­мер, как это сделать:

1. Перей­ди­те в редак­тор стра­ни­цы или запи­си, куда хоти­те доба­вить InstagramFeed.
2. Вставь­те шорт­код [instagram-feed] в нуж­ное место.
3. Сохра­ни­те изме­не­ния и про­смот­ри­те стра­ни­цу, что­бы убе­дить­ся, что лен­та отоб­ра­жа­ет­ся корректно.

Заключение

Инте­гра­ция InstagramFeed на ваш WordPress сайт — это отлич­ный спо­соб повы­сить вовле­чен­ность поль­зо­ва­те­лей и доба­вить дина­мич­ный кон­тент на ваш сайт. Сле­дуя нашим про­стым шагам, вы лег­ко смо­же­те уста­но­вить и настро­ить пла­гин, а так­же доба­вить Instagram лен­ту на свои стра­ни­цы. Не бой­тесь экс­пе­ри­мен­ти­ро­вать с настрой­ка­ми и внеш­ним видом лен­ты, что­бы сде­лать её мак­си­маль­но при­вле­ка­тель­ной для вашей ауди­то­рии. Удачи!

Источ­ник

Посмот­ри­те боль­ше постов про веб-раз­ра­бот­ку у меня в блоге.