Блог

Посты из Instagram на своём сайте

Посты из Instagram на своём сайте

Чтобы завязать между собой аккаунт на Instagram и ваш сайт с услугами или интернет-магазином, иногда полезно это сделать не простой иконкой-кнопкой, а более "навязчиво", если можно так выразиться. Например, разместить изображения последних созданных вами постов. Аккаунт в Instagram побудит ваших клиентов к более продолжительному общению с вами, вашим сайтом и вашими предложениями. Клиенты будут видеть ваши посты и, при условии "правильно" их создания, они перейдут на ваш сайт и совершат повторную покупку.

Как же разместить посты на сайте? Пример простого скрипта, который "подтянет" на сайт посты из вашего Instagram аккаунта приведён ниже.  Всё достаточно просто. Вам нужно только разместить несколько строчек кода и довольстоваться результатом.

Вначале размещаем в нужном вам месте, например ближе к "подвалу" небольшой html код. Я использовал библиотеку Bootstrap для показа постов в одну строку. Вы можете использовать привычные для вас стили. Количество загружаемых постов "регулируется" количеством DIV с классом "FRAME".

HTML

 <div class="instagram">  <div class="instagram-photos row">
<div class="frame frame-1 col-xs-6 col-sm-3"></div>
<div class="frame frame-2 col-xs-6 col-sm-3"></div>
<div class="frame frame-3 col-xs-6 col-sm-3"></div>
<div class="frame frame-4 col-xs-6 col-sm-3"></div>
</div>
<div>Подпишись на наш аккаунт и будь всегда в курсе акций, распродаж и скидок. <a href="https://www.instagram.com/ваш_аккаунт/">Подробнее</a> </div>
</div>

Далее подключаем сам скрипт.

JavaScript

 <script>
$(document).ready(function(){

$('.instagram-photos').each(function(){

$.ajax({

type: 'GET',

dataType: 'json',

cache: false,

url: 'https://www.instagram.com/ваш_аккаунт/?__a=1',

success: function(data){

var allPhotos = data.graphql.user.edge_owner_to_timeline_media.edges;

var framesCount = $('.instagram-photos .frame:last-child').index() * 1 + 1;

for(var i = 0; i < allPhotos.length; i++){

var frameCount = i + 1;
if(frameCount <= framesCount){
var needCount = frameCount;
} else{
var needCount = Math.floor(frameCount / framesCount);
var needCount = frameCount - (needCount * framesCount);
if(needCount == 0){
var needCount = framesCount;
} }
var needClass = '.instagram-photos .frame.frame-' + needCount;
$(needClass).append('<span data-src="' + allPhotos[i].node.thumbnail_src + '""></span>');
}
$('.instagram-photos .frame').each(function(){
var thisEl = $(this);
var thisUrl = thisEl.find('span:first-child').attr('data-src');
$(this).css({
'background-image' : 'url(' + thisUrl + ')'
});
});
}
});
});
});
</script>

PS. Не забудьте заменить "ваш_аккаунт" на свой рабочий аккаунт в Instagram

И немного стилей.

CSS

.instagram .frame {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 10%;
}
Образец работы скрипта
Подпишись на наш аккаунт и будь всегда в курсе акций, распродаж и скидок. Подробнее

Понравилась статья? Поделитесь

Вас может заинтересовать:

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