Analog Studio

「Instagram API」が廃止に!代替の「Instagram Graph API」に移行しよう!

概要

Instagram の投稿を Web サイトに組み込むために「Instagram API」を使用している Web デザイナー・ビルダーの方は多いと思います。
しかし、2020年の初めまでに「Instagram API」は使用することができなくなることがアナウンスされています。

そこで今回は、2020年以降でも Instagram の情報を取得できる「Instagram Graph API」の使用方法についてまとめます。
「Instagram API」の使い方は既に記事にまとめていますが、これから開発される場合はこの記事を参考にして下さい。

「Instagram Graph API」とは?「Instagram API」との違いは?

まずはじめに「Instagram API」と「Instagram Graph API」について確認していきましょう。
名前が似ているので良くわかりませんよね。私ははじめ同じだと思ってました(笑)

①APIの提供元が「Facebook」か「Instagram」か

まずは、API の提供元が異なっています。

API 提供元
Instagram API Instagram
Instagram Graph API Facebook

Instagram は Facebook に2012年に買収されていますが、開発は独立して行っています。
そのため、「Instagram API」は Instagram のアカウントだけで使用することができました。

一方、「Instagram Graph API」は Facebook と連携した Instagram のビジネスアカウントと連携先の Facebook アカウントの2つが必須となっています。

これらの概念図を描くと以下のようになります。
Facebook を中継した仕組みとなりますので API を利用するには大元の Instagram と中継箇所である Facebook の両方が必要です。

②取得できる情報量

次に取得できる情報量が違っています。
「Instagram API」では投稿情報 (画像 URL やいいね!の数、キャプションなど) をリクエストする URL と投稿者情報 (ユーザ名やユーザ ID) が異なっていますが、「Instagram Graph API」では一つのリクエスト URL でそのどちらの情報も、そしてそれ以外にも必要であればもっといろいろな情報を取得できます。

また、「Instagram API」は最新20投稿しか取得することができませんでしたが、「Instagram Graph API」は制限なく取得することができます。
これは非常にありがたいです。これだけでも移行する価値があります。
しかも、現在読み込んだ情報の次の情報を取得するためのリクエスト URL もセットで送られてきますので非常に便利です。

下準備のアカウント連携とアクセストークン取得をしよう!

では早速「Instagram Graph API」で Instagram の投稿情報を取得していきたいと思います。
まずは下準備として Instagram のビジネスアカウントを Facebook ページに連携させ、アクセストークンを取得しましょう!

InstagramビジネスアカウントをFacebookページと連携!

「Instagram API」ではビジネスアカウントにする必要はありませんでしたが、Facebook ページと連携させるにはビジネスアカウントが必要です。
というよりも、ビジネスアカウントに変更する際に Facebook ページと連携させるので、一連の流れといった感じです。
※Facebook ページとの連携をスキップしてビジネスアカウントにすることも可能ですが、今回は Facebook ページとの連携は必須です。

Facebook ページとの連携は様々なサイトで紹介されていますのでそちらを参考にしてみて下さい。
スマホアプリの Instagram のプロフィール設定から「ビジネスプロフィールに切り替える」を選んで連携先の Facebook ページを指定するだけです。
(Web 版の Facebook ページの設定から "Instagaram" の項を選択すれば Facebook からビジネスアカウントに変更することもできます)

ここで一点だけ注意点があります。
それは、連携させる Facebook ページを先に作成しておいて下さい。
Instagram をビジネスアカウントにする際に Facebook ページを作成して変更することができますが、この方法だと後述の無期限アクセストークンが発行できなかったので必ず先に Facebook ページを作成してからビジネスアカウントにするようにして下さい。
(はっきりした理由は分かりませんが、生成されるページの種類が内部的に異なっているのかもしれません)

Facebookアプリを作成する!

「Instagram Graph API」を利用するには Facebook の開発者ツールでアプリを作成する必要があります。
アプリといってもここではタイムラインを表示するデータを取得するだけなので大層なものではありません。
2019年4月時点では自分のアカウントのデータを取得するだけならアプリの審査など無しで使用できそうです。

Facebook for Developer - アプリのログインのレビュー - 要件

また、Instagram 関係の公式技術ドキュメントはあるのですが、日本語の内容が不十分でタイムラインを表示するだけといった場合には分かり難いです。
しかし、一応は目を通しておくことをおススメします。
・Facebook for Developer - Instagram プラットフォーム

