インスタグラムに投稿された情報を一覧取得したい
インスタグラムで投稿したメディアを取得してウェブに表示させたいという需要は多いと思います。この場合、「Facebook for Developers」で提供されているAPIを使うことで実現が可能です。
インスタグラムの投稿データの取得を可能とするAPIは、「Facebook for Developers」において下記の２つが存在します。
・インスタグラム基本表示API
・Instagram oEmbed
「インスタグラム基本表示API」と「インスタグラムoEmbedの違い」
どちらもエンドポイントにパラメーターを追加してリクエストすればJSONデータ形式で応答が得られるという点においては同じですが、若干仕様が異なります。
〇インスタグラム基本表示API
こちらはエンドポイントに、下記フィールドを指定してしてリクエストを送信すると、指定したフィールドデータが返ってくるというものです。
そして、これはメディアIDを指定して任意の投稿のみのフィールドデータを取得することも、フィールドデータを全投稿分まとめて一覧として取得することもできます。
その結果、取得したフィールドデータを好きなUI（ユーザーインターフェース）で出力させる事ができます。
【フィールド一覧】
| caption | メディア（投稿）のキャプションテキスト |
| id | メディア（投稿）のID |
| media_type | メディアのタイプ。IMAGE、VIDEO、またはCAROUSEL_ALBUMのいずれか |
| media_url | メディア（投稿した画像や動画）のURL |
| permalink | 各投稿のURL。このパーマリンクを取得すれば、インスタグラムoEmbedにて、各投稿の埋め込みHTMLコードの取得が可能となる |
| thumbnail_url | メディアのサムネイル画像のURL。VIDEOメディアでのみ使用可能 |
| timestamp | メディアの公開日付(ISO 8601形式) |
| username | メディア所有者のユーザーネーム |
〇インスタグラム oEmbed
インスタグラムoEmbedは、エンドポイントに投稿のURLを指定して、その投稿の埋め込みデータを取得できます。埋め込みデータは、インスタグラムでの表示そのものが取得できます。
ただし、1度のリクエストで1つの投稿の埋め込みデータしか取得できません。
エンドポイントに指定するURLは、基本表示APIでpermalinkというフィールドデータとして取得可能です。
従いまして、インスタグラムoEmbedは基本表示APIとの組み合わせた処理が必要になります。
また、インスタグラムoEmbedは、アプリのレビューを受け、承認を得る必要があります。
「インスタグラム基本表示API」で情報を一覧取得する
「インスタグラム基本表示API」を使ってインスタグラムの情報を一覧取得するには、インスタグラムが用意するエンドポイントへ必要なパラメーターを追加してリクエストする必要があります。
〇エンドポイントへのリクエスト構文
https://graph.instagram.com/me/media?fields={fields}&access_token={access-token}
パラメーターとして、{fields}と{access-token}が必要です。
〇インスタグラム基本表示APIエンドポイントへのリクエストパラメーター{fields}
このパラメーターは取得したい情報を指定するものです。これは「Facebook for Developers」のリファレンス（https://developers.facebook.com/docs/instagram-basic-display-api/reference/media#fields）に記載があります。
【フィールド一覧】
| caption | メディア（投稿）のキャプションテキスト |
| id | メディア（投稿）のID |
| media_type | メディアのタイプ。IMAGE、VIDEO、またはCAROUSEL_ALBUMのいずれか |
| media_url | メディア（投稿した画像や動画）のURL |
| permalink | 各投稿のURL。このパーマリンクを取得すれば、インスタグラムoEmbedにて、各投稿の埋め込みHTMLコードの取得が可能となる |
| thumbnail_url | メディアのサムネイル画像のURL。VIDEOメディアでのみ使用可能 |
| timestamp | メディアの公開日付(ISO 8601形式) |
| username | メディア所有者のユーザーネーム |
〇インスタグラム基本表示APIエンドポイントへのリクエストパラメーター{access-token}
エンドポイントにリクエストしてインスタグラムの情報を取得するにあたり、セキュリティの観点から、あらかじめInstagramユーザーアクセストークンの発行を受ける必要があります。
このInstagramユーザーアクセストークンは、「Facebook for Developers」にユーザー登録のうえ、APIを使用するユーザーや使用先URL、使用目的等を明らかにしてアプリケーションの登録を受けると取得ができます（取得手順は後記）。
〇インスタグラム基本表示API、リクエスト例
インスタグラム投稿毎にタイムスタンプ、ユーザーネーム、キャプション、パーマリンクを取得する場合。
https://graph.instagram.com/me/media?fields=timestamp,username,caption,permalink&access_token=IGQVJVLUM･･･
上記リクエストを送りますと下記のようなJSON形式のデータが返ってきます。
ここまでくれば、あとはこのJSONデータを加工（配列に変換）して、画面に出力するだけですよね。
「インスタグラム基本表示API」のInstagramユーザーアクセストークンを取得するには
Instagramユーザーアクセストークンさえ取得できれば、簡単にインスタグラムで投稿された情報を、必要な情報（フィールド）のみ一覧取得ができる事は説明いたしました。
しかし、このInstagramユーザーアクセストークンの取得までの手順が大変なんです。
〇必要なもの
開始する前に以下が必要です。
・Facebook開発者アカウント。
・Instagramアカウント。
・所有している公開ウェブサイト（インスタグラムを埋め込む先ウェブサイト）。
手順１．まずはFaceebook開発者アカウントを取得する
「Facebook for Developer」ウェブサイト（https://developers.facebook.com）にアクセス。
これでFacebook開発者アカウントの取得が完了です。
手順２．アプリを作成する
あらかじめインスタグラム基本表示APIを使用するウェブサイトやユーザーを指定してウェブアプリケーションとしての登録が必要となります。
ここでインスタグラム側での認証が必要。インスタグラムへログインし「アプリとウェブサイト」のリンクをクリック。
インスタグラムはここで閉じて良い。次に、インスタグラムの認証URLへリクエストが必要。
認証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} ：InstagramアプリID
{redirect-uri} ：アプリ登録の際に登録したURL（トップページのURLで良い）
作成したURL：
https://api.instagram.com/oauth/authorize?client_id=507370250475451&redirect_uri=https://www.office-tomo.net/&scope=user_profile,user_media&response_type=code
※黄色のマーカー部分が必要な情報を当て込んだ部分。
次にInstagramユーザーアクセストークンを取得する。Developerサイトのトークンジェネレーターを使用。
これでようやく「インスタグラム基本表示API」で必要なInstagramユーザーアクセストークンの取得完了です。
取得したInstagramユーザーアクセストークンを使い、実際にリクエストを試すと、私のインスタグラムからは下記のようなJSONデータが返ってきます（下記に表示されているJSONデータは、自作のショートコードを使って、エンドポイントにリクエストし、取得したJSONデータを表示させています）。
{"error":{"message":"Error validating access token: The session has been invalidated because the user changed their password or Facebook has changed the session for security reasons.","type":"OAuthException","code":190,"fbtrace_id":"AG90nnHlHcNlkEnK8EHXotM"}}
このJSONデータはjson_decode()関数により連想配列へとデコードし、スタイルを施して出力すると下記のような感じになります（カードをクリックしますと私のインスタグラムの各投稿ページが別ウィンドウで開きます）。
エンドポイントへのリクエストからJSONデータの受け取り、カード表示として出力するまでの一連の流れをショートコード化しておりますのでワードプレスであれば、すぐに！どのページにも！好きな場所に！インスタグラムの投稿を一覧表示できます。
上記一覧表示をもっと大きな画面で見たい方は下記ページをご覧ください。
「インスタグラムoEmbed」でインスタグラムをそのまま埋め込む
前記、基本表示APIを使ったカード表示は、独自UIにて取得した情報を一覧表示させる場合の方法です。
他にも「Instagram oEmbed」APIを使って、インスタグラムをそのまま埋め込むための埋め込みデータを取得する方法もあります。
ただし、冒頭で説明済みですが「Instagram oEmbed」は投稿の個別URLを指定して、その投稿の埋め込みデータを取得するものであり、一覧取得できるものではありません。
従って、基本表示APIを使い、各投稿の「permalink」フィールドデータを一覧取得し、さらにこの「permalink」を使い、各投稿の埋め込みデータ取得のリクエスト→取得といった処理を連続でループ処理する必要があります。
結果、以下のような形でインスタグラムの各投稿埋め込みデータを一覧表示できます。
上記一覧表示をもっと大きな画面で見たい方は下記ページをご覧ください。
関連記事
