Memasang Responsive Facebook Comment Terbaru 2015 Di Blogger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/16/2015

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.