web-dev-qa-db-ja.com

InstagramのAPIを使用して自分の写真のギャラリーを表示するにはどうすればよいですか？

InstagramのAPIを使用して、自分の写真だけのギャラリーをWebページに表示したいと思います。これは可能ですか？

apiinstagram
14
chimerical

こちらをご覧ください： http://instagram.com/developer/endpoints/users/

ほとんどのエンドポイントでは、ユーザーの認証が必要です。認証なしでタグ付きの写真や人気のある写真を取得できます。自分の画像を表示するには、ユーザーがInstagramでログインする必要があります。

EDIT：チェックアウト： http://www.blueprintinteractive.com/blog/how-instagram-api-fancybox-simplified

23
tcd

方法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アカウントの写真をWebサイトに埋め込むプラグインを直接使用できます。良い例は、InstaMaxプラグインです。これは、すべての写真、いいね！やコメント付きのビデオを表示します。

プラグインの小さなデモがここにあります- http://demos.codehandling.com/instamax_demo/instamax_live_edit.html

2016年に更新

Instagram APIの変更により、方法1は2016年6月以降は機能しません。 Instagramからアプリを承認してから、アクセストークンを生成する必要があります。

  1. トークンの生成は簡単な部分です。ブラウザから以下のAPIを簡単に使用できます-

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

  2. 率直に言って、最も難しい部分は、アプリをInstagramから承認することです。プラットフォームポリシーと承認要求の送信方法を理解するには、1か月と数回の拒否が必要でした。

アプリを使用してプラグインのトークンを生成できるように、承認済みのアプリを既に持っているプラ​​グインを使用することをお勧めします。これが、私が無料の InstaMax プラグインを作成した理由です。

7
Patrick

jQuery最新バージョンCDNその後

 $(document).ready(function{
    var token = 'YOUR ACCSESS TOKEN', 
        userid = YOUR UserID,
        num_photos = 10; // how much photos do 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 [〜＃〜]

0
Murat Kezli