私はこの作業を行うことができますどのようにURL

Question

からの要素の属性とJSONを取得します。いくつかのdivに画像が見つかりました。

このような何か：

$.getJSON ({ 
    method: 'GET', 
    url: 'https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNijakrAX5y/?taken-by=nba', 
    dataType: 'jsonp', 
    success: function (response) { 
    $('.nekiDiv').append('<img src="'+response.thumbnail_url+'">'); 
    } 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="nekiDiv"> 

</div> 

ます。また、ここでそれを見ることができます：あなたが直接URL年代を使用することはできませんすべてのhttps://jsfiddle.net/ag53dm61/

Answer 1

まず、あなたがinstagram api URLを使用する必要があり、

次に、jsコードを次のように使用できます。

$("[data-instagram]").each(function(el) { 
    $.getJSON({ 
    method: 'GET', 
    url: $(this).data("instagram"), 
    dataType: 'jsonp', 
    success: function(response) { 
     $('.nekiDiv').append('<img src="' + response.thumbnail_url + '">'); 
    } 
    }); 
}) 

例Fiddle

あなたはHTMLでnekiDivとdiv要素を作成する必要があります。

そして、あなたが今imgを使用できない理由（私が見る"https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNijakrAX5y/?taken-by=nba"

Answer 2

として最初の例のURLを参照してください：あなたはまだ、実際のサムネイルへのリンクを持っていない、あなたはInstagramのAPIを介して行かなければなりません最初にそれらを取得する）

あなたはdata-instagram属性を持つすべてのspanを選択するために、jQueryのを使用することができます。

$('span[data-instagram]') 

その後、各EL用あなたがInstagram APIを照会するためにリンクしたフィドルの機能を模倣することができます。要求が成功すると、コールバック関数を使用してそれぞれのサムネイル画像を各spanに挿入することができます。

this JSFiddleをご覧ください。

（StackOverflowのスニペットは、トラブルクロスオリジン・リクエストを開始したように見える。）

$('span[data-instagram]').each(function(i, span) { 
 
    $.getJSON({ 
 
    method: 'GET', 
 
    url: 'https://api.instagram.com/oembed/?url=' + span.getAttribute('data-instagram'), 
 
    dataType: 'jsonp', 
 
    success: function(response) { 
 
     var img = document.createElement('img'); 
 
     img.src = response.thumbnail_url; 
 
     span.appendChild(img) 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 
    <span data-instagram="https://www.instagram.com/p/BNnmcIVgNLy/?taken-by=nba"></span> 
 
    <span data-instagram="https://www.instagram.com/p/BNlZYpDgwr_/?taken-by=nba"></span> 
 
    <span data-instagram="https://www.instagram.com/p/BNlTnGFAqQ4/?taken-by=nba"></span> 
 
    <span data-instagram="https://www.instagram.com/p/BNlFOilgZ3b/?taken-by=nba"></span> 
 
</div>