開発者ツールにログインと開発者登録をします!

まずは、開発者向けページに移動します。 → https://developers.facebook.com/

すると上記のようなページが表示されると思いますので、先ほど連携させた Facebook ページの (管理者) アカウントでログインします。
Facebook でログインしている場合はログイン済みかもしれません。

次に右上の "マイアプリ" から "新しいアプリを追加する" をクリックすると初回は開発者登録を求められる筈なので指示に従って情報を入力します。
電話番号の認証などがあるので認証コードを受け取り入力すれば完了です。
※Facebook は良く名称やデザインが変わるのでご注意下さい。先のドキュメントの SS も古いものが多く使われていたりします。

表示名を決めてアプリを作成!

開発者 (API などを利用する、という意味の開発者) になってアプリを作成すると、表示名の入力を求められます。
この表示名は特に表立って使われることはないので、自分が分かりやすい名前を付けておけば良いです。

ロボットでないの良くある認証を終えるとテンプレートのような "シナリオの選択" という画面が表れます。
特にテンプレートを使用する必要はないのでスキップを選択すればOKです。

スキップするとアプリ ID などの情報が表示される画面になりますので、これで完成です。
色々入力する箇所がありますが、色々試した結果、特に何も入力する必要はなさそうです。

無期限のページアクセストークンを取得する!

続いて、アクセストークンを取得していきましょう。
アクセストークンとはあるデータにアクセスするための認証コードでパスワードみたいなものです。
Facebook で使うアクセストークンは非常に長いので十分な安全性があると言えそうです。

ここでアクセストークンには色々な種類があり、どの範囲の情報にアクセスできるかや有効期限によって種類が分かれています。
範囲によってユーザ/アプリ/ページアクセストークンの3種類があり、今回使うのはページアクセストークンです。
ユーザアクセストークンやページアクセストークンでも Instagram の情報を取得できますが、ページアクセストークンの有効期限を無期限にするのが一番簡単だったこととページへのアクセス権限のみで十分なのでページアクセストークンを使用します。
・Facebook for Developer - アクセストークン

無期限アクセストークンは一発では取得できませんのでいくつか手順を踏むことになります。
以下の通りに進めれば取得されると思いますので、進めてみて下さい。

短寿命なユーザアクセストークンを取得する

まずは、寿命が非常に短い (約1時間) のユーザアクセストークンを取得します。
上記、公式ドキュメントにもありますがページアクセストークンを取得するにははじめにユーザアクセストークンを取得しておく必要があります。

ですので、先ほどのアプリを作成した画面の右上の方にある "ツール" というところから "グラフ API エクスプローラ" を開きます。
・Facebook for Developer - グラフ API エクスプローラ

このような画面が表示されますのでここからアクセストークンを色々操作していきます。

右上に "アプリ" というプルダウンがあるので、先ほど作成したアプリを選択します。
そして続けてすぐ下の "トークンを取得" ボタンをクリックと種類が選べるので "ユーザーアクセストークンを取得する" をクリックします。

すると、なんだか良く分からないチェックボックスが沢山あるポップアップが出てきます。
個々の説明は公式ドキュメントを調べても出てこなかったので英語を読んでそれらしいものを探しました。
以下のものを選択しておけば Instagram のタイムラインを表示するには必要十分な情報を得ることができました。
色々な組み合わせで試したりエラーから調べたものなのでもしかしたら他の組み合わせでも良いかもしれません。ご了承下さい。

選択できたら "アクセストークンを取得" ボタンをクリックすると、子ウィンドウでログインや承認するかが確認されるのでログイン→OKと進みます。
パスワード入力を求められることもあり、その場合は Facebook のログインパスワードを入力して下さい。

成功すると、アクセストークンという入力欄に取得されたユーザアクセストークンが入力されます。
これで短寿命なユーザアクセストークンの取得が完了です。

ユーザアクセストークンの有効期限を延ばす

次に先ほど取得した短寿命なページアクセストークンの有効期限を延ばします。
これは非常に簡単です。

アクセストークンの入力欄の左端にある "!" マークをクリックするとトークン情報が見られます。
この右下にある "アクセストークンツールで開く" というボタンがありますので、これをクリックします。

クリックするとアクセストークンデバッガーが新規タブで開かれます。
左下に "アクセストークンを延長" というとても分かりやすいボタンがあるのでクリックするとトークンの有効期限が延長されます。

