jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン）

Posted: 2012.08.21 / Category: javascript / Tag: jQuery

FacebookページのウォールはFeedを出力しています。
これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。

FacebookページのID確認方法

FacebookページのURLを設定していない場合、URLの末尾がIDになります。
もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。たとえば「Nike Japan」だったら、Facebookページは下記ですね。

http://www.facebook.com/nikejapan

そのままドメイン名を「graph.facebook.com」にしてアクセスします。

http://graph.facebook.com/nikejapan

するとjson形式でFacebookページの基本情報が表示されます。
idと書いてあるところが、そのページのIDになります。

jQueryの部分

あとはhtmlを適当に作って。

html

	<div id="facebook"><ul></ul></div>

Facebookからは直接feed情報を取得できない仕組みになっているらしいです。
そこで Google AJAX Feed を利用して、間接的にfeed情報を取得してみます。

ブログのコードだと正規表現の部分がエンコードされてしまうので、下記アドレスからコピーしてください。

https://gist.github.com/3856549

JavaScript

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
$(function() {
var formatData = function(date) {
     var d = new Date(date);
     //ゼロパディング（2桁）にしない場合
     //return (d.getFullYear() + '.' + (d.getMonth() + 1) + '.' + d.getDate());
     return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2)  + '.' + ("0"+d.getDate()).slice(-2));
};
var replaceURL = function(url){
    url = url.replace(/(/l.php?u=http%3A%2F%2F)([x21-x7e]+)(&amp;h=[x21-x7e]+&amp;s=1)/gi,'http://$2');
    return unescape(url);
};
$.getJSON(
     'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
     {
          //xxxxxxxを表示したいFacebookページのidに置き換えてください。
          q: 'http://www.facebook.com/feeds/page.php?id=276907439024459&format=rss20',
          v: '1.0',
          num: 10
     },
     function (data) {
          $.each(data.responseData.feed.entries, function(i, item){
              $('#facebook ul').append('<li><span>'+
               formatData(item.publishedDate)
              +'</span><br />' + replaceURL(item.content) + '</li>');
          });
     }
);
});
	</script>

contentを表示すると長くなってしまうので「item.title」とすれば省略した形で表示できたり「item.link」で記事へのリンクになりますので、目的にあったカスタマイズをしてみてください。
もっとつっこんだことがやりたいという場合にはアプリケーション登録をして Open Graph を利用してみるといいかもしれません。

2012.10.09 外部リンクが飛ばない部分を修正しました。

COMMENTS

通りすがり　2012-09-06 12:08　

こんにちわ。

wordpressのフィード配信って、

・記事が投稿されたとき
・コメントが投稿されたとき

などですよね？

そこで、

・最新記事のRSSを1時間、3時間ごとに配信
・人気の記事のRSSを1時間、3時間ごとに配信

みたいなことしたいと考えているのですができないでしょうか？つまり、よくアンテナサイトと言われるサイトが配信しているフィードのような形式です。

現在、ユーザーが投稿できるサイトを運営していますが、現在のフィード配信の方法だと、ユーザーが投稿するたびにフィードが配信されてしまうため、他サイトのヘッドライン（RSSを表示するスペース）を埋め尽くしてしまうことになります。

お時間ありましたら、よろしくお願いします。

webOpixel　2012-09-10 13:53　

詳しくはわかりませんがcronなどを使用すれば一定時間ごとに処理をできたと思います。
WordPressと切り離して考えた方がいいかもしれません。

あと記事に関係のない質問はお問い合せよりお願いします。

Bilidian　2012-10-07 00:04　

ページに使用する際、参考にさせていただきました。

ただ、Facebook内で書かれたURLで自動的にリンクをされた場合、それを呼び込んでも正しいリンク先にリンクされません。

このような場合どうしたらよろしいでしょうか。

初歩的な知識も足らず申し訳ありません。

webOpixel　2012-10-09 13:38　

ご指摘ありがとうございます。
外部リンクの部分は自動的にFacebookのl.phpを通るように置き換えてあるようでした。
ざっくりですが正規表現で置き換えてみましたので試してみてください。

https://gist.github.com/3856549

サンボ　2012-11-28 19:30　

はじめまして。フェースブックのRSSの取得について調べてて
他のブログで記事が紹介されてたどり着きました。

