インスタグラムに投稿された情報を一覧取得するには – 「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を使うには「生活者」を選びます。次へを押す。
アプリ名と連絡先メアドを入力。「アプリを作成」を押す。
パスワード入力画面が表示される。フェイスブックのパスワードを入力して送信を押す。
製品の中から「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データを表示させています)。


{"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":"ApTS1heK9WBkzL56UoIq_Aq"}}


この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

関連記事

スモール事業者がブログで検索順位を上げる方法 – ニッチなキーワードを狙いましょう

ソーシャルメディア

ホームページをお持ちの事業者様は、検索エンジンで上位表示させたいとお考えの方も多いのではないでしょうか?

例えばお酒屋さん。「日本酒  川崎市」とか、そんなキーワードで上位表示されたらウハウハですね。

でもそんなに甘くはありません。「日本酒  川崎市」等の範囲の広いキーワードによる検索結果上位表示は困難です。

ウェブの有用性、検索エンジンの仕組みから理由を説明致します。

ウェブは表現の自由に資する事から公益上有用なツールです。そして、その公益性から中身(有用な情報を発信しているか)が重視されます。

検索エンジン事業者も上記理由から、有用なウェブページを上位表示させるような仕組みにしております。

有用なページであるかどうかは、人が実際に見て判断しているのではなく、ロボットで、被リンクの数、流入トラフィックの頻度、滞在時間等から、有用な情報を発信しているウェブページかどうかを判断していると言われています。

・たくさんのページからリンクされている → 中身が良いから人気があるんだろう ⤴️⤴️

・訪問者が多い → 中身が良いから人気があるんだろう ⤴️⤴️

・滞在時間が長い → 複数のページを閲覧したから滞在時間が長かったんだろう → 中身が良いからだろう

ですので、上位表示させるには、流入トラフィック数を増やす、被リンクを増やす方法を考えた方が良いです。

流入数を増やす方法として、

・ブログ数を増やす

 → 単語数が増えるので何かの拍子に検索ヒットして訪問者が来る事につながる。地道に時間をかけて育て作り込む方法です。

・ブログタイトルはニーズを逆手にとって考える

 → 自分が何かを調べたい時にどんなキーワードを使っているかを考えると分かります。例えば、新規開業を考えていて、無料相談を考えている方や相談料金が不安な方の場合「開業 無料相談」や「開業 相談 料金」とかで調べますよね。タイトルにはこのようなキーワードを自然に入れます

 ・SNSとウェブを連携する。フェイスブックが一番効果が大きいそうです。

ブログ数を増やしたり、タイトルを逆手に取る手法は地道な時間のかかる方法です。本来のウェブの役割や有用性を考えると、そのようなウェブページが上位表示されるべきでしょうが、実際には先のとおり人気度的な指標から順位が決まってしまいます。

それでも地道に続けて下さい。そうしないと元も子もないと思います。

ただ、「日本酒  川崎市」等の漠然とした範囲の大きいキーワードの組み合わせで上位表示は難しいと思って下さい。

例えば、日本酒を買いたい方が「日本酒」で検索した場合、日本酒メーカーや大手量販店が表示されるばかりです。日本酒を売っているスモールビジネス業者は目にも止まりません。「日本酒 川崎市」等、地域を組み合わせて調べる人がいても、大手量販店等が表示されるばかりです。スモールビジネス業者は目にも止まりません。

なぜなら、大手はふんだんに広告費を使っているからです。広告費をかけて流入トラフィックを増やしているんですね。だから、こういう大きいキーワードでの検索結果は大手の一人締めであり、スモールビジネス業者は太刀打ちできません。

ただ、そのスモールビジネス業者が、地域限定の独自のお酒を売っていた場合はどうでしょうか?中にはそのようなニーズを持つ方もいるかもしれませんし、ニッチなキーワードの組み合わせだと上位表示の可能性があるわけです。

実際に私のホームページも「川崎市 ホームページ制作」では埋もれてしまい表示されません。しかし、「tcd074」でグーグル検索してみて下さい。4番目くらいに私のブログが表示されます。「addeventlistener  ie11  使えない」このキーワードの組み合わせで検索してみて下さい。私のブログが2番目くらいに表示されトップを取る勢いです。このブログは、最近毎日2~3人はアクセスがあります。そして、徐々に順位が上がり、トップを狙う勢いです。

たぶん、ホームページ制作している方が困って検索し、ニッチなキーワードで競合が少なく、それなりに上位表示されていたので、クリックされる機会が少なくともあり、そしてそれが繰り返され、定期の流入トラフィックがあるので、今の順位にまで徐々に競り上がって来たんだと思います。

ブログで検索上位を狙うのであれば、こういうニッチなスモールキーワードを狙って下さい。漠然とした範囲の大きいキーワードでは、上位を狙うのは難しいです。

ブログの工夫についてはご自身で考えて頂くしかないと思います。何故なら、私ではその業界や業務内容、ニーズに精通していないからです。キーワードを逆手に取る事もできません。

SNSとの連携をするにも工夫が必要です。ウェブにはOGPというSNS連携機能があります。

OGPについて知りたい方はこちら。

以上、参考になれば幸いです。

こちらもお読み下さい

SNSとの連携 – OGP(Open Graph Protocol)を設定しよう