パスワードが求められることもあるので、必要なら入力すると長寿命 (約2ヶ月) のユーザアクセストークンが生成されます。
表示されているので全てではないので、デバッグをクリックして全て表示します。

長寿命のユーザアクセストークンを使って無期限ページアクセストークンを取得

上で取得した長寿命のアクセストークンを使ってページごとのアクセストークンを取得していきます。
これには "グラフ API エクスプローラ" を使います。
・Facebook for Developer - グラフ API エクスプローラ

グラフ API エクスプローラのアクセストークン入力欄に長寿命ユーザアクセストークンを入力します。
そして、そのすぐ下の入力欄に "/me/accounts" と入力して送信をクリックします。

すると、あなたの持っている各 Facebook ページのアクセストークンが表示されますので、これをメモしておいて下さい。
これが求めていた「無期限のページアクセストークン」になります。

ちなみにですが、"/me/accounts" は以下のアドレスをブラウザのアドレスバーに打ち込んでも同じです。
こういった面倒な URL を一々自分で整形しなくても良いのがグラフ API の使い勝手の良さです。
(先頭の "GET" は普通の HTTP リクエストで POST / DELETE に変更したりもできます)

https://graph.facebook.com/v3.2/me/accounts?access_token=EAAde3ey8AOUBAE98ryASjZCGBLxTyjy29WX・・・(以下略)
生成したページアクセストークンの有効期限を確認

最後に本当に有効期限が無くなっているのかアクセストークンデバッガで確認します。

このように、タイプが "Page" で有効期限が "受け取らない" になっていれば成功です。おめでとうございます。
上手くできていなかったらはじめからやり直してみて下さい。

Instagram をビジネスアカウントに変更する際に Instagram から Facebook ページを新規で作成した場合は上手くいかないかもしれませんので、Facebook からページを作り直してそこに Instagaram アカウントを連携させてやり直してみて下さい。

InstagramのビジネスアカウントIDを確認する

一番大変なアクセストークンの取得が終わりましたので、後はデータを取得して整形するだけです。
データを取得するには Instagram ビジネスアカウントの ID が必要なのでここで確認しておきます。
とても簡単なので以下からサクッと行きましょう!

ページアクセストークンを取得する際にグラフ API エクスプローラにユーザアクセストークンを入力していると思います。
その状態でリクエスト (ページトークン取得時に "/me/accounts" を入れた欄) に "/me/accounts?fields=instagram_business_account,name" と入力します。
そして、送信ボタンを押せばインスタグラムのビジネスアカウント ID が表示されます。

これで、ビジネスアカウントの ID が分かりましたね。
あとはデータを取得するだけです。

Instagramの投稿情報を取得しよう!

いよいよ、投稿情報を取得していきます。
PHP などの表示プログラムに組むまでは分かりやすいのでグラフ API エクスプローラで確認していきます。
必要な情報は、以下の2つです。

注意ですが、無期限のページアクセストークンではなくてもここまでで出てきたアクセストークンであればどれでも投稿情報が取得できます。
しかし、無期限のページアクセストークンでデータを取得できることを確認したいので間違えないようにして下さい。
あと、最初のユーザアクセストークンは期限切れになっているかもしれません。

まず、グラフ API エクスプローラのアクセストークン欄に無期限のページアクセストークンを、リクエスト欄にビジネス IDを入力します。
ビジネス ID に続けて、"?fields=name,username,profile_picture_url,media_count,followers_count,follows_count,media.limit(9){caption,like_count,media_url,permalink,timestamp,thumbnail_url}" を入力します。

突然、呪文のような文字列が出てきましたが、とりあえずそのまま入力して取得ボタンをクリックして下さい。
この呪文を吹き込むと以下のように Instagram の最新投稿データを取得することができます!

JSON 形式のデータを取得できますので、Javascript でも PHP でもお好きなプログラミング言語で表示用のプログラムを作成して下さい。

?fields=に続く文字列は何なのか?

先ほど謎の呪文をいきなり出しました。
実は、この "fields" というパラメータには自分が API から返してもらいたいデータを指定することができるのです!
好きなデータを取捨選択して取り出すことができるとは「Instagram API」よりもかなり高機能です。

