[WP]jQueryでツイート数、いいね数などを取得して、WordPressの記事別に設置する方法

WordPress

2013.04.05

jQuery で Twitter のツイート数や、Facbeook のいいね数を表示する方法が人力検索はてなに掲載されていたので、これに「はてブ」も加えて、WordPressの記事毎にjQueryでSNSのカウント数（いいね数やツイート数など）を表示する方法をまとめてみました。

2013年6月11日に実施される Twitter API の仕様変更までの間は、ツイート数は表示されると思います。変更後は様子を見てから考えます。

Javascript のコード追加

jquery ファイルと一緒に、以下のコードを <head> 内に追加します。

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
function get_tweet_count(url, postid) {
  $.ajax({
      url      : 'https://graph.facebook.com/' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + postid + ' .facebook .count').text( json.shares || 0 ); }
  });
  $.ajax({
      url      : 'http://urls.api.twitter.com/1/urls/count.json?url=' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + postid + ' .twitter .count').text( json.count || 0 ); }
  });
  $.ajax({
      url      : 'http://api.b.st-hatena.com/entry.count?url='+ url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + postid + ' .hatena .count').text( json || 0 ); }
  });
}
</script>

function get_tweet_count(url, postid) {

$.ajax({

url : 'https://graph.facebook.com/' + url,

dataType : 'jsonp',

success : function(json){ $('#' + postid + ' .facebook .count').text( json.shares || 0 ); }

});

$.ajax({

url : 'http://urls.api.twitter.com/1/urls/count.json?url=' + url,

dataType : 'jsonp',

success : function(json){ $('#' + postid + ' .twitter .count').text( json.count || 0 ); }

});

$.ajax({

url : 'http://api.b.st-hatena.com/entry.count?url='+ url,

dataType : 'jsonp',

success : function(json){ $('#' + postid + ' .hatena .count').text( json || 0 ); }

});

}

</script>

WordPress のループの中の処理

テンプレートファイルの index.php や archive.php 内に以下のコードを挿入します。

カウント数を表示させる場所はデザインによると思いますが、以下のサンプルでは10 〜20 行目がカウント数表示のコードになります。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<?php
/*
ここらへんに記事のタイトルとか本文とかがくる
*/
?>

<div id="sns-<?php the_ID(); ?>">
<div class="facebook">いいね: <span class="count"></span></div>
<div class="twitter">ツィート: <span class="count"></span></div>
<div class="hatena">はてぶ: <span class="count"></span></div>
</div>

<script type="text/javascript">
$(function() {
    get_tweet_count('<?php the_permalink(); ?>', 'sns-<?php the_ID(); ?>');
});
</script>

<?php endwhile; ?>
<?php endif; ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php

ここらへんに記事のタイトルとか本文とかがくる

</div>

$(function() {

get_tweet_count('<?php the_permalink(); ?>', 'sns-<?php the_ID(); ?>');

});

</script>

<?php endwhile; ?>

<?php endif; ?>

SNSボタンのデザインは自由に

ブログやサイトに合わせてCSS でデザインを補正をします。

各SNSのアイコン画像を使う場合は、以下のように class="facebook" class="twitter" class="hatena" の後ろは空値にして、カウント数を表示できるスペースを確保します。

/*CSSの記述*/
<style>
div.sns 			{
	float:left;
	width:20px;
	height:20px;
	margin-left:20px;
	margin-right:20px
}

div.facebook		{
	background:url(./facebook.png);
}

div.twitter		{
	background:url(./twitter.png);
}

div.hatena			{
	background:url(./hatena.png);
}

span.count		{
	padding-left:30px
}
</style>

/*HTMLの記述*/
<div id="sns-<?php the_ID(); ?>">
<div class="sns facebook"><span class="count"></span></div>
<div class="sns twitter"><span class="count"></span></div>
<div class="sns hatena"><span class="count"></span></div>
</div>

<script type="text/javascript">
$(function() {
    get_tweet_count('<?php the_permalink(); ?>', 'sns-<?php the_ID(); ?>');
});
</script>