Cara Memasang Facebook Comment Box Versi Responsive Terbaru

Dengan memasang Box Komentar Facebook di blogger memungkinkan orang lain atau pengunjung blog dapat mengomentari konten blog Anda menggunakan dan memilih akun Facebook mereka. Sekaligus pengunjung tersebut dapat berbagi kepada teman-teman mereka di News Feed Facebook pengunjung mereka.
Penggunaan Facebook Comment Plugin dulunya memang masih standar, baru baru ini sekitar bulan Juni 2015, Facebook mengupdate facebook pluginnya dengan versi yang lebih Responsif sehingga memungkinkan pengguna blog dan pengunjung dapat melihat isi blog dengan waktu load yang cepat.

Berikut adalah langkah-langkah menambahkan Facebook Comment Box Versi Responsif nya.
Fig. Facebook Comments Plugin
Fig. Facebook Comments Plugin
Catatan Penting :

Selalu simpan template anda sebelum dirubah untuk jaga-jaga kalau proses perubahan gagal. Masuk ke Blogger>>pilih Template>>klik tombol Cadangkan/Pulihkan dan Download Template anda.

Step #1

Silahkan copy kode di bawah ini tepat 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>

Step #2
Pasang kode CSS di bawah ini agar komentar Facebook menjadi responsive sekaligus menyembunyikan komentar default Blogger, silahkan simpan tepat 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}

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

Step #3

Cari kode di bawah ini :

<b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>
SISIPKAN KODE DI SINI



Kemudian sisipkan kode di bawah ini tepat di bawah </b:includable>, dan hasilnya akan seperti 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>




Hasilnya akan seperti di bawah ini:

    <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>


Step #4
Silahkan Cari Kode Seperti Di Bawah Ini: 

   <b:includable id='main' var='top'>
............
............
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>


          Simpan Kode Di Sini


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

        </b:if>


        <b:if cond='data:blog.pageType == &quot;item&quot;'>


          Simpan Kode Di Sini


          <b:include data='post' name='comments'/>
        </b:if>
............
............
</b:includable>

Gantikan Kode warna merah di atas dengan kode di bawah ini :

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

Note : Jika kesulitan mencari, copy paste kode yang ada di atas warna merah

Atau seperti ini (pada template 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>

Note : Jika kesulitan mencari, copy paste kode yang ada di atas warna merah

Step #5

Simpan Template dan lihat hasilnya pada salah satu postingan.
Demikian, jika ingin menampilkan Comment Count tinggal menambahkan kode di bawah ini :
    <a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> comments</a>


 

Related Posts