Friday, 14 September 2012

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ページの投稿が表示される。
リストの上5つと下5つは別Facebookページの投稿。画像のみの投稿もちゃんと表示できた。

5 comments:

  1. 突然の質問申し訳ございません。
    画像のみ投稿した際、日付だけの表示ではなく画像も表示する方法はございますか?宜しくお願いいたします。

    ReplyDelete
    Replies
    1. コメントありがとうございます。質問の件ですが、画像のみの投稿も、デフォルトのスクリプトで日付と画像が表示されると思います。上記「表示結果」に画像のみ投稿した場合の結果を提示しましたのでご覧ください。

      Delete
    2. ご返信有難うございます。とても早くて驚いていますw

      現在の使用しているソースを記載させていただきます。

      "' + item.link + '" target="_blank">' + item.title + '

      FBにて文章も長く書くため省略した形での表示をしなくてはならず、また画像のみの投稿もございます。
      このソースですと画像のみ投稿した際、画像が表示されなく困っています。
      また、複数のFBページの投稿をHP上のニュースフィードなどに一つにまとめて表示したいのですが、このソースを応用して行うことは可能なのでしょうか?

      質問ばかりしてしまい申し訳ございません。

      Delete
    3. 【2013.6.17追記】と題した項目を2つ、エントリ本文最後に追記したのでご覧ください。

       “FBにて文章も長く書くため省略した形での表示をしなくてはならず、また画像のみの投稿もございます。”

      についてはif文で「item.title == 0」か否かで条件分岐してみたら上手くいきました。


      「複数のFBページの投稿を一つにまとめて表示」については、ワタクシも知識が及ばずでエレガントにまとめる方法が見つけられませんでしたので、別のFacebookページ用にもう1つ$.getJSON以下を追加するという手段を使いましたら一応対応できました

      こんな感じでいかがでしょう?

      Delete
    4. まだ実装できていませんが完璧です。

      色々と有難うございます!!
      非常に助かりました。

      Delete