とても有用で参考になったのですが、記事のタイトルについて質問なのですが
タイトルの長さを何文字までという風に指定することはできないものなのでしょうか。
現在も長い場合は…の3点リーダで表示されるのですが、もう少し短くしたいと思っています。

大変お手数ですが、教えていただけるとありがたいです。

webOpixel　2012-11-29 13:45　

こちらのページを参考にするとできるかもしれません。
http://black-flag.net/jquery/20121010-4227.html

トリコ　2013-04-04 08:10　

こんにちは、質問ですが、こちらの記事に書かれている内容を指示どおり設定してサイトに導入出来たのですが、facebookページで記事を投稿して反映されるのにあまりにも時間がかかっているような気がします。
またテストであげた記事をfacebookページ上で消しているのですが、そちらはHPの反映されたままです。
facebookのフィードを読む時間を設定出来るのでしょうか？
もしくはキャッシュのせいでしょうか？そうだった場合毎回ページを読むたびにキャッシュがきられるコマンドはあるのでしょうか？
教えていただけるとありがたいです。

webOpixel　2013-04-05 21:48　

キャッシュやタイムラグがあるのはGoogle AJAX Feedを通しているかもしれません。
精度の高いものが必要ならFacebookのアプリケーション登録をして直接APIを使用した方が良いと思います。

うめだ　2013-09-26 13:24　

お世話になります。これいいですね。ありがとうございます。

それで、このスクリプトを表示させると、写真が小さいのですが、写真が荒れずに指定サイズに大きく表示することは出来ないでしょうか。
cssでサイズを大きくすると荒れるので。

このあたりのことだと思いますが、どうすればいいのかさっぱりわかりません。
https://developers.facebook.com/docs/reference/api/using-pictures/

教えていただくことは可能でしょうか。よろしくお願いします。

webOpixel　2013-09-30 09:09　

細かいとこまで調節する場合、Facebookのアプリケーション登録が必要ですね。

ew　2013-10-24 17:42　

こんにちわ、使用させて頂きとても助かりました。
ありがとうございました。
上記の方も質問されていたのですが、表示されるテキストの文字数を指定したいのですが、上記リンクを参考にしてみたのですがうまくいきませんでした。
上記のJavaScriptコードに書き足すとしたら、どのように追記すればよいのでしょうか？
JSに関しては知識が浅く初歩的な質問かもしれず申し訳ないのですが、お時間のある際にご教授頂ければと思います。
宜しくお願いします。

webOpixel　2013-10-31 11:11　

1行だけでしたらCSSでやると簡単ですけど、、、

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width:20em;

kawagoe　2014-06-22 17:03　

※コメントにhtmlタグを記載したところ、文章が乱れてしまいました。失礼いたしました。再度投稿させていただきます。

はじめまして。こちらの記事大変参考になりました。
replaceURL(item.content) で表示される内容に含まれるaタグすべてにtarget=”_blank”をつけて表示できないものかと思い、色々試しているのですが、jsの知識が浅くなかなかうまくいきません…
初歩的な質問なのですが、何かいい方法があればご教示いただけるとありがたいです。よろしくお願いいたします。

webOpixel　2014-06-24 11:02　

とりあえず「url.replace」の次の行に

url = url.replace(/<a/gi,'<a target="_blank" ');

と入れてみてはどうでしょう。

kawagoe　2014-06-26 00:04　

解決しました！ありがとうございます！！

kameG　2014-08-24 11:35　

はじめまして、こんにちは。
ありがたく使用させていただいております。

サイトに表示させている投稿内容にあるURLが下のようになってしまいます。

表示URL　http//www.xxxxx.com
リンクURL　l.facebook.comhttp//www.xxxxx.com

replaceURLのl.phpのあたりをどうにかすればいいのかと素人ながらあれこれ試してみましたが解決できませんでした。

こちらのサンプルコードのFacebookページIDだけ変更しています。
https://gist.github.com/k-ishiwata/3856549

どのようにしたらリンクが正常になりますか？
お力を貸してください、お願いいたします。

kamiyama　2014-09-02 01:07　

こんばんわ！　
私も最近気が付いたのですが、kameGさんと同じ現象が発生しており、
いままで参照できていたリンク先が参照できなくなってしまいました・・。
リファラー？が表示URLのあたまについているようです。
facebook側でなにかしらの変更が発生したんでしょうかね。
jsで対応可能であればご教授いただけたら嬉です。
よろしくお願いします。