如何使用 Instagram 的 API 显示我自己的照片库？

Posted 2023-03-31

【中文标题】如何使用 Instagram 的 API 显示我自己的照片库？

【英文标题】：How do I use Instagram's API to display a gallery of my own photos?

【发布时间】：2012-09-18 14:13:51

【问题描述】：

我想使用 Instagram 的 API 在网页上显示我自己的照片库。这可能吗？

【问题讨论】：

我发现这个分步教程非常有用codeofaninja.com/2015/01/display-instagram-feed-website.html

【参考方案1】：

看这里：http://instagram.com/developer/endpoints/users/

大多数端点都要求对用户进行身份验证。无需认证即可检索标记图片和热门图片。为了显示您自己的内容，您需要使用 Instagram 登录的用户。

编辑：看看这个：http://www.blueprintinteractive.com/blog/how-instagram-api-fancybox-simplified

【参考方案2】：

方法 1 - 使用 Instagram API

不，您并不总是需要访问令牌。您还可以在此 API 请求中使用客户端 ID - https://api.instagram.com/v1/tags/nofilter/media/recent?client_id=CLIENT-ID

用户照片端点 - https://api.instagram.com/v1/users/user-id/media/recent/?client_id=CLIENT-ID

您需要替换上述 URL 中的用户 ID。输出将是 JSON 响应，因此您必须自己显示照片。

方法 2 - 使用插件

您可以直接使用插件，将 Instagram 帐户中的照片嵌入您的网站。一个很好的例子是 - InstaMax 插件，它将显示您所有的照片、视频以及喜欢和 cmets。

这里有一个插件的小演示 ​​- http://demos.codehandling.com/instamax_demo/instamax_live_edit.html

2016 年更新

由于 Instagram API 的变化，方法 1 将在 2016 年 6 月之后失效。您需要让您的应用获得 Instagram 的批准，然后生成访问令牌。

生成令牌是很容易的部分。您可以在浏览器中简单地使用以下 API -

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

坦率地说，最难的部分是让您的 APP 从 Instagram 获得批准。我花了一个月的时间和几次拒绝来了解他们的平台政策是什么以及如何发送批准请求。

我会建议你使用一个已经有一个批准的应用程序的插件，这样你就可以使用他们的应用程序为他们的插件生成令牌。

【讨论】：

方法 1 似乎不再起作用了。我猜是由于 Instagram api 的变化。

@Garg's 如果您要添加为 Web 应用程序，则无需更改。如果您在 Java 或其他内容中进行本地添加，那么您将不得不重新编写整个代码。插件中的 Instagram API 链接和响应格式将保持不变。

第1点对URL的响应：隐式认证被禁用。

【参考方案3】：

使用来自 CDN 的 jQuery 最新版本，然后：

 $(document).ready(function
    var token = 'Your Access Token', 
        userid = 'Your User ID',
        num_photos = 10; // how much photos you want to get

    $.ajax(
        url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent',
        dataType: 'jsonp',
        type: 'GET',
        data: access_token: token, count: num_photos,
        success: function(data)
            console.log(data);
            for( n in data.data )                  
                $('body').append('<div><img src="'+data.data[n].images.standard_resolution.url+'"></div>');
            
        ,
        error: function(data)
            console.log(data);
        
    );
)

DEMO

【讨论】：

这使用了自 6 月 29 日起将弃用的旧 API 端点。