どんな情報がどんなパラメータ値で取得できるかは以下の公式ドキュメントを参考にして下さい。
これもとても分かり難いので先ほどのパラメータ値を参考に必要ない情報を削除すると楽だと思います。
・Facebook for Developer - Instagram API - リファレンス

プログラミング言語からのリクエストURL

デバッグツールからは取得できましたが、プログラミング言語からはどのようにリクエストを飛ばすのでしょうか?
途中で少し触れていますが、以下の URL に HHTP でアクセスすれば先ほどの JSON 文字列がレスポンスとして返ってきます。

https://graph.facebook.com/v3.2/[ビジネスID]?fields=name,username,profile_picture_url,media_count,followers_count,follows_count,media.limit(9){caption,like_count,media_url,permalink,timestamp,thumbnail_url}&access_token=[無期限のページアクセストークン]
Javascriptを使って取得する(非推奨)

Javascript を使ってデータを取得する場合は XHR などを利用すると簡単です。
但し、Javascript はクライアントサイド言語なのでアクセストークンが丸見えの状態です。
勝手に利用されてしまう可能性があるので特別な事情 (限られた人しかアクセスできないページに使うなど) がない限りサーバサイド言語を使って下さい。

// ヘッダに記載する場合はDOMツリーが構築されてから処理 // BODY要素の末尾に記載する場合は即時リクエストを投げてもOK // // 古いブラウザでの動作を考える場合にはconstはvarに置き換えて下さい window.addEventListener("DOMContentLoaded", function(){ const num = 9; // 一度に取得する投稿数 const XHR = new XMLHttpRequest(); const fAPI = "https://graph.facebook.com/v3.2/"; // Ver.3.2 const igID = "[InstagramのビジネスID]"; const token = "[無期限のページアクセストークン]"; const query = "name,username,profile_picture_url,media_count,followers_count,follows_count,media.limit(" + num + "){caption,like_count,media_url,permalink,timestamp,thumbnail_url}"; const gURL = fAPI + igID + "?fields=" + query + "&access_token=" + token; if(XHR){ XHR.open("GET", gURL, true); XHR.send(null); // nullは省略してもOK XHR.onreadystatechange = function(){ if(XHR.readyState === 4 && XHR.status === 200){ // 先ほどのデータが XHR.responseText に入っている console.log(XHR.responseText); // JSON.parse()を使えば配列に展開できる console.log(JSON.parse(XHR.responseText)); // 以下、好きな処理を行う } }; } }, false);
PHPを使って取得する場合(サーバサイド言語を推奨)

PHP を使う場合は Javascript よりもかなり簡潔になります。
アクセストークンがユーザには直接見えないのでできるだけサーバサイド言語を使用する方が良いでしょう。

$num = 9; $f_api = 'https://graph.facebook.com/v3.2/'; $ig_id = '[InstagramのビジネスID]'; $token = '[無期限のページアクセストークン]'; $query = 'name,username,profile_picture_url,media_count,followers_count,follows_count,media.limit('. $num. '){caption,like_count,media_url,permalink,timestamp,thumbnail_url}'; // データを取得する $json = file_get_contents("{$f_api}{$ig_id}?fields={$query}&access_token={$token}"); // JSONデータを配列に展開する // オブジェクトに展開する場合は第二引数を削除して下さい (第一引数のみ) $data = json_decode($json, true); // 表示する echo var_dump($data); // 以下好きな処理

PHPでタイムラインを表示するHTMLを出力しよう!

では最後に PHP でデータを取得してタイムラインを表示する HTML を出力してみましょう。
PHP ファイル単体で完結するようにインラインフレームで呼び出すことを想定して CSS なども統合してしまいます。

詳しいコードの解説はしないので、ご不明な点がありましたらお問合せフォームよりご質問をお願いします。
カスタマイズ等をご依頼頂く場合は有償となりますので、その場合も納期や仕様、予算等をご相談下さい。

サンプルコード

基本的な仕組みと構造は「Instagram API」を使った場合と同じです。
データの取得先が「Instagram API」か「Instagram Graph API」のどちらを使っているかの違いです。

難しいことは何もしていないので、コード中のコメントを参考に動作を追ってみて下さい。
そのままコピペでも十分に使えるとは思います。

