閉じる
HTML
  • 2013.06.20 (Thu)

ソーシャルボタンをオリジナルアイコンに変更したい人に使える! jQueryで、いいね・ツイート・はてブのカウントを取得する方法

ソーシャルボタンをオリジナルアイコンに変更したい人に使える! jQueryで、いいね・ツイート・はてブのカウントを取得する方法

今や、ブログやLPにはソーシャルカウンターは必要不可欠ですし、そのサイトの仕様も様々です。
せっかくですからソーシャルアイコンもそのサイトの仕様に合わせいものですね。

仕事でソーシャルボタンのカウンターをオリジナルに変更する機会があったのでメモ的にエントリー。

jQueryを使い、いいね数・ツィート数・はてぶ数の取得をするわけですが、今回あくまで取得方法のみでボタンなどのデザインまでしていませんのでご容赦ください

用途別一覧

LPなど静的なページに利用

googleのURLを使い表示しています。以下サンプルです。※”Result”をクリックして確認してください

LPなど静的なページに利用 〜応用編 ボタンをクリックしてカウント表示〜

上記サンプルの応用で、ボタンをクリックしてカウンターを表示させます。CSS次第ではかっこよく出来ると思います。以下サンプル※”Result”をクリックして確認してください

WordPressで利用。各記事ごとに表示する方法

記事一覧やサイドバーの新着記事や人気記事などの各記事に対して取得し表示する方法です。以下はオーソドックスな記事一覧を想定した作りのサンプルです。

<script>
function get_sns_facebook(url, dest) {
  $.ajax({
      url      : 'https://graph.facebook.com/',
      dataType : 'jsonp',
      data     : { id:url },
      success  : function(json){ $('#' + dest + ' .count').text( json.shares || 0 ); }
  });
}
function get_sns_twitter(url, dest) {
  $.ajax({
      url      : 'http://urls.api.twitter.com/1/urls/count.json',
      dataType : 'jsonp',
      data     : { url:url },
      success  : function(json){ $('#' + dest + ' .count').text( json.count || 0 ); }
  });
}
function get_sns_hatebu(url, dest) {
  $.ajax({
      url      : 'http://api.b.st-hatena.com/entry.count?callback=?',
      dataType : 'jsonp',
      data     : { url:url },
      success  : function(json){ $('#' + dest + ' .count').text( json.count || 0 ); }
  });  
}

</script>

<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
	
	// ループ記事内容
	
<div id="sns_facebook_<?php echo $post->ID;?>"><span class="count"></span></div>
<div id="sns_twitter_<?php echo $post->ID;?>"><span class="count"></span></div>
<div id="sns_hatebu_<?php echo $post->ID;?>"><span class="count"></span></div>
<script type="text/javascript">
get_sns_facebook("<?php the_permalink(); ?>", "sns_facebook_<?php echo $post->ID;?>");
get_sns_twitter("<?php the_permalink(); ?>", "sns_twitter_<?php echo $post->ID;?>");
get_sns_hatebu("<?php the_permalink(); ?>", "sns_hatebu_<?php echo $post->ID;?>");
</script>

<?php endif; ?>