InstagramのAPI使用方法
Instagramの投稿内容を自分のホームページで表示するには、面倒な手続きが必要です。
それは「accessToken」と「userid」を取得することから始めます。
なお、2018年4月に設定方法が変更されていますので、それに対応した内容にしています。
これは素人には少し難しいかもしれませんが、Webデザイナーを目指す人は挑戦してみたい事だと思います。頑張ってチャレンジしてみましょう。
「accessToken」と「userid」を取得するには、アプリ登録のためにの、Hello Developers.のページに行きます。
Hello Developersページではインスタのユーザーネームとパスワードでログインをしておきます。
＊インスタのページを開いてフッター部分のapiからもdeveloperページへ行けます。
タイムラインは無限スクロール担っていますので、いつまでもfooter領域をクリックできないので注意してください。無限スクロールになってない設定のページなどに切り替えると良いでしょう。
アプリ登録のページの設定
「Register Your Application」よりアプリ登録のページに入ります。
ヘッダー部分の 「Manage Clients」タブを選択します。
必要事項を記入します。全ての項目を入力していきます。
以下参考
Application Name:test app
Description:test app
Company Name:studioA
Website URL:https://itstudio.co/
Privacy Policy URL:https://itstudio.co/
Contact email:example@studioXX.net
Valid redirect URIs:https://itstudio.co/
＊Valid redirectはハマりやすいので注意しましょう。アドレスを入力したら必ずenterキーを押して確定しておきます。ボタンのような表示になればOKです。
Disable implicit OAuth:のチェックボックスは外した状態にしておきます。
ここもハマるところです。
これらの登録が終了すると Manage Clientsに「Client ID」と「Client Secret」の値が表示されます。この値は念のためどこかに書き写しておきましょう。もちろん、後からこのページに戻るといつでも確認できます。
MANAGEボタンをクリックしたら事前に入力した内容を変更することができます。
アクセストークンを取得
それでは、アクセストークンを取りに行きます。
記述は以下のアドレスで{CLIENT_ID}と{REDIRECT_URI}を先ほど取得した自分のものに書き換えてブラウザのURL入力欄に貼り付けます。
https://api.instagram.com/oauth/authorize/?client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=token&scope=public_content
＊{CLIENT_ID}は先ほど取得したClient IDに書き換えます。また{REDIRECT_URI}はValid redirectに設定した値に書き換えます。エラーの原因になりますので、余計な空白が入らないように注意してください。。
成功すると{REDIRECT_URI}に指定したページが開かれます。このページ自体は何も関係なく、そのURL欄にアクセストークンが繋がった状態で表示されます。
アクセストークンは#access_token=以降の部分です。
失敗すると次のように表示されたりします。
これはDisable implicit OAuth:のチェックボックスは外した状態にしてないと出ます。
{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}
また、さらに別のエラーが出るときは、CLIENT_ID取得の際に詳細な情報を入力したと思いますが、例えば会社名などが空欄のままだとアクセス権がないとエラーになります。もう一度編集画面に戻って空欄を埋めてください。
user_id を取得する方法
ネットの古い記事を参考に設定をするとここでコケます。
どうやら2018年4月上旬にInstagram API 主要機能の提供を終了したことによるものです。
使えるUser EndpointsでユーザーIDを探せる記述は次のものです。
上記内容のACCESS-TOKEN部分を、取得したACCESS-TOKENに書き換えて、ブラウザのURL欄に入力するとjson形式で内容が表示されます。
返ってきたユーザー情報のjsonは以下のようになっています。ここからID番号が取得します。
{“data”: {“id”: “xxxxxxxxxx”, “username”: “haidoro”, “profile_picture”: 以下省略}
これで、「accessToken」と「userid」を準備できたのであとはインスタの内容を表示させるjavascriptかPHPを書いてやれば良いことになります。
表示させる方法は過去に色々な人が書いた記事を参考にしてください。
参考ページ
Instagram APIを使ってみる
「投稿された画像の情報を取得」以降の記事を参考にすれば表示させることができます。
コメントを投稿するにはログインしてください。