はてなブログのソーシャルボタンはとても重いです。
記事ページはまあなんとか許容範囲かと思いますが、トップページに５記事を表示したりしますと、ボタンの表示だけに３,４秒かかっています。
で、何とかならないかといろいろ考えてみました。
「続きを読む」を入れて、トップページのソーシャルボタンを削除してしまう
// 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 をいじっていますので、表示完了まで３秒くらいかかっています。結局ほとんど間もなくソーシャルボタンの読み込みが始まることになりますので、続けてやっても同じかな？ということです。
ですので、現在、該当記事のフッターに近づいたらソーシャルボタンを表示するよう出来ないかと思案中です。
続く。