Facebookページのフィードを画像付きで取得する方法【API ver.5】

仕事で時々「Facebookページの投稿内容を表示させたい」という要望をもらうことがあるので、表示方法をメモしておきます。

#準備しておくこと

• Facebookのデベロッパー登録（Facebookアプリを作成するのに必要）
• フィード取得したいFacebookページの権限（受託等で企業サイトのfbページフィードを作る場合は『アナリスト」』の権限でいいのでもらってください）

#取得するFacebookページ用のアプリを作成する

facebook for deveroper サイトでアプリを作成します。
https://developers.facebook.com/

サイト右上の「マイアプリ」の「アプリの作成」から作成していきます。

#GraphAPI（グラフAPI）アクセストークンを取得する

フィードを取得するのに必要なアクセストークンを取得します。
普通に作成すると有効期限付きアクセストークンになってしまうので、無期限のアクセストークンを作成する必要があります。

アプリの作成から、無期限のアクセストークン取得は以下のサイトがとてもわかりやすいので割愛します。
https://illbenet.jp/view/96

#jQueryでフィードを取得、表示

index.html

<ul id="feed"></ul>

function.js

jQuery(function($){
	//fbフィード
	$.ajax({
		type: 'GET',
		url: 'https://graph.facebook.com/v5.0/＜ページID＞/feed?fields=id,message,full_picture,created_time&access_token=＜アクセストークン＞',
		dataType: 'json',
		success: function(json) {
			// 成功処理
			var display_cnt = 3; //表示件数
			var container = '';
			var id;
			var url;
			var time;
			for (var i=0; i<=(display_cnt-1); i++) {
				var obj = json.data[i];
				console.log(JSON.stringify(obj));
				//リンク先を取得
				id = obj.id;
				url = 'https://www.facebook.com/'+id.replace(/_/g,"/posts/");
				var pic = obj.full_picture;
				//時間を作成
				time = obj.created_time;
				time = time.substring(0,10);
				time = time.replace(/-/g,".");

				container += '<li><a target="_blank" href="'+url+'"><figure><img src="'+pic+'" /></figure><span class="date">'+time+'</span><span class="title">'+obj.message+'</span></a></li>';
			}
			$('#feed').append(container);
		},
		error: function() {
			// 失敗処理
		}
	});
});

画像付きでフィードを表示する場合、fields=id,message,full_picture,created_time という感じで full_pictureを含める必要があります。