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

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

「シェアダイアログ」を使ってシェアボタンを作ります。

Facebook に新しいアプリを作成して、ウェブサイトを登録しておかないとエラーが出ます。

01Facebook アプリの作成

1. Facebook Developersにログイン
2. 「新しいアプリを追加」をクリック
3. 表示名（自由に）、連絡先アドレスを入力、カテゴリを選び、「アプリIDを作成」をクリック
4. メニューの「設定」をクリック
5. 「プラットフォームを追加」をクリックして、「ウェブサイト」を選び、シェアダイアログを挿入するサイトアドレスを入力する
6. 変更を保存する
7. 「アプリID」をコピーして、下のappID:'your-app-id'に入力する

02シェアダイアログ

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

<div id="myShareButtons">
  <div class="facebook-share-button" style="display:inline-block; cursor:pointer;">
    <i class="blogicon-facebook lg"></i> 
    <span class="facebook-count"></span>
  </div>
</div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.7'
    });
  };


  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/ja_JP/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Javascript

(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.addEventListener('click', function() {
      FB.ui({
        method: 'share',
        href: permalink,
      }, function(response){});
    });


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

完成です。