Memasang Responsive Facebook Comment Terbaru 2015 Di Blogger

Dengan memasang komentar Facebook di blog memungkinkan orang lain atau pengunjung blog dapat mengomentari konten blog Anda menggunakan akun Facebook mereka. Sekaligus mereka dapat berbagi kepada teman-teman mereka di News Feed FB mereka.

Nah kini Facebook sudah mengupdate plugin komentarnya, jadi jika Anda sebelumnya sudah memasang komentar Facebook di blog maka silahkan update kodenya dengan kode terbaru. Facebook sendiri sudah mengumumkan bahwa dukungan untuk versi lama akan berakhir pada tanggal 23 Juni 2015 mendatang.

Nah bagi yang belum mencobanya dan ingin mencoba memasangnya untuk mengganti komentar Blogger yang sudah ada, kini saya membagikan cara memasang Responsive Facebook Comment Terbaru 2015 di Blogger.

Langkah Pertama


Silahkan copy kode di bawah ini di atas kode </body>. Jika pada template Anda sudah terpasang kode seperti itu sebelumnya, silahkan hapus kode yang lama.


<div id="fb-root"></div>
<script>
//<![CDATA[
(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.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Langkah Kedua


Pasang kode CSS di bawah ini agar komentar Facebook menjadi responsive sekaligus menyembunyikan komentar Blogger, silahkan simpan di atas kode ]]></b:skin> atau </style>


.fb-comments,.fb_iframe_widget span,.fb_iframe_widget iframe{width:100%!important}
.fb-comments{padding:0 15px!important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#comments{display:none!important}

Untuk kode padding:0 15px!important silahkan sesuaikan dengan padding .post atau .post-body agar komentarnya sejajar dengan postingan.

Langkah Ketiga


Silahkan copy kode di bawah ini


            <b:includable id='fb-comments' var='post'>
            <div class="fb-comments" id="fb-comment" expr:data-href='data:post.url' data-numposts="5"></div>
            </b:includable>

Kemudian simpan di bawah kode berikut


            <b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>

Sehingga menjadi seperti berikut


            <b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>
            <b:includable id='fb-comments' var='post'>
            <div class="fb-comments" id="fb-comment" expr:data-href='data:post.url' data-numposts="5"></div>
            </b:includable>


Langkah Keempat


Silahkan copy kode di bawah ini


<b:include data='post' name='fb-comments'/>

Dan simpan seperti pada penampakan kode berikut


              <b:includable id='main' var='top'>
............
............
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='fb-comments'/>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='fb-comments'/>
          <b:include data='post' name='comments'/>
        </b:if>
............
............
</b:includable>

Atau seperti berikut (pada template default Blogger yang baru)


         <b:includable id='main' var='top'>
............
............
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='fb-comments'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
............
............
</b:includable>

Terakhir, silakan save template Anda dan lihat di salah satu postingan Anda, kini komentar Blogger sudah berganti menjadi komentar Facebook.

Untuk menampilkan jumlah komentar atau comments count (biasanya di postmeta), silahkan gunakan kode berikut:


<a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> comments</a>

Selamat mencoba.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments