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

自社サイトに加えて、Facebookページも運用している方が増えています。サイトにFacebookページの情報をカスタマイズして埋め込む方法を紹介します。

【スポンサーリンク】

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を上手く扱って、自分のサイトに反映させてみましょう。

この記事についたタグ
この記事を書いた人
ねづ
『NEZU.log』運営管理者。Webエンジニアの傍ら、趣味でこのブログを運営。シェアハウス在住。2015年は海外情報(主にアジア圏)と効率のよい生活の情報発信がテーマ。
この記事が面白かったらいいねしよう!
記事のタイトルとURLをコピーするコピーしました!
こちらの記事もどうぞ
こちらの記事もどうぞ
このブログへのコメント

コメントを残す

コメント※必須
名前※必須
メールアドレス※必須(非公開)

Facebookページのフィードやアルバムをjavascript(jquery)で取得する
このブログを書いている人

運営者 : ねづ

主にWebの企画、開発の仕事をしています。
海外が好きで、仕事、旅行問わずよく行きます。
フィリピン(セブ)で10週間留学後、現在はカナダ(バンクーバー)に滞在。留学、海外生活や旅行記をこのブログで書いています。

詳しいプロフィールはこちら

LINE@作成しました!お気軽にどうぞ!
友達登録は下記QRコードを読み取ってください
LINE@ QRコード

カテゴリ一覧
キーワードで記事を探す
下記から更新情報を受け取れます!