K4750.NET

WordPressにいいね！ボタンを設置した（その２）

WordPressにいいね！ボタンを設置した（その１）の続き。その１で課題となっていた、トップページの表示速度の低下を改善する。


１．遅延ロード

今までは、ブックマークボタン等を処理する各種JavaScriptをbodyタグが閉じる直前にずらずらと並べていた（以下、Google +1ボタンを例にする）。

<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>

これを、今回設置したbookmarkボタンが押下されたタイミングで実行するように変更する。

<!-- bootstrapのDropdownを使った、bookmarkボタン。sb-buttonsクラスを付与しておく。 -->
<div class="btn-group dropup sb-buttons">...</div>
...
<script type="text/javascript">
$(".sb-buttons").on('show.bs.dropdown', function() {
  (function() {
    var po = document.createElement('script');
    po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();
});
</script>
</body>

このままだと、bookmarkボタンを押下する度にdocument.createElement('script')が実行されるので、scriptタグが生成済みの場合は何もしないようにしておく（この辺りは、他のブックマークボタンの実装を参考にしている）。

(function(d, e, id) {
  if (d.getElementById(id)) return;
  var po = d.createElement(e);
  po.type = 'text/javascript'; po.async = true; po.id = id;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = d.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(po, s);
})(document, 'script', 'gpo-jssdk');

同様に、はてなブックマーク用のスクリプト等、他のスクリプトについてもbookmarkボタン押下時に一度だけ実行されるように修正する。


２．結果と次の課題

トップページの表示速度は、bookmarkボタンを設置する前の状態に戻り、快適になった。ただし、ボタンを押下してから各種ブックマークボタンが表示されるまでが長い。また、各種ブックマークボタンが表示されるまでの間は「真っ白」なので、ユーザーには「バグか？」と思われそう。

WordPressにいいね！ボタンを設置した（その１）

WordPressの各投稿のフッターに（こっそり）ブックマークボタンを設置してみた。


１．見た目

BootstrapのButton dropdownsを使って実装した。各ボタンの表示にはWordPressのプラグインを使用せず、それぞれの本家のドキュメント等を参考にして作った。

bookmark


２．思ったこと

ボタンを設置するにあたり、思ったこと。

  • プラグインが自動生成するボタンは、美しく配列するには微調整が必要である。
  • ブックマークボタンの見た目には統一性がないので、常に表示しておくと周りのデザインになじまない。
  • ブックマーク数等の表示は面白いと思うが、本質ではないので常に表示しておくのは煩わしい。
  • 独自のデザインを採用するやり方もあるが、常に表示するのでなければ、こだわる必要はない。
  • そもそも設置しないという選択肢もあるが、面白そうなので設置してみたい。ヽ(´ー｀)ノ

３．課題

  • ボタン設置に伴うトップページの表示速度の低下。トップページの表示投稿数を３に下げて暫定対処。。
  • FirefoxとIEで、はてなブックマークとfacebookのボタンが表示されない場合あり。
← Older 1 / 1 Newer →