ZIZO DESIGN ノート

お問い合わせ

Facebookの記事をJSONで簡単に取得

main_img

graphAPIを使って簡単にJSON形式のファイルの読み込みをする方法を紹介したいと思います。

以前までFacebookページの投稿内容はfeedから取得できていましたが、
仕様変更に伴い、graphAPIからJSON形式でのみ取得できるようになりました。
今までより最初の準備が必要ですが、簡単な手順で取得することが可能です。

まずはじめに、アクセストークンの取得を行います。
https://developers.facebook.com/

Facebook for developersにアクセスし、My AppsのAdd a New Appをクリック。
f01

ウェブサイトを選択します。
f02

全項目の入力後アプリIDの作成を行います。
f03

App IDを控えておきます。
f04

以上でFacebookアプリの作成が完了しました。

次にAccess Token Toolにアクセスし、App Tokenを控えておきます。
https://developers.facebook.com/tools/accesstoken/
f05

そして、以下のURLに先ほど控えておいたApp IDとApp Tokenを入力します。
https://graph.facebook.com/v2.5/[APP_ID]/feed?access_token=[APP_TOKEN]

上記にアクセスするとJSONデータが表示されます。

あとは、jQueryを使用してJSONデータをhtmlに読み込むだけで完了です。

<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/<strong>[FacebookページID]</strong>/feed?access_token=<strong>[APP_TOKEN]</strong>",
 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;
 Feed += '<li><span>' + time + '</span>' +'<br>' +text+ '</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>

以上です。