ヒャッハー！ ブログカスタマイズなっしーヾ(。゜▽゜)ノ
当ブログでも使用させていただいているシロマティさんのシェアボタン。唯一の欠点は、Google+とPocketのシェア数が表示されないこと（デザインテーマ「Brooklyn」もかな？）。
コードの参考元を参照したところ、簡単な修正でシェア数の取得・表示に成功しました。
本記事では、その修正方法を紹介します。
※このカスタマイズは、
「NO TITLE」さん*1
「寝ログ」さん
のコードを組み合わせただけで独創性は0です。転用に問題がございましたらお知らせください。
修正方法
0. シェアボタンの導入
あらかじめ、*1の記事を参考にオリジナルのシェアボタンを導入しておきます。
1. シェア数を取得するコードの導入
導入したjQueryのコードにおいて、2種類のコードを追記します。
1つ目です。$(function(){の行の直前（はてブ数取得の下）に以下のコードを追記します。
// By 寝ログ
//Google＋のシェア数を取得
function get_social_count_googleplus(url, selcter) {
jQuery.ajax({
type: "get", dataType: "xml",
url: "http://query.yahooapis.com/v1/public/yql",
data: {
q: "SELECT content FROM data.headers WHERE url='https://plusone.google.com/_/+1/fastbutton?hl=ja&url=" + url + "' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
format: "xml",
env: "http://datatables.org/alltables.env"
},
success: function (data) {
var content = jQuery(data).find("content").text();
var match = content.match(/window\.__SSR[\s*]=[\s*]{c:[\s*](\d+)/i);
var count = (match != null) ? match[1] : 0;
jQuery( selcter ).text(count);
}
});
}
//ポケットのストック数を取得
function get_social_count_pocket(url, selcter) {
jQuery.ajax({
type: "get", dataType: "xml",
url: "http://query.yahooapis.com/v1/public/yql",
data: {
q: "SELECT content FROM data.headers WHERE url='https://widgets.getpocket.com/v1/button?label=pocket&count=vertical&v=1&url=" + url + "' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
format: "xml",
env: "http://datatables.org/alltables.env"
},
success: function (data) {
var content = jQuery(data).find("content").text();
var match = content.match(/<em id="cnt">(\d+)<\/em>/i);
var count = (match != null) ? match[1] : 0;
jQuery( selcter ).text(count);
}
});
}2つ目です。その下の行countHatebu('{Permalink}', '.hatebu-count');の直後に以下のコードを追記します。
// By 寝ログ
get_social_count_googleplus('{Permalink}', '.googleplus-count');
get_social_count_pocket('{Permalink}', '.pocket-count');
2. シェア数表示コードの修正
次は、HTMLの修正です。（<!--シェアボタン-->で始まるコードですよ！）
わかりにくいですが、<span class="small-text">Google</span>と<span class="small-text">Pocket</span>という部分をそれぞれ<span class="googleplus-count small-text"><i class="fa fa-spinner fa-spin"></i></span>と<span class="pocket-count small-text"><i class="fa fa-spinner fa-spin"></i></span>に修正します。
修正はこれで完了です。
Twitterは？
Twitterのツイート数は変わらず表示されませんが、方法がないわけではありません。私は、とりあえず公式「ソーシャルパーツ」の機能と同等になったのでこれでいいかなと。
他サービスへの登録が必要になりますが、以下の記事を参考にすれば今回と同様のやり方で可能だと思います。
