WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

Facebookページのフィード情報を取得する（JSON形式）

Webサイト制作

以前は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ページの情報を取得

AppIDの取得

まずはhttps://developers.facebook.com/の「My Apps」から新しいアプリの登録をしてAppID等を取得します。
f:id:yachin29:20151015042235j:plain


トークンの取得

次にhttps://developers.facebook.com/tools/accesstoken/でトークンの取得を行います。
たんに投稿データを取得し、自身のサイトの表示させる場合はApp Tokenのみで大丈夫ですが、リンクや他の機能も使いたい場合はUser Tokenを使い「Access Token」を取得する必要があります。
「App Token」の場合、特に有効期限は有りませんが、「Access Token」の場合は最大でも有効期限が２ヶ月なので注意が必要です。


「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」が後ほど必要になります。

f:id:yachin29:20151021030715p:plain

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」は有効期限が最大２ヶ月で、有効期限が過ぎるとフィード情報が表示されなくなってしまうので、最低でも２ヶ月に１度はサイトのメンテナンスが必要です。
それが無理な場合は「App Token」を使ってテキストデータのみを表示させるか、素直にFacebookが用意している「Page Plugin」を使いましょう。






参考サイト

nxpg.net


www.otwo.jp


news.7zz.jp