oВстроить загрузку только заголовка поста в Instagram

Я пытаюсь использовать API Instagram для загрузки последнего сообщения определенного пользователя на страницу. Согласно документам API, используя только короткую ссылку для нужного изображения, ответ oEmbed должен содержать все, что вы получите, если щелкнете ссылку «встроить» на самом изображении.

Вот мой код:

window.onload = function () {
    var insta = new XMLHttpRequest();
    var embed = document.getElementById('embed');
    insta.open("GET",   "https://api.instagram.com/v1/users/user/media/recent/?access_token=my-token");
    insta.send();
    insta.addEventListener("load", function(){
        var jsonResponse = JSON.parse(insta.responseText);
        var lastImageLink = jsonResponse.data[0].link;
        var shortCode = lastImageLink.split("/p/")[1];
        var url = "https://api.instagram.com/oembed?url=http://instagr.am/p/" + shortCode;
        var getLatest = new XMLHttpRequest;
        getLatest.open("GET", url);
        getLatest.send()
        getLatest.addEventListener("load", function(){
            getLatest = JSON.parse(getLatest.responseText);
            embed.innerHTML = getLatest.html;
        });
    });
};

Поэтому я делаю запрос GET, чтобы получить ссылку на последний пост, беру из него суффикс короткой ссылки, а затем использую эту короткую ссылку для выполнения другого запроса GET, чтобы получить код для встраивания с помощью метода oEmbed. Однако, когда я загружаю страницу, я вижу только это:

изображение

Что я пробовал:

* Я знаю, что API зависит от библиотеки embeds.js, поэтому я переместил ее в заголовок html-документа и сделал так, чтобы она загружалась синхронно. Никаких изменений в результате.

* Загрузка разных изображений, кроме последнего поста. Там тоже без изменений.

И это все, о чем я могу думать. Есть ли какая-то причина, по которой я не могу получить полный встроенный пост о том, что я делаю?

Спасибо!


javascript instagram-api oembed
person Bryan Coxwell    schedule 24.01.2016    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Для тех, кто все еще сталкивается с этой проблемой. Это происходит потому, что установка innerHTML контейнера не приводит к тому, что включенные теги загружают свои источники, поэтому embed.js Instagram никогда не загружается, и встраивание не обрабатывается должным образом.

Вам нужно следующее:

  1. Включите instagram embed.js из https://platform.instagram.com/en_US/embeds.js
  2. Вызовите instgrm.Embeds.process() после установки innerHTML контейнера в поле html данных oembed.
  3. Необязательно, но рекомендуется: добавьте в запрос oembed параметр omitscript=true. Как следует из названия, это опускает тег из возвращаемого html.

Токен доступа не нужен, и вы можете обойтись одним XMLHttpRequest, например:

<script src="https://platform.instagram.com/en_US/embeds.js"></script>
<script>

    var url = "https://api.instagram.com/oembed?omitscript=true&url=http://instagr.am/p/" + shortCode;
    var embed = document.getElementById('embed');
    var req = new XMLHttpRequest;
    req.open("GET", url);
    req.send()
    req.addEventListener("load", function(){
        parsed = JSON.parse(req.responseText);
        embed.innerHTML = parsed.html;
        instgrm.Embeds.process(); // DON'T FORGET THIS
    });

</script>

Я сделал код простым, чтобы сосредоточиться на проблеме, но убедитесь, что embed.js правильно загружен, прежде чем вызывать instgrm.Embeds.process(), конечно.

person rednuht    schedule 03.08.2017
comment
Спасибо ! действительно полезно ;) - person Lorenzo Canavaggio; 12.06.2019

arrow_upward
1
arrow_downward

Используйте вставку iframe для загрузки изображения следующим образом:

<iframe src="https://www.instagram.com/p/8_kRtJBsBq/embed" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

Вместо того, чтобы использовать API для получения кода для встраивания, просто получите шорткод и замените его в приведенном выше фрагменте кода iframe.

Здесь вы можете сгенерировать код для встраивания Instagram iframe и просмотреть его: http://www.gramfeed.com/instagram/embed#https://www.instagram.com/p/8_kRtJBsBq/

person krisrak    schedule 25.01.2016

arrow_upward
0
arrow_downward

вам нужно включить условные выражения внутри вашей функции обратного вызова insta:

insta.onload = function() {
    if (insta.readyState === 4) {
        if (insta.status === 200) {
            //do some stuff
        }
    }
}

readystate позволяет узнать, в каком состоянии находится ваш запрос. Как вы можете видеть здесь есть 5 возможных значений, последнее из которых равно 4 или DONE. вы не хотите, чтобы ваш обратный вызов выполнялся до тех пор, пока он не достигнет конечного состояния. второе условие проверяет тип ответа сервера. если это 200 (успех), вы хотите, чтобы он выполнил ваш код успеха. вам также необходимо проверить наличие ошибки 404 и выполнить некоторый контроль повреждений, если сервер отвечает ошибкой «страница не найдена».

также в строке 11 убедитесь, что вы правильно объявляете свою переменную: вашему конструктору нужны круглые скобки: var getLatest = new XMLHttpRequest();

person thatpaintingelephant    schedule 25.01.2016