How to Add a Facebook Comments in Blog

May 01, 2016
How to Add a Facebook Comments in Blog with defer loading
How to Add a Facebook Comments in Blog - because the template that I created does not use facebook comment box. so I made a tutorial how to add facebook comments were mild with the help setTimeout makes blogs is not heavy. please follow the instructions below.

Adding a Facebook Plugin Comment on the BlogAdding Javascript Facebook
javascript is not only useful on facebook comment, but other facebook plugin like fan page plugin, like button, the share button and more.
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find <body (CTRL + F in editor)
  2. Add the code below after html <body
    <div id="fb-root"></div>
    <script type='text/javascript'>//<![CDATA[
    setTimeout( function () {
    (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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    }, 2000);
    //]]></script>
  3. Then Save Template
NB : If this code already exists please replace the above code so that fast blog

Adding HTML Facebook Comments
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find <b:include data='post' name='threaded_comments'/> (CTRL + F in editor)
  2. You will find 2 html the same as below
    <b:if cond='data:blog.pageType == "static_page"'>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
  3. Then Replace with the code below
    <b:if cond='data:blog.pageType == "item"'>
      <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "static_page"'>
      <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
  4. Save Template
Adding CSS Facebook Comments
because facebook comment unresponsive, then you need to add this css and also add spacing between the facebook comments and the comments box blogger.
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find */]]></b:skin> or </style>(CTRL + F in editor)
  2. Add css below after html */]]></b:skin> or </style>
    #fb-comments{display:block;margin:15px auto;}
    .fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{min-width:100%!important;width:100%!important}
  3. Then Save Template
Source Script Facebook : http://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script
Cara menambahkan kotak komentar facebook di blog - karena template yang saya buat tidak menggunakan kotak komentar facebook. maka dari itu saya membuatkan tutorial cara menambahkan kotak komentar dengan bantuan "setTimetout" yaitu biar blog tetap ringan. bagi yang ingin membuatnya silahkan ikuti tutorial dibawah ini.

Menambahkan Plugin Kotak Komentar Facebook di BlogMenambahkan Javascript Facebook
javascript ini bukan hanya berguna pada kotak komentar facebook, tetapi plugin facebook lainnya seperti, tombol suka, tombol share, dan lainnya.
  1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari Kode <body (CTRL + F pada saat di editor)
  2. Tambahkan kode dibawah ini sesudah kode <body
    <div id="fb-root"></div>
    <script type='text/javascript'>//<![CDATA[
    setTimeout( function () {
    (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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    }, 2000);
    //]]></script>
  3. Lalu Save Template
NB : bagi yang sudah punya kode yang mirip seperti diatas saya sarankan ganti kode yang ada di blog mu dengan kode diatas ini.

Menambahkan HTML Kotak Komentar Facebook
  1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <b:include data='post' name='threaded_comments'/> (CTRL + F pada saat di editormu)
  2. Kamu akan melihat 2 kode yang sama seperti contoh dibawah ini
    <b:if cond='data:blog.pageType == "static_page"'>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
  3. kalau udah ketemu silahkan ganti sama kode dibawah ini
    <b:if cond='data:blog.pageType == "item"'>
      <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "static_page"'>
      <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
  4. Lalu Save Template
Menambahkan CSS Kotak Komentar Facebook
karena kotak komentar facebook tidak responsive, maka kamu harus menambahkan kode css dibawah ini dan juga membuat jarak bagi kotak komentar facebook dan kotak komentar google.
  1. Pergi ke blogger > Blogmu > Template > Edit HTML > Cari kode */]]></b:skin> atau </style>(CTRL + F pada saat di blog)
  2. Tambahkan css dibawah ini sebelum kode */]]></b:skin> atau </style>
    #fb-comments{display:block;margin:15px auto;}
    .fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{min-width:100%!important;width:100%!important}
  3. Lalu Klik Save Template
Source Script Facebook : http://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script

No comments

Subscribe to: Post Comments ( Atom )