はてなブログのソーシャルボタンを５秒後に遅延ロードする

はてなブログのソーシャルボタンはとても重いです。

記事ページはまあなんとか許容範囲かと思いますが、トップページに５記事を表示したりしますと、ボタンの表示だけに３,４秒かかっています。

で、何とかならないかといろいろ考えてみました。

• 「続きを読む」を入れて、トップページのソーシャルボタンを削除してしまう
• ソーシャルボタンを遅延ロード
• ソーシャルボタンを任意のタイミングで表示する
• スクロールタイミングで１記事分ずつ表示する

「続きを読む」を入れて、トップページのソーシャルボタンを削除してしまう

// Socialボタン削除
(function(){
  if (document.body.className.indexOf('page-index') !== -1) { // 7.29追加
    Array.prototype.forEach.call(document.querySelectorAll('.social-buttons'), function(node) {
      node.parentNode.removeChild(node);
    });
  }
})();

いっそのこと、’.social-buttons’ を ‘.entry-footer’ に変えてフッターごと削除してしまえばすっきりするかもしれません。

ソーシャルボタンを遅延ロード

しばらくは上の方法をとっていたのですが、当サイトは、左サイドに、表示記事へスムーズスクロールリンクを置いていますので、それをクリックして該当記事へ移動しても、再び「続きを読む」では二度手間になってしまいます。

そこで、現在は、ソーシャルボタンを５秒後に読み込む方法をとっています。

(function(){
  if(document.querySelector('.social-button-item') !== null){
    var array = new Array(),
      socials = document.querySelectorAll('.social-buttons');
    Array.prototype.forEach.call(socials, function(social) {
      array.push(social);
      social.parentNode.removeChild(social);
    });


    setTimeout( function(){
      Array.prototype.forEach.call(document.querySelectorAll('.entry-footer'), function(footer) {
        var socials = array.shift();
        socials.querySelector('.fb-share-button').setAttribute('data-size', 'large');
        footer.insertBefore(socials, footer.children[1]);
      });


      FB.XFBML.parse();
      twttr.widgets.load();
      gapi.plusone.go();
    },5000);
  }
})();

この方法、結構タイミングが難しく、window.onload や DOMContentLoaded ではうまくいかず、即時関数で カスタマイズ > フッタ に入れています。

また、各ボタンの HTML要素は、はてなブログの設定で全て非表示にし、あらためて Javascript で構築する方法も試したのですが、かえって時間がかかってしまいます。

ソーシャルボタンを任意のタイミングで表示する

上の方法、ソーシャルボタンを一旦配列に取り込んで、５秒後に吐き出しているのですが、はてなブックマーク以外は、吐き出すだけでは表示してくれません。それぞれ次のコードで再表示を呼び出せるようです。

FB.XFBML.parse();
twttr.widgets.load();
gapi.plusone.go();

スクロールタイミングで１記事分ずつ表示する

ソーシャルボタンを５秒後に表示する方法は、やってみますと、あまり意味がないようです。

つまり、はてなブログが元々重いこともありますし、さらに当サイトは Javascript でかなり DOM をいじっていますので、表示完了まで３秒くらいかかっています。結局ほとんど間もなくソーシャルボタンの読み込みが始まることになりますので、続けてやっても同じかな？ということです。

ですので、現在、該当記事のフッターに近づいたらソーシャルボタンを表示するよう出来ないかと思案中です。

続く。

www.imuza.com