Question

我正在尝试在基本没有任何html页面上使用instafeed.js javascript，只是为了测试API。我已在Instagram注册并拥有我的clientId值，我已在我的代码中配置：

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Instagramify your website</title>
 <link href="css/style.css" rel='stylesheet' type='text/css' />
 <script type="text/javascript" src="js/instafeed.min.js"></script>
</head>
<body>
  <div id="wrapper">
    <h2>Instagram pics</h2>
    </div><div id="instafeed"></div>
  </div>
  <script type="text/javascript" src="js/instafeed.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    var feed = new Instafeed({
      get: 'tagged',
      tagName: 'awesome',
      clientId: 'clientId'
    });
    feed.run();
  })
 </script>
</body>
</html>

我不太确定它不起作用，我使用了与其他帖子相同的示例。请帮我！我开始失去我的小头发..

谢谢！

Answer 1

昨晚，经过一段时间的灵感，我终于开始工作了。由于我在页面上看不到任何特定错误，因此我想从Chrome中使用Javascript调试器。这样我就可以看到来自Instagram的返回值和错误，它是：

＆＃34;未捕获错误：来自Instagram的错误：提供的access_token无效。＆＃34;

这很奇怪，因为所有示例（包括我的上面）都没有提到access_token只是为了获取公共标签图片。在任何情况下，我都确保获得正确的access_token（长度为49个字符，其中包括2个＆＃39;中间），并使用了传递accessToken的代码。不需要＆＃34; useHttp：true＆＃34; （我在本地测试）或目标。

我确实添加了模板和分辨率属性，最终看起来像这样：

var feed = new Instafeed({
  get: 'tagged',
  tagName: 'awesome',
  clientId: 'client_id',
  accessToken: 'access_token',
  template: '<li><div><a href="{{link}}"><img src="{{image}}" /></a><h3>{{caption}}</h3></div></li>',
  resolution: 'standard_resolution'
});
feed.run();

现在它完美无缺。只是糟透了Instagram对API的所有新限制。看起来你只能看到带有搜索标签的图片，如果你将用户添加到你的客户端，那么你也应该能够看到它们（我今天会尝试这个）。现在回到阅读文档......

Answer 2

您需要设置目标：

var feed = new Instafeed({
    target: 'instafeed',
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'clientId'
});

使用instafeed.js - 空白页面，无法正常工作

2 个答案: