FacebookページのフィードURLを取得しウォールを自サイトに表示

投稿日 2012/09/14 更新日 2020/08/31

結局未採用だけど、折角調べて試してみたので記録しておく。
参照サイトは

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

FacebookページのフィードURL取得は（取得ツール付き）

FacebookページのフィードURLを取得してフィードリーダーで購読する方法: 小粋空間

以上、深謝。

自分のFacebookページのフィードURLを取得

上記参照サイトでは、自FacebookページのID確認方法について書かれているが、小粋空間さんのページに「自FacebookページのフィードURL取得ツール」があるので、自FacebookページのURLを入力すれば、フィードURLを表示してくれる。但しフォーマットはAtom1.0なので、RSS2.0フォーマットは以下のように変更する。

小粋空間さんの取得ツールで取得したフィードURL
https://www.facebook.com/feeds/page.php?format=atom10&id=[取得したID]

RSS2.0フォーマットに変更後
https://www.facebook.com/feeds/page.php?format=rss20&id=[取得したID]

jQueryを自サイトに貼込み

webOpixelさんからjQueryをを拝借し、自サイトに貼り込む。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var formatData = function(date) {
     var d = new Date(date);
     return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2)  + '.' + ("0"+d.getDate()).slice(-2));
};

$.getJSON(
     'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
     {
     q:'http://www.facebook.com/feeds/page.php?id=[取得したID]&format=rss20',
     v:'1.0',
     num:10
     },
     function (data) {
     console.log(data.responseData.feed);
     $.each(data.responseData.feed.entries, function(i, item){
    $('#facebook ul').append('<li><span>'+
    formatData(item.publishedDate)
    +'</span><br />' + item.content + '</li>');
     });
     }
);
});
</script>

月日が1桁の時にゼロを追加して2桁にしない場合、上記青部分を

return (d.getFullYear() + '.' + (d.getMonth() + 1) + '.' + d.getDate());

に差替え。赤部分、上は自FacebookページのフィードURL（RSS2.0フォーマットに変更したもの）に差替え、下の数字は表示させたい件数を指定。

フィードを表示させたい場所に例えば

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

などとして挿入。これと上記紫部分は、自サイトに合うように変更。

表示結果

画像を添付した投稿は書き込みとともに画像も表示される。

【2013.6.14追記】Facebookに画像のみ、またはテキストのみ投稿した場合

Facebookに画像のみ、またはテキストのみ投稿した場合も上記スクリプトで投稿日と画像が表示される。

テキストのみの投稿も画像のみの投稿も…

このように反映される。

表示のカスタマイズ

また緑部分を、「item.title」にすれば省略した形で表示。「item.link」にすれば記事へのリンクが貼れる。
そしてこれらを合わせのカスタマイズも可。

$('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>');

とすると、

「item.title」は投稿時に書き込んだ部分のみが表示され添付画像は表示されない。それにFacebookへのリンク「item.link」が貼られる。3行目が日付だけなのは、書き込みをせずに画像だけ貼ったフィード。

以上、こんな感じで自サイトに自Facebookのウォールを貼り込むことができる。

【2013.6.17追記】投稿のタイトルのみと画像のみ投稿のフィードを同時に表示

if文を使って条件分岐する。

<script type="text/javascript">
$(function() {
     var formatData = function(date) {
          var d = new Date(date);
          return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2)  + '.' + ("0"+d.getDate()).slice(-2));
     };

     $.getJSON(
          'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
          {
               q:'http://www.facebook.com/feeds/page.php?id=[取得したID]&format=rss20',
               v:'1.0',
               num:5
          },
          function (data) {
               console.log(data.responseData.feed);
               $.each(data.responseData.feed.entries, function(i, item){
                    if(item.title == 0){
                         $('#facebook ul').append('<li><span>'+formatData(item.publishedDate)+'</span><br />' + item.content + '</li>');
                    }else{
                         $('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>');
                    }
               });
          }
     );
});
</script>

これで、テキストの投稿はタイトルのみ表示され、画像のみの投稿も画像が表示される。（表示例画像は次の項目の最後を参照）

【2013.6.17追記】複数のFBページの投稿を同時に表示

本当はもっとエレガントにできると思うのだが、現状のワタクシの知識ではチョット無理なので、強引に以下のようにしてみた。

<script type="text/javascript">
$(function() {
     var formatData = function(date) {
          var d = new Date(date);
          return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2)  + '.' + ("0"+d.getDate()).slice(-2));
     };

     $.getJSON(
          'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
          {
               q:'http://www.facebook.com/feeds/page.php?id=[取得したID]&format=rss20',
               v:'1.0',
               num:5
          },
          function (data) {
               console.log(data.responseData.feed);
               $.each(data.responseData.feed.entries, function(i, item){
                    if(item.title == 0){
                         $('#facebook ul').append('<li><span>'+formatData(item.publishedDate)+'</span><br />' + item.content + '</li>');
                    }else{
                         $('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>');
                    }
               });
          }
     );
     $.getJSON(
          'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
          {
               q:'http://www.facebook.com/feeds/page.php?id=[別のFacebookのID]&format=rss20',
               v:'1.0',
               num:5
          },
          function (data) {
               console.log(data.responseData.feed);
               $.each(data.responseData.feed.entries, function(i, item){
                    if(item.title == 0){
                         $('#facebook ul').append('<li><span>'+formatData(item.publishedDate)+'</span><br />' + item.content + '</li>');
                    }else{
                         $('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>');
                    }
               });
          }
     );
});
</script>

要は別のFacebookページ用にもう1つ$.getJSON以下を追加した。これで一応複数のFacebookページの投稿が表示される。