jquery - 将来自不同帐户的 Instagram 照片显示到我的网页

Question

我正在寻找不在我的网站页面上显示我的 Instagram 照片的方法，但不能。 如果我只有 Instagram 用户的帐户名(例如 jamieoliver)，是否可以这样做？ 我的网站是在 Wordpress 上编写的。

需要显示不是我的图像

Answer 1

此 URL 格式 http://instagram.com/{instagram 用户名}/media 将返回一个 json 文件，其中包含该用户的最新 (20+/-) 媒体文件。

在 jamieoliver 的示例中，您可以执行 http://instagram.com/jamieoliver/media

您可以通过 (jQuery) ajax 调用处理 json 响应，如下所示:

$.ajax({
    url: "http://instagram.com/jamieoliver/media",
    dataType : "jsonp", // this is important
    cache: false,
    success: function(response){
        // process the json response to get images
        // e.g. the first image should be something like : 
        // response.items.images[0].low_resolution
        // you could call an external function to iterate through the response
    }
});

当然，我假设您了解 json 格式是什么样的。如果您使用 WordPress，也许您可​​以找到一个插件来处理该 json 响应

<小时/>

编辑:

似乎来自 http://instagram.com/{author_name}/media 的响应不是 jsonp 而是 json(有关进一步引用，请参阅 this)，但是设置 json dataType 将返回跨域错误。

解决方法是使用 whateverorigin.org 第三方应用来规避同源策略。

因此，将您的网址格式化为

"http://whateverorigin.org/get?url=" + encodeURIComponent("http://instagram.com/{author_name}/media");

whateverorigin 服务器将充当代理并返回正确的 json 格式。

请注意，您仍然需要在 ajax 调用中使用 dataType : "jsonp"。

参见JSFIDDLE