[み]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 と変更してブラウザで開くと、こんなコードがでてきます。

{
   "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
   }
}

IDがでてますね。

   "id": "243120025725452"

これで、FacebookページのIDが取得できました。で、次のURLの【FacebookページID】のところに入れてやります。

http://www.facebook.com/feeds/page.php?id=【FacebookページID】&format=rss20

jQueryを利用する

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

<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);
     return (d.getFullYear() + '.' + (d.getMonth() + 1) + '.' + d.getDate());
};
$.getJSON(
     'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
     {
        q: 'http://www.facebook.com/feeds/page.php?id=313319718705646&format=rss20',
        v: '1.0',
        num: 5
     },
     function (data) {
        console.log(data.responseData.feed);
        $.each(data.responseData.feed.entries, function(i, item){
          $('#facebook').append('<p><span>'+
           formatData(item.publishedDate)
          +'</span><br />' + item.content + '</p>');
        });
     }
);
});
</script>

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

あとは、表示したいところに

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

と書けばOKです。では、早速みなさんもコピペでやってみてください:)

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

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup