Cách tải khung nhận xét Facebook bằng button click

Với cách làm này có tác dụng làm tăng tốc độ tải trang vì khi trang được tải sẽ không tải SDK Javascript và khung iframe bình luận của Facebook, thay vào đó nếu muốn đăng nhận xét có thể click vào button lúc này SDK Javascript và khung iframe bình luận sẽ được tải và hiển thị khung nhận xét.

Bạn tham khảo cách chèn khung nhận xét Facebook như mình hướng dẫn

Bước 1: Đăng ký thẻ data b:includable trong widget Blog1 ví dụ ngay bên dưới <b:includable id='comments' var='post'>...</b:includable>

Copy


<b:includable id='fbcomments' var='post'>

  <b:if cond='data:view.isSingleItem'>

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

      <button expr:aria-label='data:messages.postAComment' expr:title='data:messages.postAComment' id='commentsOnclick' onClick='showComments();' type='button'><data:messages.postAComment/></button>

      <div id='fb-comments'>

        <div class='fb-comments' data-numposts='5' data-width='100%' expr:data-href='data:blog.url.canonical'/>

        <style>.fb_iframe_widget_fluid_desktop iframe[style]{width:100% !important}</style>

      </div>

    </b:if>

  </b:if>

</b:includable>

Bước 2: Chèn thẻ b:include vào nơi bạn muốn hiển thị trong bài viết thường là ngay dưới post-body và trên post-footer

Copy


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

Bước 3: Chèn script của Facebook trước thẻ đóng </body>

Copy


<b:if cond='data:view.isSingleItem'>

<div id="fb-root"></div>

<script>//<![CDATA[

function showComments() {

  (function(d, s, id) {

    var js, fjs = d.getElementsByTagName(s)[0];

    if (d.getElementById(id)) return;

    js = d.createElement(s);

    js.id = id;

    js.src = "https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v3.2&appId=<app_Id>";

    fjs.parentNode.insertBefore(js, fjs);

  }(document, 'script', 'facebook-jssdk'));

  document.getElementById("commentsOnclick").style.display = "none";

}

//]]></script>

</b:if>

Thay <app_Id> bằng ID ứng dụng Facebook của bạn

Bước 4: Viết css cho button Đăng nhận xét

Copy



#commentsOnclick {

    display: inline-block;

    text-align: center;

    padding: 0 5px;

    background: #0af;

    color: #ffffff;

    font-family: Helvetica, Arial, sans-serif;

    font-size: 11px;

    font-weight: bold;

    border-radius: 3px;

    height: 20px;

    line-height: 20px;

    vertical-align: bottom;

    cursor: pointer;

}