【はてなブログ高速化5】 Google+のシェアボタンをカウント付きで自作する

（2016/9/6）完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む（完成） – IMUZA.com」にあります。

はてなブログのソーシャルボタン軽量化、最後の Google+ です。

これも他のボタンと同じように、Javascript で表示するか、ダイレクトリンクにするかのようです。ただ、公開範囲が違うのでしょうか、+button と Share の２種類があるようです。いずれにしても、iframeを避けようとすると、リンクしかないようです。

Share  |  Google+ Platform for Web  |  Google Developers の中ほどに Share Link のサンプルコードがあります。

<a href="https://plus.google.com/share?url={URL}" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
  src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/></a>

サンプルコードを少し変更して、hrefに直接 javascript を記述します。

（略）


    var googleButton = shareButtons.querySelector('a.googleplus-button');
    var w = 500, h = 500, x = (window.screen.width - w ) / 2, y = (window.screen.height - h) / 2;
    googleButton.setAttribute('href', "javascript:void(window.open('https://plus.google.com/share?url=" + encodeURIComponent(permalink) + "', '_blank', 'width=" + w + ",height=" + h + ",left=" + x + ",top=" + y + "'))");


（略）

カスタマイズ > フッタ に入れる html は、

  <a class="googleplus-button" href="">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="36px" height="22px" viewBox="-14 -8 72 44" class="u7 uzlpSb"><path d="M32 8.2h-3v4h-4V15h4v4h3v-4h4v-2.9h-4V8.2zm6-2V8h3v15h3V4l-6 2.2z"></path><path d="M11.4 11.3v4.5h6c-.4 2.6-2.7 4.5-6 4.5-3.6 0-6.6-3.1-6.6-6.7s2.9-6.7 6.6-6.7c1.7 0 3.1.5 4.3 1.7l3.2-3.2c-2-1.8-4.5-2.9-7.5-2.9C5.3 2.5.3 7.5.3 13.6s5 11.1 11.1 11.1c6.5 0 10.7-4.6 10.7-10.9 0-.8-.1-1.7-.2-2.5H11.4z"></path></svg>
    <span class="google-count"></span>
  </a>

画像は、はてなのウェブフォントには Google+ のアイコンがありませんので svg を使っています。

Google+ のシェアカウント取得

Google+ のシェアカウント取得については、Javascript の情報が皆無でしたので苦労しましたが、php の情報を参考にやってみましたら、なんとか取得することができました。

結局、XMLHttpRequest を post で使い、パラメータを JSON で送ることでうまくいきました。

  var getGoogleShareCount = function(obj, callback) {
    var url = 'https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ';
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var obj = JSON.parse(xhr.responseText);
        callback(obj.result.metadata.globalCounts.count);
      } else {
        callback(0);
      }
    };
    xhr.open('post', url, true);
    xhr.setRequestHeader( 'Content-Type', 'application/json' );
    xhr.send(JSON.stringify(obj));
  };


  var obj = {
    "method":"pos.plusones.get",
    "id":"p",
    "params":{
      "nolog":true,
      "id":permalink,
      "source":"widget",
      "userId":"@viewer",
      "groupId":"@self"
    },
    "jsonrpc":"2.0",
    "key":"p",
    "apiVersion":"v1"
  };
  getGoogleShareCount(obj, function(data) {
    googleButton.querySelector('.google-count').innerHTML = data;
  });

参考サイト
javascript – Get Google+ shares without API key for each page? – Stack Overflow

以上で、なんとか、はてなbookmark、Facebook、Twitter、Google+ のソーシャルボタンがシェアカウント付きのリンクになりました。後は、css で装飾してまとめれば完成です。

次回です。