IMUZA.com

Xserver << WordPress(ConoHa) << はてなブログ

【はてなブログ高速化】シェアボタン（ソーシャルボタン）を改良して読み込みを速くする

unsplash-logoFrankie

【はてなブログ高速化】シェアボタン（ソーシャルボタン）を改良して読み込みを速くする

2016.08.24 javascript, WebTips, はてなブクマ, はてなブログ

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

はてなブログの読み込みが重い（遅い）のは、ソーシャルボタン群やブログカードに iframe を使っているからです。

ソーシャルボタンについては、「はてなブログ爆速計画＝ソーシャルボタンをスクロールタイミングで遅延ロードする – IMUZA.com」などで遅延ロードを試みたのですが、もっと根本的に iframe をやめてダイレクトリンクを利用してみようと思います。

まず、考え方を整理しますと、

  1. 記事ごとのソーシャルパーツを外す
  2. ソーシャルボタンの html を入れる方法は、
    • カスタマイズ > 記事 > 記事下（上）ではトップページに表示しないので
    • html の定型を カスタマイズ > フッタ に書いておき
    • javascript で動的に各記事に書き込む
  3. 各ソーシャルボタンのシェア数を jQuery を使わず Native（素の javascript）で書く

こんな感じでやってみます。

01はてなブックマーク

まず、「はてなブックマークボタンの作成・設置について – はてなブックマーク」で公式のコードを取得します。

ブックマーク数も非同期の独自コードを使いますので 非表示 とし、ボタンも最もシンプルなものにします。

<a href="http://b.hatena.ne.jp/entry/アドレス" 
  class="hatena-bookmark-button" 
  data-hatena-bookmark-title="タイトル" 
  data-hatena-bookmark-layout="simple" 
  title="このエントリーをはてなブックマークに追加">
  <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>


<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

この内、javascript はデフォルトで読み込まれていますので削除し、記事のアドレスとタイトルは各記事から取り出し動的に書き込みます。また、アイコンも image ではなく WEBフォントのアイコンを使います。<span> はブックマークのカウント数を入れる要素です。

で、こうなります。

<div id="myShareButtons">
  <a href="" 
    class="hatena-bookmark-button" 
    data-hatena-bookmark-title="" 
    data-hatena-bookmark-layout="simple" 
    title="このエントリーをはてなブックマークに追加">
    <i class="blogicon-bookmark lg"></i>
    <span class="hatena-bookmark-count"></span>
  </a>
</div>

この html を カスタマイズ > フッタ に入れておき、javascript で各記事に挿入します。

(function(){
  var hatena_bm_get = function(url, count, callback) {
    var script = document.createElement('script');
    var callbackName = 'ExternalCallback_' + count;
    window[callbackName] = function (data){
      if(script.parentNode){
        script.parentNode.removeChild(script);
      }
      try{
        delete window[callbackName];
      }catch(e){
        window[callbackName] = null;
      }
      callback(data);
    };
    script.src = url + '&callback=' + callbackName;
    document.body.appendChild(script);
  }


  var count = 0;
  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 hatenaButton = shareButtons.querySelector('a.hatena-bookmark-button');
    hatenaButton.setAttribute('href', 'http://b.hatena.ne.jp/entry/' + permalink);
    hatenaButton.setAttribute('data-hatena-bookmark-title', title);    
    var url = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(permalink);
    hatena_bm_get(url, count, function(data) {
      hatenaButton.querySelector('.hatena-bookmark-count').innerHTML = data;
    });
    count++;
    article.querySelector('.social-buttons').appendChild(shareButtons);
  });
  myshareButtons.parentNode.removeChild(myshareButtons);
})();

参考サイト：JavaScriptプログラミング講座【XMLHttpRequest について】

これで、はてなブックマーク数付きのシェアボタンが各記事下に挿入されます。後は、css でボタンの装飾をするだけです。

上のコードの内、ブックマーク数を読む際、クロスドメインで苦労しましたので、次回はそのあたりを書こうと思います。

その後、Facebook, Twitter, Google+ を加えれば、なんとか【はてなブログ高速化】ができそうです。

Twitter
Facebook
ブックマーク
LINEで送る