ブログの記事一覧などで記事単体のfacebookのいいねボタンを
オリジナルデザインで表示したい。

今回はjQuery.ajaxを利用して、いいね数を取得・表示する方法を紹介します。

■ HTML

  <ul id="data">
      <li>
          <p>
               <a href="http://google.com">グーグル</a>
              <span class="likes">いいね数 : </span>
            </p>
      </li>
     <li>
          <p>
               <a href="http://yahoo.co.jp">ヤフー</a>
              <span class="likes">いいね数 : </span>
            </p>
      </li>
     <li>
          <p>
               <a href="http://www.goo.ne.jp/">グー</a>
                <span class="likes">いいね数 : </span>
            </p>
      </li>
     <li>
          <p>
               <a href="http://www.msn.com/ja-jp/">MSN</a>
               <span class="likes">いいね数 : </span>
            </p>
      </li>
 </ul>

■ jQuery

var getCountFacebook = function (target, like) {

  $.ajax({
        url     : 'https://graph.facebook.com/',
      dataType: 'jsonp',
        data    : {
         id: target
      },
      success : function (json) {

         $(like).text('いいね数 : ' + json.shares || 0)
            //いいね数がない場合は「0」を表示する。
       }
   })
};

$(function () {

 //URL取得といいね数を表示する場所を指定する

    var li = $('#data').find('li')

  li.each(function () {

       var href = $(this).find('a').attr('href'),
          like = $(this).find('.likes');

        getCountFacebook(href, like);
   })
});

サンプル

■Twitterの場合は

$.ajax部分を下記に書き換えてあげれば取得できます。

$.ajax({
  url      : 'http://urls.api.twitter.com/1/urls/count.json?url=' + target,
 dataType : 'jsonp',
   success  : function(json) {

     $(like).text('つぶやき数 : ' + json.count || 0 );

  }
});