Instagramの写真をページに表示させるのに必要なAPI取得方法

こんにちは、名畑です。
最近まで個人的に10年近く使っていたペンタブやらPhotoshopやら使っていたのですがついに動かなくなって新しくしました。
元々動作保証がされていかなったのですが動いていて驚きだったようです；
自分でもあまりの物持ちのよさにびっくりです。
今後も新しくしたものも大切に使っていきたいと思います♪

今回はInstagramをホームページに表示させる際に必要なコードの取得方法を紹介します。
もちろんですがInstagramのアカウントが必要になりますので準備してくださいね。

Instagram Developerで申請

Instagram Developerにアクセスします。
https://www.instagram.com/developer/

ログインしていない場合右上からログインしましょう。

「Register Your Application」をクリックします。

開発者の登録画面が出てきますので必要項目を入力していきます。

①ホームページ
②電話番号
③なぜAPIが必要かを記入します。（日本語でOKです）

すべて入力が完了したら「I accept the API」にチェックを入れて「Sign up」をクリックします。
これで開発者としての登録が完了しましたので次にコードを取得していきます。

コードを取得する方法

上のメニューの「Manage Clients」をクリックします。

緑色のボタン「Register a New Client」でAPIを新規作成することができます。

必要な項目を入力していきます。

①アプリケーションの名前を分かりやすくつけます。
②アプリケーションの説明文です。あとで見た時に分かりやすいように設定しておきましょう。
③会社名を入力します。
④Instagramを載せたいホームページのURLを貼付けます。
⑤上記と同じURLを入力します。後ほどAPIを出力するのに必要なURLになりますので、既に公開されているURLを貼付けするようにしましょう。
⑥プライバシーポリシーが載っているURLを貼付けます。
⑦メールアドレスを入力します。

次に「Security」のタブに移動します。

「Disavble implicit OAuth」にデフォルトでチェックが入っていますのでチェックを外しましょう。
チェックが入ったままですとエラーが出てしまいますので注意してください。

以上の設定が完了したら画像認識のテキストを入れて「Register」をクリックします。

するとCLIENT IDが発行されるのでこの文字列も保存しておきます。

CLIENT IDが発行されたら以下のアドレスにアクセスしてください。

https://api.instagram.com/oauth/authorize/?client_id=【CLIENT_ID】&redirect_uri=【REDIRECT_URI】&response_type=token&scope=public_content

こちらのURLの【】で囲われた部分に、先程設定・取得した「CLIENT_ID」と「REDIRECT_URI」をコピペでいれていきます。

ちなみに今回設定したアドレスがこちらです。
https://api.instagram.com/oauth/authorize/?client_id=95b1499d17~~e&redirect_uri=http://www.infact1.co.jp/&response_type=token&scope=public_content（一部IDを省略しています）
このURLにアクセスするとこのような画面が出てくるので、「Authorize」をクリックします。

クリックすると最初「REDIRECT_URI」で設定した画面が出てきますがURLの部分が異なりますので、このURLを確認・コピーしましょう。

ここで出力された文字列がFeedに必要なIDとなります。
最初の数字10文字がIDでそのあとの「.」以降がAPIのコードとなります。

おわりに

少し面倒ですがコードを取得するとブログのように最新の記事を取得することができます。
自分のInstagramに他人がログインさせたくない・できないようになっている場合や、、ホームページの管理を他社に任せている場合は制作会社にここで出せる情報を渡すようにしましょう。