Facebookページのフィードやアルバムをjavascript(jquery)で取得する

LikeBoxの仕様

Facebookページを埋め込んでいるサイトも増えてきました。
LIkeBoxってやつですね。

facebook LIKEBOX生成ページ

これでも十分なのですが、もっとオリジナルで実装したい！ってときがあります。

• ・サイトのお知らせをFacebookのフィードを利用して表示したい
• ・TOPページにFacebookでアップした写真をランダムで表示したい

など、facebookページを“お知らせ”として使っているケースも多いかと思います。
これをwebサイトと連携できると便利ですよね。

Facebookの対応ブラウザは

Facebookはブラウザ対応がIE8以上なので、いいねボタン、likebox等はIE7以下だと崩れます。IE7以下も対応しているサイトだと、埋め込みしたくないなんて場合もあるかもです。

JSONを取得してみる

サンプルはスターバックス コーヒー ジャパンのfacebookページをサンプルとしてみました。

スターバックス コーヒー ジャパン Starbucks
https://www.facebook.com/StarbucksJapan

facebookページからデータ取得するための基本的なJSONは以下になります。
「www」の部分を「graph」に置き換えるだけでいけます。
なお、ページURLでも、ページIDでも大丈夫です。
取得すると以下のようなJSONが返ってきます。
試しにブラウザでアクセスしてみるとわかるかと思います。

facebookページの基本情報のJSON
https://graph.facebook.com/StarbucksJapan/

これがベースのJSON(基本情報)になります。
ページIDやら、ページのいいね数などが取得できるのがわかるかと思います。

このFacebookページに紐付くデータは上記URLの下層としてアクセスします。
例えばアルバムを取得してみます。

facebookページに属するアルバム情報

https://graph.facebook.com/ページID/アルバムID/

例)スターバックスコーヒージャパンのアルバムを取得

https://graph.facebook.com/StarbucksJapan/albums/

facebookページのアルバムのなかに含まれる写真

https://graph.facebook.com/アルバムID/photos

例) スターバックスの「タイムラインの写真」を取得

https://graph.facebook.com/124846870926206/photos/

上記はすべてjsonなので、javascript(jquery)を用いて、$.ajax等で取得して操作しましょう。

$.ajax({
     url : 'https://graph.facebook.com/StarbucksJapan/albums/'
}).done(function(data){
     //ここに処理を記述
});

fcebookページのフィード(タイムライン)を取得

facebookのフィード(タイムライン)は上記と同様に行っても取得できません。
php等サーバサイドで取得することになりますが、以下のAPIを利用することで、jsのみでも取得できます。

facebookのフィードは以下を利用して取得します。

【Google AJAX Feeds API】
https://ajax.googleapis.com/ajax/services/feed/load?callback=?

ブログのRSSなんかを取得するときに使うAPIですね。
使い方は以下のような感じになります。

$.getJSON(
     'https://ajax.googleapis.com/ajax/services/feed/load?callback=?',
     {
          //取得時のパラメータ
          q: 'https://www.facebook.com/feeds/page.php?format=rss20&id=124846870926206',
          v: '1.0',
          num: 30
     },
     function (data) {
          /***
          * dataという変数で上記のJSONが取得できます
          * この中に処理を書いていきます
          * フィードの中身は'data.responseData.feed'に格納されてます
          ***/
     }
);

dataで取得される変数はコンソール画面等で実際に吐き出して見ていただければわかるのですが、
結構いろいろなデータを含んだJSONが戻ってきますが、フィードの具体的なデータはdata.responseData.feedというオブジェクトに格納されています。

こんな感じでJSONを上手く扱って、自分のサイトに反映させてみましょう。