ソーシャルメディア

当オフィスのホームページもようやくOGP(Open Graph Protocol)対応へと改修いたしました。

一応、投稿ページにはシェアボタンを設置していたのですが、シェアボタンが正常に動いていないことに気づきまして、ついでに、OGP設定も行った次第です。しかし、SNSと連携するなら、ホームページのOGPはとても便利な機能だと実感しました。

〇OGP(Open Graph Protocol)とは何か?

まず、OGP(Open Graph Protocol)とは何かといいますと、FacebookやTwitter等のSNSでシェアした際に、OGPに対応しているホームページですと、そのシェアしたページのタイトルやイメージ画像、メタディスクリプション等が、カード形式で表示される機能です。

〇OGP対応サイトにする事のメリット

まず、SNSにシェアされやすくなります。

良い記事がある。じぁあシェアしよう!と思っても、シェアする側からすると説明文を記載したり、リンクを張ったり、画像を張ったりと、シェアするにも手間がかかり、面倒くさいもの。

しかしそれが、OGP対応サイトであれば、SNSユーザーは、URLアドレスを入力するだけで、その記事のグラフィカルな情報を自身のSNSに埋め込む事ができるんです。

他にも、自分が投稿した記事を自身のSNSと連携する際にも便利です。

これまでは例えばTwitterへブログを投稿しようと思ったら、Twitterにアクセスして、リンク張って、文章書いて、とかなり面倒でありまして、それによりTwitterアカウントは持っていましたものの、ほぼ稼働していない状態でした。

それが、OGP対応したことにより、当オフィスのTwitterにブログ記事を一気にツイートできました。

〇OGP対応のサイトにするには – OGP設定

OGPに対応したホームページにするには、ホームページのヘッダー部分に決まった書式でコードを記述する必要があります。

ホームページのタイトルや内容を検索エンジンに伝える為にヘッダーにメタ情報を記述したりしますが似たようなものです(OGP設定はTwitterやFacebook等に情報を伝える点、また、グラフィカルな情報であるという点で異なりますが)。

1.OGPの宣言

ウェブサイトをOGP対応とするためには、まずは宣言が必要です。宣言は<html>タグに記述するようです。以下、宣言の記述方法です(この宣言はそのままコピペでOK)。

<html prefix="og: https://ogp.me/ns#">

2.Open Graphマークアップ

フェイスブックやTwitter等のSNSに渡したい情報を<head> ~ </head>内にメタタグを使いメタデータとしてマークアップします。

SNSに渡せる情報(プロパティ)は決まっており、以下のとおりです。

og:url ⇒ ページの正規URを指定します。SNSにカード表示させたい投稿ページのURL等を指定します。以下、マークアップ例。

<meta property="og:url" content="https://www.office-tomo.net">

og:title ⇒ 記事のタイトル。以下、マークアップ例。

<meta property="og:title" content="<?php bloginfo( 'name' ); ?>">
 //トップページの場合

og:description ⇒ コンテンツの簡単な説明。2~4文が一般的です。Facebook上では、投稿のタイトルの下に表示されます。以下、マークアップ例。

<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
 //トップページの場合

og:image ⇒ コンテンツがFacebookでシェアされたときに表示される画像のURL。以下、マークアップ例。

<meta property="og:image" content="<?php the_post_thumbnail_url('large'); ?>">
 //投稿ページで、アイキャッチ画像を指定する場合

og:type ⇒ コンテンツのメディアのタイプ。

<meta property="og:type" content="website"> //トップページの場合、一般的に「website」を指定するようです。

<meta property="og:type" content="article">
 //投稿ページ等の記事の場合、「article」を指定。

og:locale ⇒ リソースのロケール。デフォルトはen_USです。

<meta property="og:locale" content="ja_JP"> //日本語のみのページであればja_JPを指定します。

基本的なOpen Graphマークアップの仕方は以上のとおりです。

〇有料テーマだとOGPに対応しているテーマが殆ど

OGPマークアップ方法を説明しましたが、実際には、有料テーマや一部無料テーマにはOGP設定機能を持つテーマが多いので、このようなテーマを使用すればOGPマークアップを自分で行う必要はなく、管理メニューで簡単に可能です。

・TCDテーマの場合

TCDテーマOGP設定方法
TCDテーマオプション内にOGP設定メニューがある

【TCDテーマ】

・リキッドプレステーマの場合

リキッドプレスOGP設定方法
管理メニュー「カスタマイズ」内の「SEO」メニューを開く
リキッドプレスOGP設定方法
「「「「「OGP、TwitterCards」メニュー

・Vektor「ライトニング」無料版の場合

ライトニング無料版の場合、テーマ単体ではOGPには対応しておりませんが、高機能無料プラグイン「All in one Ex-Unit」をインストールすることで、プラグインでのOGP設定が可能です。

vektorテーマOGP設定方法
プラグイン「All in one Ex-Unit」SNSメニュー
Vektor WordPress Solutions
Lightning Proの紹介サイト

是非、シェアやツイートをお願い致します。

【参考リンク】

・Facebook開発者向けOGPの解説(公式:ウェブ管理者向けシェア機能ガイド)

https://developers.facebook.com/docs/sharing/webmasters#markup

・Twitterカード利用開始ガイド(公式サイト)

https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started