M.C.P.C.

―むり・くり―プラスコミュニケーション(更新終了)


| トップページ |

2011年9月18日 19:18

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

このエントリーをはてなブックマークに追加 mixiチェック

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

今回のミッションは、

  1. Facebook Graph APIの使い方を調べる
  2. APIの戻り値を調べjQueryで処理する方法を考える
  3. 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! のいいね数を表示

用途としては、ほかのソーシャルボタンとデザインを合わせたいときなどでしょうか。あとは、自由にデザインできますよね。

もっとまともにやっているのはこちら。

Facebookの「いいね!」ボタンをオリジナルデザインに変更する | indigonote [indigonote.com]

投稿 大野 義貴 [Web] | |

トラックバック(0)

トラックバックURL: http://blog.dtpwiki.jp/MTOS/mt-tb.cgi/3713

コメントする