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

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.

blogger comment form

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:

Previous Post
Next Post

post written by:

Xin chào! Mình là BaoTrongIT – một lập trình viên đam mê chia sẻ kiến thức lập trình, đặc biệt là về JavaScript, Node.js, NestJS, và các công nghệ backend/frontend hiện đại. Trên blog này, mình thường xuyên đăng tải các bài viết thủ thuật, kinh nghiệm thực chiến, ví dụ minh họa dễ hiểu, giúp bạn tiếp cận và hiểu sâu các khái niệm tưởng như phức tạp trong lập trình.

0 Comments: