Hướng dẫn load comment iframe và fix lỗi reply comment trong template layout v3

Nếu bạn đang cài đặt templete layout v3, widget Blog version="2", mà tắt js mặc định b:js='false' thì nút reply comment sẽ bị lỗi không load được thẻ iframe đăng nhận xét mỗi khi bạn hay ai đó reply lại nhận xét đã đăng trước đó. Hơn nữa link src trong thẻ iframe thường nặng và sẽ load ngay khi trang tải như vậy khiến trang tải chậm hơn.

Dưới đây là hướng dẫn load comment iframe và fix lỗi reply comment trong template layout v3 áp dụng nếu Blog của bạn đang bị lỗi nút reply comment khi tắt js mặc định

Bước 1: Trong theme chuyển đến tiện ích Blog 1, tìm lần lượt các thẻ b:includable để sửa lại

Đầu tiên là cặp thẻ <b:includable id='commentForm' var='post'>, trong thẻ này các bạn xóa đoạn dưới đây đi

<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>

<data:post.cmtfpIframe/>

<script type='text/javascript'>

  BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);

</script>

Làm tương tự với cặp thẻ <b:includable id='threadedCommentForm' var='post'>

Tiếp theo, trong cặp thẻ <b:includable id='threadedComments' var='post'>, các bạn xóa đoạn dưới đây:

<b:if cond='data:post.embedCommentForm'>

  <b:include data='post' name='threadedCommentJs'/>

</b:if>

Bước 2: Chèn script jquery trước thẻ đóng </body>

<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isSingleItem'>

<script>//<![CDATA[

$(function() {

  // load iframe

  $('.comment-form').append('<iframe class="blogger-iframe-colorize blogger-comment-from-post" id="comment-editor" name="comment-editor" src="" title="comment iframe"></iframe>')

  // load script

  $.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function(){

    BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')

  })

  var l = '',id = '',li = ''

  // Gọi iframe khi click vào nút reply

  $('.comment a.comment-reply').click(function(e) {

    l = $('#comment-editor').attr('src')

    $('.calcel-reply').remove()

    $('.comment-actions').removeAttr('style')

    $('#top-continue.continue').hide()

    var $this = $(this),

    id = $this.attr('data-comment-id')

    l = l + '&parentID=' + id

    li = $this.parent().parent().parent().attr('id')

    $('#comment-editor').attr('src', l)

    $this.parent().hide()

    $('#comment-editor').appendTo($('#' + li + '>.comment-replybox-single'))

    $('#' + li + '>.comment-replybox-single').append('<div class="calcel-reply"><button class="theme-button" type="button">Hủy</button></div>')

    $('.calcel-reply').click(function() {

      $(this).remove()

      $('.comment-actions,#top-continue.continue').removeAttr('style')

      $('#comment-editor').appendTo($('.comment-form'))

    })

  })

  // Gọi iframe khi click vào nút Thêm nhận xét dưới cùng

  $('#top-continue.continue>a.comment-reply').click(function(e) {

    e.preventDefault()

    $(this).parent().hide()

    $('.calcel-reply').remove()

    $('.comment-actions').removeAttr('style')

    $('#comment-editor').appendTo($(this).parent().next())

    $('.comment-replybox-thread').append('<div class="calcel-reply"><button class="theme-button" type="button">Hủy</button></div>')

    $('.calcel-reply').click(function() {

      $(this).remove()

      $('.comment-actions,#top-continue.continue').removeAttr('style')

      $('#comment-editor').appendTo($('.comment-form'))

    })

  })

})

//]]></script>

</b:if>

Tham khảo thêm bài viết:

• Cách thêm một cấp reply comment cho Blogger layout v3
• Tùy biến thông báo khi tắt nhận xét bài đăng