2018-08-11T02:19:25Z

Bloggerのコメント欄を改善する

Blogger高速化の一環として実施したコメント欄の改善について。

不満点

  • 埋め込み
    • 標準では、高さが足りずスクロールバーを表示する
    • スクリプトで表示するとiframeの領域が大きすぎることがある
    • 標準で外部スクリプト(comment_from_post_iframe.js)を読み込む
      • ページの読み込みが遅延する
    • ページ読み込み時にiframeを読み込む
      • 閲覧者の99%は使用しないが、ページ読み込みを遅延する
      • 閲覧者の99%は使用しないが、コメント記入欄を表示する
  • ポップアップ
    • ポップアップにコメントが表示される
      • コメントは、ページ側に表示しているため、重複してしまう
    • モバイルでは、強制的に埋め込みとなる
  • フルページ
    • 外部ページに移動する
  • 共通
    • blogger.comのスクリプトを有効にする必要がある

改善

  • 埋め込みを使用する
  • 高さを確保してスクロールバーの表示を抑制する
  • 外部スクリプトなしで動作するようにする
    • ただし、リプライ(返信)機能を使用できない
  • コメント記入要求(クリック)があってからiframeを読み込む
    • ただし、要求からiframeの読み込みまで一定時間遅延する

結果

「コメントを投稿」をクリック時にiframeを読み込む。

コメント投稿

コメント欄

template

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a id='comment-form-btn' style='display:block;text-align:center;'><data:postCommentMsg/></a>
    <noscript>
      <style>.comment-form-btn{display:none !important;}</style>
      <a style='display:block;text-align:center;' title='JavaScript を有効にしてください。'><data:postCommentMsg/></a>
    </noscript>
    <script type='text/javascript'>
(function() {
  let src = &#39;<data:post.commentFormIframeSrc/>&#39;;
//<![CDATA[
  function onClick() {
    let btn = document.querySelector('#comment-form-btn');
    btn.insertAdjacentHTML('afterend', "<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' src='"+src+"' style='min-height:200px;margin-top:10px;' width='100%'/>");
    btn.style.display = 'none';
    btn.removeEventListener('click', onClick);
   };
   document.querySelector('#comment-form-btn').addEventListener('click', onClick);
})();
//]]>
    </script>
  </div>
</b:includable>

<b:includable id='comment-form' var='post'>を置き換える

 コメント: 1

匿名 さんのコメント... 

blogger初心者です。
「スクリプトで表示するとiframeの領域が大きすぎることがある」
この現象にとても困っていました。

こちらで紹介されていた方法で、綺麗に表示させることができました。
本当にありがとうございます!

 コメントを書く