<?php ////////////////////// /* 初期設定 */ ////////////////////// // 投稿の最大取得数 $max_posts = 9; // Graph API の URL $graph_api = 'https://graph.facebook.com/v3.2/'; // ビジネスID $ig_buisiness = '[ビジネスID]'; // 取得するフィールドの設定 $fields = 'name,username,profile_picture_url,media_count,followers_count,follows_count,media.limit('. $max_posts. '){caption,like_count,media_url,permalink,timestamp,thumbnail_url}'; // 無期限のページアクセストークン $access_token = '[無期限のページアクセストークン]'; // キャッシュ時間の設定 (最短更新間隔 [sec]) // 更新頻度が高いと Graph API の時間当たりの利用制限に引っかかる可能性があるので、30sec以上を推奨 // デフォルトは3600sec $cache_lifetime = 3600; // 表示形式の初期設定 (グリッド表示の時は 'grid'、一覧表示の時は 'list' を指定) $show_mode = 'grid'; ////////////////////// /* 初期設定ここまで */ ////////////////////// ////////////////////// /* 取得処理 */ ////////////////////// /* キャッシュしておいたファイルが指定時間以内に更新されていたらキャッシュしたファイルのデータを使用する 指定時間以上経過していたら新たに Instagaram Graph API へリクエストする */ // キャッシュ用のディレクトリが存在するか確認 // なければ作成する if(!file_exists(dirname(__FILE__). '/cache/')){ if(mkdir(dirname(__FILE__). '/cache/', 0774)){ chmod(dirname(__FILE__). '/cache/', 0774); } } // キャッシュファイルの最終更新日時を取得 $cache_lastmodified = @filemtime(dirname(__FILE__). '/cache/instagram_graph_api.dat'); // 更新日時の比較 if(!$cache_lastmodified){ // Graph API から JSON 形式でデータを取得 $ig_json = @file_get_contents($graph_api. $ig_buisiness. '?fields='. $fields. '&access_token='. $access_token); // 取得したデータをキャッシュに保存する file_put_contents(dirname(__FILE__). '/cache/instagram_graph_api.dat', $ig_json, LOCK_EX); } else{ if(time() - $cache_lastmodified > $cache_lifetime){ // キャッシュの最終更新日時がキャッシュ時間よりも古い場合は再取得する $ig_json = @file_get_contents($graph_api. $ig_buisiness. '?fields='. $fields. '&access_token='. $access_token); // 取得したデータをキャッシュに保存する file_put_contents(dirname(__FILE__). '/cache/instagram_graph_api.dat', $ig_json, LOCK_EX); } else{ // キャッシュファイルが新しければキャッシュデータを使用する $ig_json = @file_get_contents(dirname(__FILE__). '/cache/instagram_graph_api.dat'); } } // 取得したJSON形式データを配列に展開する if($ig_json){ $ig_data = json_decode($ig_json); if(isset($ig_data->error)){ $ig_data = null; } } // データ取得に失敗した場合 // サーバエラーを返す if(!$ig_json || !$ig_data){ // exit('データ取得に失敗しました'); // 500 Internal Server Error header('HTTP', true, 500); exit; } // 初期表示の設定確認 if($show_mode !== 'grid' && $show_mode !== 'list'){ $show_mode = 'grid'; } ////////////////////// /* HTML生成 */ ////////////////////// // 外部ファイルは不要 // ロゴや CSS、アイコンフォント (SVG) は全て組み込み済み // Javascript は不使用 ?> <!DOCTYPE HTML> <html lang="ja"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Instagramタイムライン"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="robots" content="noindex,nofollow"> <title>Instagramタイムライン</title> <style> html, body{ margin : 0; padding : 0; width : 100%; height : 100%; box-sizing : border-box; } body{ border : 1px solid rgba(0,0,0,0.3); overflow : hidden; } body *{ font-family : "游ゴシック","Yu Gothic",YuGothic,"メイリオ","Meiryo UI","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","MS Pゴシック",sans-serif; font-weight : 500; color : #252525; } a{ text-decoration : none; outline : none; } img{ outline : none; border : none; } article#SNS_Instagram{ display : block; margin : 0px; } article#SNS_Instagram *{ text-align : left; } article#SNS_Instagram header > section{ display : block; margin : 0px; padding : 10px; background-color : #f7fff8; background : linear-gradient(135deg,#ebff3709,#46ff4b09,#0affff09); border-bottom : 1px solid #969696; } article#SNS_Instagram header h1{ margin : 0px; padding : 0px; } article#SNS_Instagram header h1 > a{ position : relative; display : block; margin : 0px; margin-left : 75px; padding-left : 10px; font-size : 0; } article#SNS_Instagram header h1 > a > img{ position : absolute; top : 0px; left : -75px; content : ' '; display : block; width : 75px; height : 75px; /* Instagramのロゴは上下左右にロゴの半分以上の空白が必要 */ /* Detail => https://en.instagram-brand.com/assets/icons */ } article#SNS_Instagram header h1 > a > svg{ width : 123.2px; height : 44px; } article#SNS_Instagram header h2{ position : relative; margin : 0px; margin-left : 75px; padding : 0px; padding-left : 10px; font-size : 0; line-height : 25px; } article#SNS_Instagram header h2 div{ vertical-align : middle; } article#SNS_Instagram header h2 *{ font-size : 14px; font-weight : 400; line-height : 25px; } article#SNS_Instagram header h2 div:first-child{ position : absolute; top : 0px; left : 10px; width : 25px; height : 25px; overflow : hidden; border-radius : 25px; } article#SNS_Instagram header h2 div:first-child img{ width : 100%; height : 100%; } article#SNS_Instagram header h2 div:last-child{ margin-left : 30px; } article#SNS_Instagram header h2 div:last-child a{ display : block; width : 100%; font-size : 14px; color : inherit; white-space : nowrap; overflow : hidden; text-overflow : ellipsis; } article#SNS_Instagram header p{ display : none; } /* 表示形式の切替ボタン */ article#SNS_Instagram header > nav{ display : block; font-size : 0px; text-align : center; background-color : #EFEFEF; background : linear-gradient(0deg, rgb(197, 197, 197), rgb(245, 245, 245)); box-shadow : 0px 2px 6px rgba(0,0,0,0.3); } article#SNS_Instagram header > nav > label{ position : relative; display : inline-block; width : 49%; height : 44px; padding : 5px; font-size : 0px; color : transparent; text-align : center; box-sizing : border-box; cursor : pointer; } article#SNS_Instagram header > nav > label > svg{ position : absolute; top : 50%; left : 50%; display : inline-block; width : auto; height : 24px; color : #666; transform : translate(-50%, -50%); } article#SNS_Instagram header > nav > label > svg > path{ color : inherit; } article#SNS_Instagram header > nav > label + label{ margin-left : 1%; } article#SNS_Instagram header nav > label + label::before{ content : ''; position : absolute; display : block; width : 1px; left : -1px; top : 0px; bottom : 0px; background-color : #969696; } article#SNS_Instagram input{ display : none; } /* メイン表示部のスクロール設定 */ article#SNS_Instagram main{ position : absolute; top : 140px; /* header : 90px + 44px = 134px / box-shadow : 6px */ bottom : 2px; left : 0px; right : 2px; display : block; overflow-x : hidden; overflow-y : auto; } /* 本家インスタ風に3*3の格子状にサムネイルを並べる */ article#SNS_Instagram input#show_grid:checked + main{ padding-top : 2px; font-size : 0px; } article#SNS_Instagram input#show_grid:checked + main > div{ position : relative; display : inline-block; margin : 0px; padding : 0px; padding-top : 33.3%; width : 33.3%; } article#SNS_Instagram input#show_grid:checked + main > div > a{ position : absolute; top : 2px; bottom : 2px; left : 2px; right : 2px; display : block; } article#SNS_Instagram input#show_grid:checked + main > div > a > div{ width : 100%; height : 100%; background-position : center; background-size : cover; overflow : hidden; } article#SNS_Instagram input#show_grid:checked + main > div > p{ display : none; } /* サムネイルとコメントを並べる */ article#SNS_Instagram input#show_list:checked + input + main > div{ display : block; margin : 5px; padding : 5px; border-radius : 5px; border : 1px solid #999; } article#SNS_Instagram input#show_list:checked + input + main > div > a > div{ display : block; position : relative; padding-top : 50%; background-position : center; background-size : cover; overflow : hidden; } article#SNS_Instagram input#show_list:checked + input + main > div > time{ display : block; margin : 5px; font-size : 14px; color : #A4A4A4; text-align : right; } article#SNS_Instagram input#show_list:checked + input + main > div > p{ display : block; margin : 5px; padding : 0px; color : #252525; text-align : left; word-break : break-all; } article#SNS_Instagram input#show_list:checked + input + main > div > p > a{ color : #3402A7; cursor : pointer; } </style> </head> <body> <article id="SNS_Instagram"> <header> <section> <h1> <a href="https://www.instagram.com/" target="new" rel="noopener"> <img alt="Instagram Logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAFLBkF0AAAACXBIWXMAAA7EAAAOxAGVKw …(省略)"> Instagram <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="840" height="300" viewBox="0 0 840 300" version="1.1"><path style="fill:#262626" d="m 64.760239,49.107948 c -16.2103,6.7854 -34.030801,25.955 -39.659101,50.016996 -7.1278,30.487496 22.534301, …(省略)" /></svg> </a> </h1> <h2> <div> <img src="<?php echo $ig_data->profile_picture_url; ?>" alt="profile_picture"> </div> <div> <a href="https://www.instagram.com/<?php echo $ig_data->username; ?>/" target="new" rel="noopener"> <?php echo $ig_data->name."\n"; ?> (<?php echo $test; ?>@<?php echo $ig_data->username; ?>) </a> </div> </h2> <p> 投稿数:<?php echo $ig_data->media_count."\n"; ?> フォロワ:<?php echo $ig_data->follows_count."\n"; ?> </p> </section> <nav> <label for="show_list"> <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg> </label> <label for="show_grid"> <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"></path></svg> </label> </nav> </header> <!-- CSS で表示切替用 Radio ボタン (非表示) --> <input type="radio" name="show-mode" id="show_list" value="list"<?php if($show_mode === 'list'){ echo ' checked'; } ?>> <input type="radio" name="show-mode" id="show_grid" value="grid"<?php if($show_mode === 'grid'){ echo ' checked'; } ?>> <main> <?php $days = array('日', '月', '火', '水', '木', '金', '土'); if(is_array($ig_data->media->data)){ foreach($ig_data->media->data as $post){ $caption = $post->caption; $caption = mb_convert_encoding($caption, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); $caption = preg_replace('/\n/', '<BR>', $caption); $caption = preg_replace('/(http[s]{0,1}:\/\/[a-zA-Z0-9\.\/#\?\&=\-_~]+)/', '<a href="$1" target="new" rel="noopener">$1</a>', $caption); $caption = preg_replace('/#([^<>]+?)(\s|\n|\z|#|@)/', '<a href="https://www.instagram.com/explore/tags/$1/" target="new" rel="noopener">#$1</a>$2', $caption); $caption = preg_replace('/@([^<>]+?)(\s|\n|\z|#|@)/', '<a href="https://www.instagram.com/$1/" target="new" rel="noopener">@$1</a>$2', $caption); ?> <div> <a href="<?php echo $post->permalink; ?>" class="instagram" target="new" rel="noopener" title="likes:<?php echo $post->like_count; ?>"> <div style="background-image: url('<?php echo $post->media_url; ?>');"></div> </a> <time datetime="<?php echo $post->timestamp; ?>"><?php echo '投稿日時:', date('Y年 n月 j日', strtotime($post->timestamp)), ' (', $days[date('w', strtotime($post->timestamp))], ')'; ?></time> <p> <?php echo $caption; ?> </p> </div> <?php } } ?> </main> </article> </body> </html>

ダウンロード:サンプルコード (zipファイル:23,984B)

実行結果

上記コードを実行すると以下のようになります。
レシポンシブデザインなのでフレームサイズに合わせて変化します。

まとめ

以上、インスタグラムのタイムラインを「Instagram Graph API」を使って表示する方法でした。
「Instagram API」に比べて格段に使いやすくなっていますので、是非ご自身でお確かめ下さい。

Instagram と Facebook ページの連携がなんとなく心のハードルを上げてしまっているように感じますが、それほど難しいことはないです。
アクセストークンの取得方法もちょっと独特で面倒ですがこの記事の手順通りに進めていけばそれほど時間は掛かりません。

自分でやったけど巧くいかない、時間がなくて面倒だ、PHP や CSS のカスタマイズの仕方が分からない、という方はご依頼頂ければお手伝いできますのでご相談下さい!
(土日祝なども特急対応も可能です)

その他、Javascript と組み合わせたカスタマイズ等のご依頼も受け付けています。
例えば、以下のような機能を追加することができます。

ご相談はお問合せフォーム、若しくはページ下部のコメントやフォームよりお願いします。