InstagramAPI　設置メモ。自分の投稿リストを取得するだけだったのにいろいろと面倒だったので、後からの覚書。

Instagram
APIの使い方がとっても面倒だったので覚書。

前提

やりたいことは自分の投稿画像のリストを取得
特定の誰か（自分含む）の投稿の画像リストを表示するのにuserIDが必要になる
userIDは数字です。clientIdでもusernameでもないです。
自分のuserIDを調べるために、一度API検索をする必要があるようです。これが面倒。

使ったライブラリ

http://instafeedjs.com/
ネイティブなjavascritpなので競合しません。

jqueryバージョンはこちら
jQInstaPics
他ギャラリーや無限スクロールなど
http://jquery-plugins.net/tag/instagram

デベロッパー登録

https://instagram.com/developer/ にアクセスしてログインします。
「Register a New Client」からクライアントアプリを登録します。
引き続き「Manage Clients」からクライアントアプリに紐づくクライアントの登録。
Permissionsにアラートが出ている場合は「Details」に不備があるので埋めておきましょう。

アクセストークンの取得

ここからが面倒です。

https://instagram.com/oauth/authorize/?client_id=

【CLIENT-ID】&redirect_uri=【REDIRECT-URL】&response_type=token&scope=public_content

もし

{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}

が出たら
「Disable implicit OAuth」のチェックを外す

リダイレクトされたアドレスにハッシュタグが付いています。
****.jp/#access_token=*******.******.****************
ここの英数字がトークンになりますのでメモメモ。

トークンを使ってAPIを投げたとき

{“meta”:{“error_type”:”OAuthPermissionsException”,”code”:400,”error_message”:”This request requires scope=public_content, but this access token is not authorized with this scope. The user must re-authorize your application with scope=public_content to be granted this permissions.”}}

と出た場合は、トークン取得時のパラメータにscope=public_contentを付けて再度取得。
（実際に取得できるトークンは変わりがないようです。）

自分のuserIDを調べる

APIにアカウント名の検索をして、ヒットしたuserIDを調べます。
アカウント名はlike検索のようなので、調べたいアカウント名なのかちゃんとチェックする必要があります。
アドレス打ちでAPIを投げて調べられますが、jsonで返ってきて結果がわかり難いのでphpで投げると良いと思います。

自分の画像リストを取得

ここまで来てようやくinstafeedjsを使って画像リストを取得するAPIを投げます。

var feed = new Instafeed({
        get: 'user',
        clientId: '【クライアントID】',
        accessToken: '【トークン】',
        limit: 20,
        userId : '【userId】',
        template: '
{{caption}}'
    });
    feed.run();
});