［み］jQueryを使って、Facebookページのウォールを表示する方法

Facebookの仕様がころころ変わって、長い間開いていないと、いつの間にかレイアウトやらなんやらが変わっていていつも戸惑っているみはら（@masashi_385）です。みはらがつくったFacebookページでは、基本的にFacebookのウォールに投稿することはないんですが、自分のサイトにTwitterのタイムラインのようなカンジで、Facebookページのウォールを表示させたいっていう方はけっこういるんじゃないでしょうか？あるいは、Facebookのプラグインは、いいねボタンとLikeBoxしかなくてつまらないなんて方もいらっしゃると思います。

需要としてはそんなに多くないんでしょうけれども、自分用のメモも兼ねて、Facebookページのウォールをサイトに表示する方法を紹介します。

まずは、FacebookページのIDを調べる

ウォールのFeedを取得するのに、FacebookページのIDが必要になりますので、まず、そのFacebookページのIDを確認します。

まず、みはら.comのFacebookページのように、ユニークURLを指定していないページでは、末尾の数字がIDになります。みはら.comのFacebookページのURLは、https://www.facebook.com/pages/みはらcom/313319718705646 なので、IDは 313319718705646 となります。

そして、ユニークURLを指定しているページでは、URLを見ただけではIDがわかりません。そんなときには、www.facebook.com を graph.facebook.com に変えてブラウザで見てください。例えば、山形美人塾のFacebookページであれば、URLが www.facebook.com/yamabijyo なので、graph.facebook.com/yamabijyo と変更してブラウザで開くと、こんなコードがでてきます。
[cc] {
“name”: “\u300c\u5c71\u5f62\u7f8e\u4eba\u587e \u2010yamabijyo\u2010\u300d”,
“is_published”: true,
“website”: “http://yamabijyo.com/”,
“username”: “yamabijyo”,
“description”: “\u5c71\u5f62\u7f8e\・・・【中略】・・・\u2192bijin\u0040gly-project.info”,
“about”: “\u5c71\u5f62\u7f8e\・・・【中略】・・・\u3067\u3059\uff01”,
“talking_about_count”: 2,
“category”: “Community”,
“id”: “243120025725452”,
“link”: “https://www.facebook.com/yamabijyo”,
“likes”: 210,
“cover”: {
“cover_id”: 414782435225876,
“source”: “http://a6.sphotos.ak.fbcdn.net/hphotos-ak-prn1/539244_414782435225876_1161059495_n.jpg”,
“offset_y”: 23
}
}
[/cc] IDがでてますね。
[cc] “id”: “243120025725452”
[/cc] これで、FacebookページのIDが取得できました。で、次のURLの【FacebookページID】のところに入れてやります。
[cc lang=”html”] http://www.facebook.com/feeds/page.php?id=【FacebookページID】&format=rss20
[/cc]

jQueryを利用する

どうやら、FacebookページのFeedからは直接情報を取り出せないようですので、Google Ajax Feed を使用して情報を取り出します。で、肝心のコードはこんなカンジです。
[cc lang=”JavaScript”]

[/cc] num: のところを変えることで取得件数も変更できます。もちろん、整形は自由にやってください。

あとは、表示したいところに
[cc lang=”html”]

[/cc] と書けばOKです。では、早速みなさんもコピペでやってみてください：）

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