Facebookページの投稿を取得する

FacebookのGraph APIを使って、Facebookページの投稿を取得してみます。
今回使用しているGraph APIのバージョンは2.8です。

アプリIDの作成

Facebook Developersのアカウントにログイン後、Facebook Developerの右上のアプリの作成をクリックします。
Facebook Developersへの登録がまだの方は、こちらの記事から登録を行ってください。

モーダルが表示されるので、各項目を入力してアプリID作成ボタンをクリックします。

セキュリティチェックが表示されるので入力します。

これでアプリIDが作成できました。
　

アクセストークンの取得とGraph API Explorerでの実行テスト

アプリID作成後、上部にあるツール＆サポートをクリックします。

Access Token Toolをクリックします。

App Tokenの項目をコピーしておきます。

先ほどのツール＆サポートの画面に戻り、Graph API Explorerをクリックします。

Graph API Explorerでは、APIの実行テストを行うことができます。
今回はこちら(https://www.facebook.com/frst.joqr/)のFacebookページの投稿内容を取得してみます。
アクセストークンに先ほどコピーしたApp Tokenを貼り付け、その下のGET /v2.8/ 以降に以下の形で入力します。

【appID】/feed

appIDの部分に取得したいFacebookページのappIDを入力します。
今回の場合、以下のように入力します。

frst.joqr/feed

これで右側の送信をクリックします。

取得内容が表示されました。
取得する項目をカスタマイズしたい場合、左のフィールドを検索から行うことができます。

+アイコンをクリックすると項目を選択できるので、取得したい項目を選びます。

今回は例として、id,created_time,message,link,pictureを選択してみます。
選択後、右側の送信を再度クリックします。

選択した項目が反映した状態で取得し直すことができました。

サイトへの表示

先ほどテスト表示してみたjsonを実際に取得して、ページ上に表示させてみます。
jsonは以下のURLで取得することができます。

https://graph.facebook.com/v2.8/【appID】/feed?access_token=【アクセストークン】

取得する項目をカスタマイズしたい場合、パラメータに値を指定してください。
今回はid,created_time,message,from,pictureを指定してみます。

https://graph.facebook.com/v2.8/【appID】/feed?fields=id,created_time,message,from,picture&access_token=【アクセストークン】

取得する際の注意点として、JavaScriptでjsonを直接取得しようとすると、コード上のURLからアクセストークンが見えてしまいます。
アクセストークンが他者に見えてしまうとセキュリティ的によくないので、今回はjsonデータをPHPで取得して、その後にJavaScriptで表示させてみます。

まずはPHPでjsonを取得して、整形して表示させてみます。

get.php

<?php
$accessToken = 'アクセストークンをここに入れる'; // アクセストークン(App Token)
$appId = 'app IDをここに入れる'; // app ID

$url = 'https://graph.facebook.com/v2.8/' . $appId . '/feed?fields=id,created_time,message,from,picture&access_token=' . $accessToken;
$jsonData = file_get_contents($url);

// jsonデータの整形・出力
// paging内にアクセストークンが含まれてしまうので除外する
$json = json_decode($jsonData, true);
echo json_encode($json['data']);

コメントにも記載していますが、取得したjsonをそのまま出力してしまうとpagingの項目にアクセストークンが含まれてしまうので、dataの項目内のみ出力するようにしています。
Facebookページのjson取得のデモページ

次にPHPで取得・整形した内容をJavaScriptで表示させてみます。

HTML

<div id="output"></div>

JavaScript

$(function() {
	var facebookId = '127688557305660';
	$.ajax({
		url: 'get.php',
		dataType: 'json',
		success: function(data) {
			console.log(data);
			var insert = '<ul>';
			for (var i = 0; i < data.length; i++) {
				if(data[i]['from']['id'] === facebookId) {
					insert += '<li>';
					insert += '<div>id:' + data[i]['id'] + '</div>';
					insert += '<div>created_time:' + data[i]['created_time'] + '</div>';
					if(data[i]['message'] !== undefined) {
						insert += '<div>message:' + data[i]['message'] + '</div>';
					}
					if(data[i]['picture'] !== undefined) {
						insert += '<div>picture:' + '<img src="' + data[i]['picture'] + '"></div>';
					}
					insert += '</li>';
				}
			};
			insert += '</ul>';
			$('#output').append(insert);
		}
	});
});

表示時にFacebook IDで絞り込みを行っています。
Facebookページの投稿を取得するデモページ

今回はjsonの取得をPHP、表示部分をJavaScriptで行いましたが、表示部分もPHPで行ってしまったのでも問題ありません。
　

【参考サイト】

• graphAPIを使ってfacebookの投稿を読み込む方法 | 株式会社オーツー｜スタッフブログ
• Facebook Graph API v2.6で、FacebookページのFeedを取得する方法 | briccolog｜渋谷区神宮前（原宿）のウェブ制作会社ブリコルール
• Facebookページの投稿をGraph APIでサイト内に埋め込む方法 | ぐるんぱ
• アクセストークン – Facebookログイン