インスタグラムのIDとアクセストークンを取得する

たとえば、Webサイトにインスタグラムの写真を自動で読み込みたいとき。Sandbox ModeでInstagramのAPIを使うのが手軽です。
しかし、そのAPIを使用するための手順は全然手軽ではありません…。
ひとつずつ手順をみていきましょう。

★Sandbox Modeとは
誰でも無料で使用できる開発者モードのようなものですが、制限があります。

  • 10ユーザー(client)まで
  • 各ユーザーにつき、最新20件の投稿画像が取得可能
  • APIの呼び出しに制限あり。説明文中のリンクが壊れており明確な記載はない。(が、どうやら1時間に200回までらしい。)

 

Sandbox ModeでInstagramのAPI、具体的には「Client ID」と「アクセストークン」の入手を自分用メモも兼ねてまとめます。

【 手順:1 】Instagramの開発者ページを開く

ブラウザでInstagramを開きます。
インスタグラムにログインした状態で、開発者ページ「Instagram Developer Documentation」にアクセスします。

▼Instagram開発者ページ

 

【手順:2】開発者登録をする

画面上部の「Manage Clients」をクリックすると、開発者の登録を求められます。
未登録の場合は登録をしていきます▼

「ウェブサイト」「PhoneNumber」「What do you want to build with the API?」 の項目を入力し、ガイドラインへの同意をチェックしたら、「Sign up」をクリックします。
電話番号を入力していますが、今のところ特に電話はかかってきていません。。

【手順:3】クライアントIDを取得

次に、「Manage Clients」で「Register a New Client」をクリックします▼

 

「Details」タブを選択した状態で、必須項目である「Application Name」「Description」「Website URL」「Valid redirect URIs」を入力していきます▼

「Valid redirect URIs」には少し注意が必要です。
入力後にEnterをクリックする必要があります。
Enterをクリックし、入力したURLがボタン状に変化したらOKです。
※「Valid redirect URIs」はあとで使うので覚えておきましょう
「Resister」はまだクリックしません!

 

続いて「Security」タブを選択した状態で、「Disable implicit OAuth」のチェックを外し、「Resister」をクリックします。▼

 

これで、Client ID が取得できました。▼
※ぼかしてますが、32桁の英数の文字列です。

 

【手順:4】アクセストークンを取得

【手順:3】で取得した Client ID を使って、今度はアクセストークンを取得します。

下記のauthenticationURLを使います。

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

「client_id」には「Client ID」、「redirect_uri」には「Valid redirect URIs」をいれてください。

つまりこういう感じです。。

https://api.instagram.com/oauth/authorize/?client_id=【ここに「Client ID」をいれる】&redirect_uri=【ここに「Valid redirect URIs」をいれる】&response_type=code

 

これをブラウザのURL欄に直接入れ、Enterで移動します。
いま作業しているインスタグラムの管理画面とは別に、新たなブラウザ画面(タブ)を開いて実行しましょう。

うまくいけば、下記のような画面になります。Authorize を clickしましょう。あと一歩でアクセストークンが入手できます。▼

 

画面が遷移し、「Valid redirect URIs」で指定したWebサイトが表示されたら、URL欄を確認します。「?code=」の後ろにある文字列が、アクセストークンですよ。▼

 

 

これで、PHPやjsなどを用いて、自分のInstagramの写真をWebサイトに自動連携したりなど、いろいろと活用ができますね!