Instagram APIを使ってInstagramの画像や情報を表示する方法を紹介します。
今回は自分の所有するアカウントの最新8件の画像の表示とその画像の元のInstagramの記事へ別タブでリンクするというところまでです。
前提として、表示させたいInstagramのアカウントは既に所有しているものとします。アカウントをお持ちでない場合は、事前にアカウント登録と表示させる為の画像を幾つかアップしておきましょう。
また、以下はWindows10のパソコンでChromeブラウザを利用して登録を行った場合のサンプルです。
Facebook Developers にアクセス
1. Developersにログインしましょう。
まず、Instagram Developersにアクセスします。
右上の[ログイン]のリンクから事前に取得済みのアカウントでログインしましょう。
2. 登録を開始しましょう。
[Register Your Application]ボタンを押します。
３．初回限定のプロフィールを送付しましょう。
Instagram APIの利用が初めての場合以下の画面が表示されます。
利用開始にあたっての開発者のプロフィール情報を入力します。
※既に利用済みの場合は以下の画面は表示されませんので次に進みます。
以下は一度入力すると後から変更はできません。情報提供として最初に送付される情報ですので、後からサイトのURLが以下で入力したものと違うものになったからと言って利用できなくなるというような事はありませんが、変更もできませんので気をつけましょう。
サインアップが完了すると最初の画面に戻りますので、もう一度[Register Your Application]ボタンを押します。
４．登録を再開します。
以下の画面が表示されたら[Register a New Client]ボタンを押します。
５．アプリケーション情報を登録しましょう。
以下の画面でアプリケーションの情報を入力していきます。
Application Name：利用者がわかり易い名称になっていれば良いでしょう。
Description：同様に説明として利用者が必要な情報を記載します。
Conmpany Name：任意項目ですので飛ばします。
Website URL：写真等を表示させるサイトのURLを入力します。
Valid redirect URIs：Instagram APIからアクセスが可能で、トークンなどのチェックを行う（行う予定）の実在するURLを入れましょう。
Privacy Policy URL：任意情報ですので飛ばします。
Contact email：任意情報ですので飛ばします。
必須項目を全て入力し終わったら、「私はロボットではありません」にチェックを入れて[Register]ボタンを押します。
６．登録内容の確認をしましょう。
登録が成功すると以下のような画面が表示されます。
CLIENT IDは後ほど利用しますので、コピーしてテキストエディタなどに保存しておきましょう。
７．アクセストークンを取得しましょう。
以下のURLをコピーします。
>https://instagram.com/oauth/authorize/?client_id=[Client ID]&redirect_uri=[REDIRECT_URI]&response_type=token
[]で括られた部分を今回用のアプリケーションの情報に置き換えます。
・[Client ID]＝手順６で画面に表示されていたCLIENT IDと置き換える
・[REDIRECT_URI]=手順５でValid redirect URIsの項目に入力したURLと置き換える
置き換えが終わったら、出来上がったURLにアクセスしましょう。
※もしも、以下のエラーが表示されたら
{"error_type": "OAuthForbiddenException", "code": 403, "error_message": "Implicit authentication is disabled"}
以下の画面で「MANAGE」ボタンを押します。
以下の画面に切り替わったら「Security」のタブを選択します。
Securityの中の[Disable implicit OAuth]の項目からチェックを外して[Update Client]ボタンを押します。
再度、先ほどのURLにアクセスしてみましょう。
※アクセストークンが取得できたら[Disable implicit OAuth]のチェックは元に戻しておきましょう。
８．アクセストークンを控えましょう。
成功すると以下のような画面が表示されますので[Authorize]ボタンを押します。
以下のようなURLが表示されますので、[#access_token=]の後ろの数字と文字列の組み合わせ部分を控えておきます。
[指定したドメイン]/#access_token=8643242884.e9eb0ae.b9b23ed19ae74f928c676923f323dbd6
・ユーザーID：アクセストークンの最初のピリオド（.）より前の部分がユーザーIDです。
上記の場合[8643242884]がユーザーIDとなります。
・アクセストークン：アクセストークンの全文がアクセストークンです。
上記の場合「8643242884.e9eb0ae.b9b23ed19ae74f928c676923f323dbd6」がアクセストークンとなります。
※今回の説明では詳しく記載しませんが、上記は<サンドボックスでの利用となります。サンドボックスの場合、利用上の制限いくつがあります。詳しくは、以下のURLを確認してください。
