将 Instagram 照片拉到网站答案

【问题标题】：To pull instagram photo to website将 Instagram 照片拉到网站
【发布时间】：2013-08-28 02:43:45
【问题描述】：

我从论坛中了解到这一点，但它对我不起作用。照片没有只显示标题。

任何人都可以帮助我吗？

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

谢谢！

【问题讨论】：

错误/控制台消息..？导入正确的 instagram.js 文件..？更多细节。
没有错误信息，当我在浏览器中运行它时，我的浏览器中只出现标题但没有任何图片，它应该从 instagram 中拉一些照片而不只是显示标题。跨度>
@jovine 提供您从中学习的帖子的链接
这是链接jelled.com/instagram-gallery-tutorial
那么你导入了 jquery.instagram.min.js 文件了吗？

标签： jquery instagram

【解决方案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

【讨论】：

是的，我之前测试过，但它仍然失败。我将代码更改为：
jQuery Instagram demo
注册客户端时会不会出现问题？
api.instagram.com/v1/media/… 试试这个
是的，很好的 json 响应......无论如何，只需在我的答案中浏览我的 DEMO 链接
可爱 - 立即为我工作，完整演示

【解决方案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>

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

【讨论】：

【解决方案3】：

这是一个没有任何依赖关系的解决方案。它也不需要访问令牌。要使这个 sn-p 工作，您需要为您的提要获取一个 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>

【讨论】：