インスタグラムに投稿された情報を一覧取得するには – 「Instagram基本表示API」と「Instagram oEmbed」

インスタグラムに投稿された情報を一覧取得したい

インスタグラムで投稿したメディアを取得してウェブに表示させたいという需要は多いと思います。この場合、「Facebook for Developers」で提供されているAPIを使うことで実現が可能です。

インスタグラムの投稿データの取得を可能とするAPIは、「Facebook for Developers」において下記の2つが存在します。

・インスタグラム基本表示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データ

ここまでくれば、あとはこのJSONデータを加工(配列に変換)して、画面に出力するだけですよね。

「インスタグラム基本表示API」のInstagramユーザーアクセストークンを取得するには

Instagramユーザーアクセストークンさえ取得できれば、簡単にインスタグラムで投稿された情報を、必要な情報(フィールド)のみ一覧取得ができる事は説明いたしました。

しかし、このInstagramユーザーアクセストークンの取得までの手順が大変なんです。

〇必要なもの

開始する前に以下が必要です。

・Facebook開発者アカウント。

・Instagramアカウント。

・所有している公開ウェブサイト(インスタグラムを埋め込む先ウェブサイト)。

手順1.まずはFaceebook開発者アカウントを取得する

「Facebook for Developer」ウェブサイト(https://developers.facebook.com)にアクセス。

手順1
「Facebook for Developer」、スタートガイドをクリック
手順2
「「次へ」をクリック
手順3
手順4
メールアドレスは自動で入力されている。チェックを入れて認証ボタンを押す

手順5
最もあてはまるものを選択。登録完了ボタンを押す。

これでFacebook開発者アカウントの取得が完了です。

手順2.アプリを作成する

あらかじめインスタグラム基本表示APIを使用するウェブサイトやユーザーを指定してウェブアプリケーションとしての登録が必要となります。

アプリ登録手順1
「アプリを作成」ボタンを押す。
アプリ登録手順2
基本表示APIを使うには「生活者」を選びます。将来的にインスタグラムoEmbedも使用する場合は「なし」を選んだ方が良いです。次へを押す。
アプリ名と連絡先メアドを入力。「アプリを作成」を押す。
パスワード入力画面が表示される。フェイスブックのパスワードを入力して送信を押す。
製品の中から「instagram basic display」を選び、設定を押す
「設定」のリンクをクリック。または、左側メニューの設定→ベーシックを選ぶ
プライバシーポリシーURLとコールバックURLの入力。アプリの目的を選択のうえ「変更を保存」。
画面を下にスクロールしてプラットフォームの追加。
「ウェブサイト」を選択
サイトURLを入力して「変更を保存」。
「Instagram Basic Display」→「Basic Display」を選択
Create New Appを押す
アプリを作成を押す
役割→役割を選択
インスタグラムテスターを追加を押す
ここでインスタグラムのユーザーアカウントが必要となる
ユーザー名を一文字づつ入力していくと、マッチするユーザーの表示が絞られていく。自分のユーザー名を選択
送信ボタンを押す
インスタグラムテスターが認証待ちとして表示される。

ここでインスタグラム側での認証が必要。インスタグラムへログインし「アプリとウェブサイト」のリンクをクリック。

インスタグラムの「アプリとウェブサイト」管理画面。「テスターへのご招待」タブを選択。「承認する」を選択。

インスタグラムはここで閉じて良い。次に、インスタグラムの認証URLへリクエストが必要。

Facebook for Developerサイト(https://developers.facebook.com/docs/instagram-basic-display-api/getting-started)に説明あり。認証URLリクエストを作成し、作成した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で良い)

InstagramアプリID確認画面

作成した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

※黄色のマーカー部分が必要な情報を当て込んだ部分。

ブラウザのアドレスバーに作成したURLを入力。エンターを押す。
認証画面が表示される。許可するを押す。

次にInstagramユーザーアクセストークンを取得する。Developerサイトのトークンジェネレーターを使用。

Generate Tokenを押す
インスタグラムログイン画面。ログインする。
Allowを押す。
「I understand」にチェックするとInstagramユーザーアクセストークンが表示されるのでコピーしてメモ帳等に張り付けて保存する。

これでようやく「インスタグラム基本表示API」で必要なInstagramユーザーアクセストークンの取得完了です。

取得したInstagramユーザーアクセストークンを使い、実際にリクエストを試すと、私のインスタグラムからは下記のようなJSONデータが返ってきます(下記に表示されているJSONデータは、自作のショートコードを使って、エンドポイントにリクエストし、取得したJSONデータを表示させています)。


{"data":[{"timestamp":"2021-07-04T11:27:10+0000","username":"office.tomo","caption":"2014\u5e74\u672d\u5e4c\u96ea\u307e\u3064\u308a\u306e\u5199\u771f\u3067\u3059\u3002","permalink":"https:\/\/www.instagram.com\/p\/CQ5081LrlgR\/","id":"17878546334339083"},{"timestamp":"2021-07-04T11:24:01+0000","username":"office.tomo","caption":"\u672d\u5e4c\u85fb\u5ca9\u5c71\u30b9\u30ad\u30fc\u5834","permalink":"https:\/\/www.instagram.com\/p\/CQ50lw1r8zL\/","id":"17909119396936245"},{"timestamp":"2021-07-02T04:30:20+0000","username":"office.tomo","caption":"\u798f\u5ca1\u7a7a\u6e2f\u304b\u3089\u306e\u96e2\u9678\u52d5\u753b\u3067\u3059\u3002","permalink":"https:\/\/www.instagram.com\/p\/CQz7nFAl-5M\/","id":"18160866169085515"},{"timestamp":"2021-07-02T04:01:28+0000","username":"office.tomo","caption":"\u6de1\u8def\u5cf6\u4e0a\u7a7a\u304b\u3089\u306e\u5199\u771f\u3067\u3059\u3002","permalink":"https:\/\/www.instagram.com\/p\/CQz4WlOrv5H\/","id":"18004677922328938"},{"timestamp":"2021-07-01T17:39:18+0000","username":"office.tomo","caption":"\u591a\u6469\u6e56\u5468\u904a\u30e9\u30a4\u30c9","permalink":"https:\/\/www.instagram.com\/p\/CQyxJtTrrW8\/","id":"17883843017273152"},{"timestamp":"2021-07-01T17:37:36+0000","username":"office.tomo","caption":"\u9ed2\u5ddd\u30cd\u30b9\u30c6\u30a3\u30f3\u30b0\u30d1\u30fc\u30af","permalink":"https:\/\/www.instagram.com\/p\/CQyw9U9LazX\/","id":"18160404775086367"},{"timestamp":"2021-07-01T17:36:11+0000","username":"office.tomo","caption":"\u6c5f\u30ce\u5cf6\u306b\u81ea\u8ee2\u8eca\u3067\u30b5\u30a4\u30af\u30ea\u30f3\u30b0\u3057\u305f\u6642\u306e\u753b\u50cf\u3067\u3059\u3002\n\u5f80\u5fa9100Km\u30e9\u30a4\u30c9\u3067\u3059\u3002","permalink":"https:\/\/www.instagram.com\/p\/CQywy54LiRW\/","id":"18137352112174514"},{"timestamp":"2021-07-01T07:44:12+0000","username":"office.tomo","caption":"\u9ed2\u5ddd\u5468\u8fba","permalink":"https:\/\/www.instagram.com\/p\/CQxtDFmLLM3\/","id":"17879441513333322"},{"timestamp":"2021-07-01T07:41:51+0000","username":"office.tomo","caption":"\u30a4\u30f3\u30b9\u30bf\u30b0\u30e9\u30e0\u57fa\u672c\u8868\u793aAPI\u8a66\u9a13\u7528\u52d5\u753b\u30a2\u30c3\u30d7\u3002","permalink":"https:\/\/www.instagram.com\/p\/CQxsvahF_xN\/","id":"18001794760318175"},{"timestamp":"2021-07-01T07:40:55+0000","username":"office.tomo","caption":"\u3053\u306e\u6295\u7a3f\u306e\u30e1\u30c7\u30a3\u30a2\u30bf\u30a4\u30d7\u306fCAROUSEL_ALBUM\u3067\u3059\u3002","permalink":"https:\/\/www.instagram.com\/p\/CQxsrC8rizC\/","id":"18176396509193142"},{"timestamp":"2021-07-01T06:51:36+0000","username":"office.tomo","caption":"\u65e5\u6bd4\u8c37\u516c\u5712\u3067\u3059","permalink":"https:\/\/www.instagram.com\/p\/CQxnByurb6N\/","id":"18123428095212959"},{"timestamp":"2021-06-08T13:13:12+0000","username":"office.tomo","caption":"\u65e5\u6bd4\u8c37\u516c\u4f1a\u5802","permalink":"https:\/\/www.instagram.com\/p\/CP3Ear5r2hM\/","id":"17923064857635996"}],"paging":{"cursors":{"before":"QVFIUnN1WHNfbE90bkMyRktmQzZAGT0NwNVljVGd5VDZAiN2gyRjFOOGloRXBVVHdhb0psX09HTHpESFd5T1hNSkFSblZAZAckQ2M2dmWkEzQ1NpaF80Qzg4UVRB","after":"QVFIUnJDdnNSVUdPWjFhM3NTSkdPTTdYb25RYUs5UElzTmVVbFlxeEpUcW43VU5XejlObmpwcnhMMDVaU0ZAjM045dlhibHVQOVNhWTNtVzhGSDdFam1TNERB"}}}


このJSONデータはjson_decode()関数により連想配列へとデコードし、スタイルを施して出力すると下記のような感じになります(カードをクリックしますと私のインスタグラムの各投稿ページが別ウィンドウで開きます)。

エンドポイントへのリクエストからJSONデータの受け取り、カード表示として出力するまでの一連の流れをショートコード化しておりますのでワードプレスであれば、すぐに!どのページにも!好きな場所に!インスタグラムの投稿を一覧表示できます。

上記一覧表示をもっと大きな画面で見たい方は下記ページをご覧ください。

https://www.office-tomo.net/?page_id=3502

「インスタグラムoEmbed」でインスタグラムをそのまま埋め込む

前記、基本表示APIを使ったカード表示は、独自UIにて取得した情報を一覧表示させる場合の方法です。

他にも「Instagram oEmbed」APIを使って、インスタグラムをそのまま埋め込むための埋め込みデータを取得する方法もあります。

ただし、冒頭で説明済みですが「Instagram oEmbed」は投稿の個別URLを指定して、その投稿の埋め込みデータを取得するものであり、一覧取得できるものではありません。

従って、基本表示APIを使い、各投稿の「permalink」フィールドデータを一覧取得し、さらにこの「permalink」を使い、各投稿の埋め込みデータ取得のリクエスト→取得といった処理を連続でループ処理する必要があります。

結果、以下のような形でインスタグラムの各投稿埋め込みデータを一覧表示できます。

上記一覧表示をもっと大きな画面で見たい方は下記ページをご覧ください。

https://www.office-tomo.net/?page_id=3545

関連記事

“インスタグラムに投稿された情報を一覧取得するには – 「Instagram基本表示API」と「Instagram oEmbed」” への2件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です