サイトに生きた画像を沢山並べたいと思いInstagramに目をつけた。でもこのAPI、なんだか難しい。(私の頭が足りないからなんだけど・・・)
というわけで、いろいろ調べに調べてたどり着いた【超入門】をまとめたいと思う。私の屍を是非役立てくれ。

今回入門ということでInstagram基本表示APIをターゲットにする。いろいろ調べても結局基本に忠実にやるのが一番早かったのでこの公式の手順を使う。
この手順を進めるための前提条件はこちら。

Facebook開発者アカウント。
メディアがあるInstagramアカウント。
所有している公開ウェブサイト。これには、GithubページやHerokuウェブアプリなどの一般の無料ウェブサイト、または所有している実際のウェブサイトなどが含まれます。
Terminalなどのコマンドラインツール、またはcURLリクエストを実行できるPostmanなどのアプリ。


前提条件の準備



まずはFacebook開発者アカウントを作ろう。
(このサイトでもFacebookとInstagramの通常アカウントは所持していることを前提とする。)

1https://developers.facebook.com/へアクセスしスタートガイドをクリック
1WS000000

2所持している一般アカウントと連携して表示される「次へ」
WS000008

3アカウント認証でSMSを受け取れる電話番号を入れる→SMS受信したコードを入力
4メールアドレスを確認
5アカウント作成完了
WS000012

○Facebook開発者アカウント。
 →上記を参考に作成
○メディアがあるInstagramアカウント。
 →すでに持っている前提
○所有している公開ウェブサイト。これには、GithubページやHerokuウェブアプリなどの一般の無料ウェブサイト、または所有している実際のウェブサイトなどが含まれます。
 →すでに持っている前提
○Terminalなどのコマンドラインツール、またはcURLリクエストを実行できるPostmanなどのアプリ。
 →ローカルでもPHPが動作できる環境があればOK

というわけで前提が揃ったので早速手順を進めていく。

ステップ1: Facebookアプリを作成する

1https://developers.facebook.com/へアクセスし「アプリを作成」をクリック
WS000000

2生活者を選んで次へ
WS000001

3アプリ名を入力して次へ
WS000002

4アプリダッシュボードが表示されるので「設定」→「ベーシック」をクリックし、ページ下部の「プラットフォームを追加」をクリックする
WS000005

5ウェブサイトを選択すると「ウェブサイト」の入力BOXが表示されるので、前提条件で確認した自身のサイトURLを入力する(例:https://nextchallenge.site/)
 「変更の保存」をクリックしても画面遷移はしないが保存はされている
WS000006

ステップ2: Instagram基本表示を構成する

1ダッシュボードから「プロダクト」をクリックし「Instagram Basic Display」の「設定」をクリック
WS000008

2「Create New App」をクリックし、アプリ表示名(上記入力値)がでるので「アプリを作成」をクリック
WS000010

3「クライアントOAuth設定」「承認を取り消す」「データの削除リクエスト」には前提条件で確認した自身のサイトURLを入れる
WS000011

4「ユーザートークンジェネレーター」「Instagram Basic Displayのアプリレビュー」は無視して「変更を保存」
WS000012

ステップ3: Instagramテストユーザーを追加する

1「役割」→「役割」→「Instagramテスターを追加」すると承認待ちになる
WS000014

2Instagramで(プロフィールアイコン) > [プロフィールを編集] > [アプリとウェブサイト] > [テスターの招待]で承認する
WS000015

ステップ4: テストユーザーを認証する

1{app-id}と{redirect-uri}を書き換えて以下のURLへアクセスする

  
https://api.instagram.com/oauth/authorize?client_id={app-id}&redirect_uri={redirect-uri}&scope=user_profile,user_media&response_type=code
  

{app-id}はFacebook開発者ダッシュボードの[アプリダッシュボード] > [製品] > [Instagram] > [基本表示] > [InstagramアプリID]
{redirect-uri}は前提条件で確認した自身のウェブサイトURL

2許可する
WS000018

3入力した{redirect-uri}に飛ばされるが、URLを確認するとCodeが付与されているので控える
WS000019

ステップ5:トークンを取得するためにコードを交換する


1PHPでcURL(POST)の実行

  

$request_url = "https://api.instagram.com/oauth/access_token";

$curl = curl_init() ;
curl_setopt( $curl, CURLOPT_URL , $request_url ) ;	// リクエストURL

//ご自身のトークン等に置き換えてください
curl_setopt( $curl, CURLOPT_POSTFIELDS, "client_id={client_id}&client_secret={client_secret}&grant_type=authorization_code&redirect_uri={redirect_uri}&code={code}") ; 

curl_setopt( $curl, CURLOPT_HEADER, true ) ; 	// ヘッダーを取得(あってもなくてもいい)
curl_setopt( $curl, CURLOPT_CUSTOMREQUEST , "POST" ) ;	// メソッド
curl_setopt( $curl, CURLOPT_SSL_VERIFYPEER , false ) ;	// 証明書の検証を行わない
curl_setopt( $curl, CURLOPT_TIMEOUT , 5 ) ;	// タイムアウトの秒数
curl_exec( $curl ) ;
curl_close( $curl ) ;


  
返り値の例
  
{
  "access_token": "IGQVJ...",
  "user_id": 17841405793187218
}
  


ステップ6: ユーザーノードをクエリする

1PHPでcURL(GET)の実行
  


//ご自身の情報に置き換えてください
$request_url = "https://graph.instagram.com/{user-id}?fields=id,username&access_token={access-token}";

$curl = curl_init() ;
curl_setopt( $curl, CURLOPT_URL , $request_url ) ;	// リクエストURL
curl_setopt( $curl, CURLOPT_HEADER, true ) ; 	// ヘッダーを取得
curl_setopt( $curl, CURLOPT_CUSTOMREQUEST , "GET" ) ;	// メソッド
curl_setopt( $curl, CURLOPT_SSL_VERIFYPEER , false ) ;	// 証明書の検証を行わない
curl_setopt( $curl, CURLOPT_TIMEOUT , 5 ) ;	// タイムアウトの秒数
curl_exec( $curl ) ;
curl_close( $curl ) ;

  
返り値の例
  
{
  "id": "17841405793187218",
  "username": "jayposiris"
}
  


ちゃんと値が返ってきた!これでAPIの入門完了。お疲れ様でした。

テストユーザーは1時間しか持たないので長期アクセストークンを実行すれば60日に延長可能

○続けて読んでほしい:
InstagramAPI v10が入門ですら難しい理由がわかったので備忘録
広告
[adcode34]
“新しいInstagramAPI v10をPHPで動かす。超入門” に1件のフィードバックがあります
  1. Nice post. I used to be checking constantly this weblog
    and I am inspired! Extremely helpful info specially the ultimate section 🙂 I take care of such info a lot.

    I used to be looking for this certain information for a long time.
    Thank you and best of luck.

コメントを残す

メールアドレスが公開されることはありません。