UNIRRY

WEBデザインとホロスコープと宇宙のブログ

facebookページの最新更新情報を取得して表示する

piyoko

facebookページの最新の更新情報を取得して訴求したい、という要望があってやってみたやつのまとめになります。

facebookページの管理元が社内でわかれていて、勝手に更新されるからついでに訴求したい、みたいな時には、もしかしたら使う機会があるかもですね。

facebookページのIDがわかったらフィードを取得できるらしい・・・

oauth認証とかを使わないで取得できたほうがよいので、xmlとかで最新の更新を取得できないかと思って探したところ、Google AJAX Feeds API(http://ajax.googleapis.com/ajax/services/feed/load?callback=?)というものを使うとできるらしいことがわかりました。

このAPIを使うと、JSONで取得できるらしいです。ただ、取得するfacebookページのIDが必要だったので、まずはfacebookページのIDを調べる必要があります。

facebookページのIDを調べる

たとえば私の作ったfacebookページ(https://www.facebook.com/periooo/)だと、URLにIDの記載がなくてわかりません。作ったのが早い時期だとIDがURLに記載されてたりするみたいですが。

IDがみれるやつをどっかで見たなと思っていたら、oauth認証のアプリをつくったときにも使った『Graph API Explorer』(https://developers.facebook.com/tools/explorer/)で簡単にfacebookページの概要情報を得ることができました。

「GET」の横のフォームのなかに、IDを知りたいfacebookページのURL名をいれれば下にJSON形式で出力されます。
ためしに、ミスドのfacebookページ(https://www.facebook.com/misdo.jp)の情報を取得するべく、「misdo.jp」と入力します。

graphapi

右下に出力された「 “id”: “352838334767128″, 」の数字がIDです。ちゃんといろいろ設定してあるんだなーと思いながら次にすすみます。

Google AJAX Feeds APIで更新情報を取得する

jQueryの「.getJSON」を使えば簡単に取得できるらしいということでとりあえずやってみました。

.getJSONの使い方

http://semooh.jp/jquery/api/ajax/jQuery.getJSON/+url,+data,+callback+/

とりあえずやった出力するjs

$(function () {
  // facebookフィードの読み込み
  $.getJSON(
     'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
     {
          q: 'http://www.facebook.com/feeds/page.php?id=__取得したいfacebookID__&format=rss20',
          v: '1.0',
          num: 1
     },
     function (data) {
            // facebookフィードからエントリーデータを取得し出力
            $("#fbdata").append("<div>" + data.responseData.feed.entries[0] + "</div>");
     }
  );
});

出力するhtml

<html>
<body>
<div id="fbdata">
<div id="close">とじる</div>
</div>
</body>
</html>

これだと、[object Object]とか表示されます。2次元配列的ななにかのようで[0]番目など指定したのですがundefinedばかりで困って調べたら「.content」でコンテンツ部分が取得できるらしいとわかりました。

.contentで調整したjs部分

$("#fbdata").append("<div>" + data.responseData.feed.entries[0].content + "</div>");

ただこれで記事の情報は全部でるんですが、これだとエントリーを出力したときに中身が全部出力されてコンテンツの表示をいじれないので、あんまり使えません。なので、場当たり的に「.title」でやってみたら、タイトルっぽいものが表示されたので、結局下記のように実装しました。

また、こちらのサイトさんを参考にして画像も一番目のやつのみ出力するように設定し直しました。「_n」で大きい画像がとれるみたいなので変換も追加しました。
アクセストークン不要!facebookのフィードを自分のサイトに表示する方法
http://color-full-web.com/news/blog/facebook-feed/

最終的に表示を調整できるようにしたjs

$(function () {

  // facebookフィードの読み込み(ここではミスタードーナツを取得)
  $.getJSON(
     'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
     {
          q: 'http://www.facebook.com/feeds/page.php?id=352838334767128&format=rss20',
          v: '1.0',
          num: 1
     },
     function (data) {
            // facebookフィードから画像データを取得しサイズ変更
            var pattern = /<img(.+?)>/;
            var feeditem = data.responseData.feed.entries[0];
            var imgtag = feeditem.content.match(pattern);
            imgtag[0] = imgtag[0].replace("_s.", "_n.");
            
            // facebookフィードの出力
            $('#fbdata div#fbtxt').append('<p>' + feeditem.title + '</p><a href="https://www.facebook.com/misdo.jp" target="_blank">' + imgtag[0] + '</a>');
            
            // closeボタンで閉じる
            $("#close").click(function(e){
                 $("#fbdata").hide();
            });        
     }
  );

  // ミスドの表示
  $("#fbdata").animate({ opacity: "1"});

});

エントリーの中身を定かにしたい

var item = data.responseData.feed.entries[0];
for ( var key in item) {
    document.write( key + ":" + item[key] + "<br><br>");
}

2次元配列のうえに中身は連想配列っぽいやつを、あとで出力して、使えるのは、以下の7個だってことがわかりました。あんまり中身はないんですね。

title:本文を短め文字数で制限したもの
link:1記事だけのリンク先
author:編集者(文字化けしてます)
publishedDate:投稿日
contentSnippet:本文をちょっと長めで文字数制限したもの
content:本文+投稿画像ぜんぶ
categories:カテゴリー

サンプルはコチラ→ http://unirry.com/sample/misdo_fbfeed.html


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3