oEmbed Загрузка только заголовка сообщения Instagram

Question

Я пытаюсь использовать 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, чтобы получить ссылку на последней должности, возьмите Shortlink суффикс из этого, а затем использовать эту Shortlink выполнить еще один запрос GET, чтобы получить встраивать код через метод oEmbed. Тем не менее, когда я загрузить страницу, что я вижу только это:

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

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

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

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

Спасибо!

Answer 1

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

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

readystate позволяет узнать, в каком состоянии ваш запрос, как вы можете видеть here, есть 5 возможных значений, последний из которых 4, или СОВЕРШЕННО. вы не хотите, чтобы ваш callback выполнялся до тех пор, пока он не достигнет конечного состояния. второе условие проверяет тип ответа сервера. если это 200 (успех), вы хотите, чтобы он выполнил ваш код успеха. вам также необходимо проверить на 404 и сделать некоторые повреждения, если сервер отвечает не найденной ошибкой страницы.

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

Answer 2

Используйте 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/

Answer 3

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

Вам необходимо следующее:

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

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