2011年9月18日 19:18

jQueryでFacebook Graph APIをコールして、自前でいいね！数を表示する

スポンサードリンク

Facebookのいいね！ボタンは、iframeで挿入するタイプなんですけれども、いいね！がされていないときは数が表示されるところが空白になって見栄えが悪くなるので、Facebook Graph APIをjQueryを使ってコールして、自前で描画すればいいのではないかと思いました。

今回のミッションは、

Facebook Graph APIの使い方を調べる
APIの戻り値を調べjQueryで処理する方法を考える
HTMLでデザインする

となりますが2.だけ解説すると、

https://graph.facebook.com/http://www.yahoo.co.jp/

にアクセスすると、

{
   "id": "http://www.yahoo.co.jp/",
   "shares": 6692,
   "comments": 9
}

が得られますが、これはJSON形式のデータであり、クロスドメインでは使えないので、Graph APIを見ると、callback=hoge をつけることでJSONPの出力が得られることがわかります。

https://graph.facebook.com/http://www.yahoo.co.jp/&callback=hoge

/**/ hoge({
   "id": "http://www.yahoo.co.jp/",
   "shares": 6692,
   "comments": 9
});

この形であれば、jQueryの$.AJAXでデータタイプJSONPを指定したときに合いますので取得できるというわけです。

File: facebookgraphapi-sample.html

<html>
  <head>
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
      var url = 'http://www.yahoo.co.jp/';
      $.ajax({
          url      : 'https://graph.facebook.com/' + url,
          dataType : 'jsonp',
          success  : function(json){ $('.button_count_count').text( json.shares || 0 ); }
      });
    });
    </script>
    <style>
    .button_count {
      font-size: 11px;
      color: #333333;
      font-family: "lucida grande",tahoma,verdana,arial,'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
    }
    .button_count_count {
      background: none repeat scroll 0 0 #EFEFEF;
      border: 1px solid #C1C1C1;
      height: 14px;
      line-height: 14px;
      margin-left: 1px;
      min-width: 15px;
      padding: 1px 2px;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <span class="button_count"
      ><span class="button_count_count"
        ></span
      ></span
    >
  </body>
</html>

Operaのソース編集機能を使ってコピーペーストして実行した結果はこちら。

Jqueryiine
▲Yahoo Japan! のいいね数を表示