instagram виджет без backend’а, только javascript

yazu css/html/js,Разное,Уроки 4163

API instagram javascript

Несколько месяцев назад я писал статью о том как можно импортировать фотографии из instagram в инфоблок Bitrix. Сегодня же речь пойдет о том, как вывести фотографии из instagram без использоваться php кода.

Как вы скорее всего уже знаете, instagram api отдает данные в формате jsonp, что позволяет нам работать с ним не используя backend, то есть делать запросы напрямую из клиентского javascript. Все запросы будут уходить напрямую в api instagram’а, не нагружая ваш сервер.

Кто не хочет читать статью полностью, прошу сразу в пример. С остальными идем дальше.

Instagram отдает только последние 20 опубликованных фото, чтобы вы не тратили время, для реализации самого запроса и выдачи ответа я написал небольшую функцию, использующую промисы, которая будет последовательно получать следующие 20 фото в нужном порядке, вам нужно только повторно вызвать её:

$.fn.instalist = function(params) {
    var userid = params.userid;
    var access_token = params.access_token;
    var startUrl = '';
    var prevUrl = '';
    var isFirst = true;

    this.getList = function(page){
        var url = '';
        if( (!startUrl || startUrl == '' || startUrl == undefined) && isFirst == true ){
            url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + access_token;
        } else{ url = startUrl; }
        isFirst = false;
        if(page == 'first'){url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + access_token;}
        if(page == 'prev'){
            if(prevUrl && prevUrl != '' && prevUrl != undefined){ url = prevUrl; }
            else{ url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + access_token; }
        }
        return new Promise(function(resolve, reject) {
            if(url != undefined){
                var list = $.ajax({type: 'GET', url: url, dataType: 'jsonp', cache: false});
                list.done(function(data){ prevUrl = startUrl; startUrl = data.pagination.next_url; resolve(data.data); });
                list.fail(function(data){ reject(data); });
            } else{ reject(false); }
        });
    }
    return this;
}

$.fn.instalist = function(params) {

var userid = params.userid;

var access_token = params.access_token;

var startUrl = '';

var prevUrl = '';

var isFirst = true;

this.getList = function(page){

var url = '';

if( (!startUrl || startUrl == '' || startUrl == undefined) && isFirst == true ){

url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + access_token;

} else{ url = startUrl; }

isFirst = false;

if(page == 'first'){url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + access_token;}

if(page == 'prev'){

if(prevUrl && prevUrl != '' && prevUrl != undefined){ url = prevUrl; }

else{ url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + access_token; }

}

return new Promise(function(resolve, reject) {

if(url != undefined){

var list = $.ajax({type: 'GET', url: url, dataType: 'jsonp', cache: false});

list.done(function(data){ prevUrl = startUrl; startUrl = data.pagination.next_url; resolve(data.data); });

list.fail(function(data){ reject(data); });

} else{ reject(false); }

});

}

return this;

}

Инициализировать функцию можно достаточно простым способом:

var instagram = $(document).instalist({
  userid: 'a17209b4be32219f92a5e6ca71257d5e', //впишите ваш user ID
  access_token: '239318235.1799ed3.6ac8632448004727b3ec085ae169eep1', //а сюда access token
});

var instagram = $(document).instalist({

userid: 'a17209b4be32219f92a5e6ca71257d5e', //впишите ваш user ID

access_token: '239318235.1799ed3.6ac8632448004727b3ec085ae169eep1', //а сюда access token

});

А получить фотографии можно при помощи метода instagram.getList(). Пример использования метода:

var list = instagram.getList();
list.then(
  response => printPhoto(response),
  error => showError(error)
);

var list = instagram.getList();

list.then(

response => printPhoto(response),

error => showError(error)

);

Описывать функции printPhoto() и showError() я не буду, вы сможете их найти в примере в файле script.js, там есть все комментарии к написанному коду. Естественно, все, что написано в этом файле вы можете изменять так как вам требуется. Данный код был написан в качестве примера, поэтому в случае обнаружения ошибок и неточностей прошу в комментарии.

В примере вы увидите всего 2 функции, одна из которых отвечает за вывод сообщения при отсутствии фотографий, вторая для вывода изображений на страницу. Я использовал плавное отображение фотографий путем изменения свойства opacity, вы можете использовать другой вариант, так же как и отображение самих фотографий.

У меня получился вот такой вариант:

Я использовал только само изображение, его описание, количество комментариев, лайков и ссылку на страницу фотографии в instagram. Кроме этого вы можете использовать фотографию автора фото, его имя, логин, ссылку на его страницу, дату публикации и некоторые другие данные. Вы можете вывести в консоль массив, который приходит из instagram и посмотреть все данные, которые можно использовать.

Если кому-то будет интересно, то в следующей статье опишу как можно дополнить получившийся код для добавления возможности отображения изображений в всплывающих окнах при помощи fancybox, какого-либо другого плагина, либо напишу свой вариант. Задавайте вопросы, с удовольствием отвечу.

comments powered by HyperComments

Предыдущий пост: Корректировка шаблона постраничной навигации на bitrix Следующий пост: Кроссдоменные запросы (CORS) простая реализация