Question

我是从一个论坛上学到的，但它对我没用。照片没有显示标题。

任何人都可以帮助我吗？

    <!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>

谢谢！

Answer 1

Instafeed.js是一种将Instagram照片添加到您网站的简单方法。不需要jQuery，只需简单的'ol javascript

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

点击此链接 INSTAFEED

为你做了Insta demo

Answer 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>

通过此解决方案，您可以从页面的源代码中看到您的访问令牌，但这对您来说可能不是什么大问题。

Answer 3

这是一个没有任何依赖关系的解决方案。它也不需要访问令牌。要使此代码段有效，您需要获取Feed的bitsalad.co网址。

<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>

将Instagram照片拉到网站

3 个答案: