読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

シェアボタンにGoogle+とPocketでシェアされた数字を表示する方法

はてな
スポンサーリンク

以前に書いた記事
www.fair-skinned-monster.com
では「シロマティ氏製シェアボタン」という事でしたが

もう一つのはてなブログカスタマイズの巨星「ゆきひー (id:ftmaccho)」さんのものにも対応できることがわかりましたのでお知らせします。
www.yukihy.com

Google+とPocketでシェアされた数字を表示する方法

yaritakunai.hatenablog.com
に書かれている通りに

// 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);
    }
  });
}

をコピーして

// By 寝ログ
  get_social_count_googleplus('{Permalink}', '.googleplus-count');
  get_social_count_pocket('{Permalink}', '.pocket-count');

をそれぞれのシェア数を取得しているところに書き、実際にシェアボタンを表示している箇所に

<!--シェアボタン-->
<div class="share-flat">
<span style="font-size: 8px">シェアする</span>
<div class="share-flat-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--Googleプラス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="googleplus-count small-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="pocket-count small-text">Pocket</span></a>
</div>
</div>

のGoogle+の「Google+」を表示している前の

<span class="small-text">

に「googleplus-count

pocketの「pocket」を表示している前の

<span class="small-text">

に「pocket-count
をそれぞれの場所に追加します。
(わかりにくいのでそのままコピーでも可)

一応編集したら

<span class="googleplus-count small-text">Google+</span>
<span class="pocket-count small-text">Pocket</span>

となります。

実際に表示しているのはこちらをご覧ください。

いや、完全なコピペで申し訳ないです。
id:crullerさん、情報ありがとうございました。
(考えたら当たり前なんですが、せっかくできたので・・・)

また修正を行う際は必ずバックアップを取ってからお願いいたします