在我的网页上显示来自不同帐户的 Instagram 照片

Question

我正在寻找不将我的 instagram 照片显示到我的网站页面的方法，但不能。 如果我只有一个 instagram 用户的帐户名（例如 jamieoliver），是否可以这样做。 我的网站是在 Wordpress 上编写的。

需要显示不是我的图片

Answer 1

此 URL 格式 http://instagram.com/{instagram user name}/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第三方应用来规避同源策略。

所以像

这样格式化你的 URL

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

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

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

见JSFIDDLE