以前はFacebookが発信しているRSS/XML形式のfeed情報を取得し、比較的簡単に自身のWEBサイト等にFacebookページの投稿データなどを表示させる事が出来ましたが、Facebookのfeed配信の機能が2015年6月に仕様変更してしまい、現在はJSON (JavaScript Object Notation)形式のフィード情報をGraph APIを使いデータを取得するという非常にややこしい仕様になってしまいました。
もちろん、Facebook側が用意している「Page Plugin」を使えば簡単に自身のWEBサイト等にFacebookページの投稿データなどを表示させる事は出来ますが、「Page Plugin」を使わずに今回のようにフィード情報を使うことで、
- テキストデータで出力される為、Googleのクローラーが認識しやすくなる。
- テキストデータなのでCSSで自由に修飾が出来る。
- 「Page Plugin」を使わない事でページの表示を早くする事が出来る。
等のメリットがあります。
JSONとは?
JSON(ジェイソン、JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。
GraphAPIを使ってFacebookページの情報を取得
トークンの取得
次にhttps://developers.facebook.com/tools/accesstoken/でトークンの取得を行います。
たんに投稿データを取得し、自身のサイトの表示させる場合はApp Tokenのみで大丈夫ですが、リンクや他の機能も使いたい場合はUser Tokenを使い「Access Token」を取得する必要があります。
「App Token」の場合、特に有効期限は有りませんが、「Access Token」の場合は最大でも有効期限が2ヶ月なので注意が必要です。
「Access Token」の取得
次にGraph API Explorerhttps://developers.facebook.com/tools/explorer/
にアクセスして、「Access Token」を取得します。
用途によって、先ほど取得したApp TokenもしくはUser Tokenを「Access Token」の枠の中に挿入し、その下の「/v2.3/」以降にページ名を入力してsubmitをクリックするとFacebookページの情報がJSONで表示されます。ここで表示されたJSONデータの中の「FacebookページID」が後ほど必要になります。
HTMLで出力
今までの工程で取得した「Access Token」もしくは「App Token」と「FacebookページID」をURLに当てはめ、アクセスするとフィードがJSON形式で参照できます。
[https://graph.facebook.com/v2.3/【FacebookページID】/feed?access_token=【Access TokenもしくはApp Token】]
JSONはJavaScriptベースで設計されてはいますが、PHPなど他の言語でもデータの引き渡しが出来るのが特徴です。
今回はjQueryの「.getJSON」メソッドを使い必要なデータを引っ張って来て、liタグなどに生成し、CSSで適当に読みやすくすれば完了。
HTMLサンプルソース
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Facebookページのフィード情報を取得する(JSON形式)</title> <style> li { list-style: none; margin-bottom: 20px; width: 500px; } span { margin-right: 20px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $.ajax({ type: "GET", url: "https://graph.facebook.com/【FacebookページID】/feed?access_token=【Access TokenもしくはApp Token】", dataType: "json", success: function(json){ json = json.data; var num = json.length; var Feed = "<ul>\n"; for(var i=0; i<=4; i++){ var time = parseISO8601(json[i].created_time); var text = json[i].message; var fblink = json[i].link; var fbphoto = json[i].picture; Feed += '<li><span>' + time + '</span>' +'<br>' + '<a href="' + fblink + '">' +text+ '</a>' + '<p><img src="' +fbphoto+ '"></p>' + '</li>\n'; } Feed += "</ul>\n"; $("#topics").append(Feed); } }); }); function parseISO8601(str) { var date = str.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/); return date = date[1] + "年"+ date[2] + "月" + date[3] + "日"; } </script> </head> <body> <h1>Facebookページ フィード 表示</h1> <div id="topics"></div> </body> </html>
今回のサンプルのように記事データと画像データを表示させる場合は「Access Token」が必要になります。上でも書いたように「Access Token」は有効期限が最大2ヶ月で、有効期限が過ぎるとフィード情報が表示されなくなってしまうので、最低でも2ヶ月に1度はサイトのメンテナンスが必要です。
それが無理な場合は「App Token」を使ってテキストデータのみを表示させるか、素直にFacebookが用意している「Page Plugin」を使いましょう。
参考サイト