4

フォーラムからこれを学びましたが、うまくいきませんでした。写真はヘッダーだけを表示しませんでした。

誰でもこれで私を助けることができますか？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-instagram/0.2.2/jquery.instagram.min.js"></script>
<title>Instagram Demo</title>

</head>

<body>

<h1>jQuery Instagram demo</h1>

<div class="instagram"></div>
<script type="text/javascript">
    $(".instagram").instagram({
        userId: '0ce2a8c0d92248cab8d2a9d024f7f3ca',
        accessToken: '34834147.0ce2a8c.92d5a4d1d326438fb063a31b63e208a2',
        image_size: 'standard_resolution',
    });
    </script>


</body>
</html>

ありがとう！

4

3 に答える 3

8

Instafeed.js は、Instagram の写真を Web サイトに追加する非常にシンプルな方法です。jQuery は必要ありません。プレーンな JavaScript だけです

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>

このリンクを確認してくださいINSTAFEED

あなたのためにインスタデモを作りました

于 2013-08-28T02:49:30.023 に答える
2

他のプラグインなしでプレーンな Jquery で画像を取得できます。以下のように：

$(document).ready(function () {
        var apiurl = "https://api.instagram.com/v1/users/<YOURUSERNAME>/media/recent/?access_token=<YOURACCESSTOKEN>&count=5&callback=?";
        $.getJSON(apiurl, function (data) {
            console.log("suatroot");
            var suatroot = data.data;

            console.log(suatroot);
            $.each(suatroot, function (key, val) {
                console.log("item");
                var itemobj = val.images.low_resolution.url;
                var hrefobj = val.link;
                var captobj = val.caption.text;
                console.log(captobj);
                console.log(itemobj);
                var suatpaket = "<a target='_blank' href='"+hrefobj+"'><img src='" + itemobj + "'/><br>"+captobj+"<br></a>";
                $(".instagram").append(suatpaket);
            });

        });
    });

および HTML:

<div class='instagram'></div>

この解決策により、ページのソース コードからアクセス トークンを確認できますが、それは大きな問題ではないかもしれません。

于 2016-05-31T08:34:17.503 に答える
0

これは、依存関係のないソリューションです。また、アクセス トークンも必要ありません。このスニペットを機能させるには、フィード用のbitsalad.co URL を取得する必要があります。

<html>
<body>
<div id='instagram-feed'></div>

<script>
(function(a,b,c,d){
  var $ = b.getElementById('instagram-feed');
  a['_i'] = function(d){
    d.forEach(function(i, x){
      html = "<img src='"+i.images.standard_resolution.url+"' />";
      $.insertAdjacentHTML('beforeend', html);
    })
  };
  var e = b.createElement(c);
  e.src = d;
  e.async=1;
  var f = b.getElementsByTagName(c)[0];
  f.parentNode.insertBefore(e,f);
}(window, document, 'script','http://api.bitsalad.co/v1/feeds/<YOUR FEED ID HERE>?callback=_i'))
</script>

</body>
</html>
于 2016-08-21T07:47:54.943 に答える