【はてなブログ高速化2】Facebookシェアボタン／シェアカウントを素の Javascript で取得する

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

前記事の「【はてなブログ高速化】シェアボタン（ソーシャルボタン）を改良して読み込みを速くする」では、ブックマーク数を非同期で取得するために、XMLHttpRequest を使っています。

jQuery には Ajax 関数（でいいのかな？）が実装されていますので比較的簡単に非同期 HTTP 通信が可能ですが、素の javascript ですと情報も少なくなかなか難しいところがあります。

前記事にも書きましたように「はてなブックマーク」の取得はクロスドメイン制限でさらに面倒になりますので、その制限のない（のだと思う）Facebook のシェアカウント取得を先にやってみようと思います。

Facebook シェアボタン

その前に、そもそもの Facebook シェアボタンというものをあまり理解していませんので、あらためて「Facebook Developers」を読んでみました。「ウェブ上のシェア」です。

シェアボタンには２種類があるということかと思います。間違っていましたらご指摘ください。

• ソーシャルプラグイン利用した「シェアボタン」
• ダイアログを直接開く「シェアダイアログ」

どちらにしても、シェアするページが「Open Graphマークアップ」されていないといけないです。<meta property="og:ってやつですが、はてなブログはデフォルトで吐き出すようになっていますので問題ありません。

シェアボタン

やはり公式のシェアボタンから試した方がいいだろうとやってみたのですが、この方法でiframeを使わずダイアログを開くためには、イベントハンドラonclickを使って別ウィンドウを開くしかないですね。「シェアボタン」のドキュメントに素直にシェアダイアログを使えと書かれています。

ウェブサイトでシェアダイアログを開くためのボタンを使用しない場合や、Facebookが提供するボタンがウェブサイトのデザインに合わない場合は、リンクのシェアにウェブ版シェアダイアログを使用することもできます。

ただ、シェアボタンはコードを貼り付けるだけですが、シェアダイアログにはアプリ登録が必要になります。

イベントハンドラ onclick を使ったダイレクトリンク

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

<div id="myShareButtons">


<!-- hatena-bookmarkは略 -->


<a class="facebook-share-button" 
    href="" 
    onclick="window.open(this.href,'FacebookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" 
    title="Facebookでシェア">
    <i class="blogicon-facebook lg"></i> 
    <span class="facebook-count"></span></a>
</div>

同様に javascript の方も hatena-bookmark のコードは省略しています。最終的にはひとつにまとめる予定です。

(function(){
  var getFbShareCount = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var obj1 = JSON.parse(xhr.responseText),
          obj2 = 'share' in obj1 ? obj1.share : {},
            count = 'share_count' in obj2 ? obj2.share_count : 0;
        callback(count);
      } else {
        callback(0);
      }
    };
    xhr.send(null);
  };


  var myshareButtons = document.getElementById('myShareButtons');
  var articles = document.querySelectorAll('article');
  Array.prototype.forEach.call(articles, function(article) {
    var bm = article.querySelector('.bookmark');
    var permalink = bm.getAttribute('href');
    var title = bm.innerHTML;


    var shareButtons = myshareButtons.cloneNode(true);
    var facebookButton = shareButtons.querySelector('.facebook-share-button');
    facebookButton.setAttribute('href', 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(permalink));
    var url = 'https://graph.facebook.com/?id=' + encodeURIComponent(permalink);
    getFbShareCount(url ,function(data) {
      facebookButton.querySelector('.facebook-count').innerHTML = data;
    });


    article.querySelector('.social-buttons').appendChild(shareButtons);
  });
  myshareButtons.parentNode.removeChild(myshareButtons);


})();

XMLHttpRequest

XMLHttpRequest を使っての非同期通信は、わかりやす解説されているサイトがたくさんありますので省略しますが、open()メソッドの３つ目の引数にtrue（初期値）を指定しますと非同期通信になります。

受信に成功しますと、JSON形式のテキストで帰ってきますので、JSON.parseでオブジェクトに変換します。

{
   "og_object": {
      "id": "820791891355114",
      "type": "website",
      "updated_time": "2016-07-21T04:43:33+0000"
   },
   "share": {
      "comment_count": 0,
      "share_count": 0
   },
   "id": "http://test0.hatenablog.jp/entry/2016/06/03/102114"
}

後は読みだすだけですが、今回の場合、非公開のテスト用サイトだからなのか、id以外帰ってこないページがありましたので、その場合の処理も入れました。

長くなりましたので、「シェアダイアログ」の方は別記事です。また、ボタンの装飾もはてなブックマーク同様全て完成後になります。