Memasang Responsive Facebook Comment Terbaru 2015 Di Blogger

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

Nah sekarang Facebook sudah mengupdate plugin komentarnya, jadi bila Anda sebelumnya sudah memasang komentar Facebook di blog maka silahkan update kodenya dengan aba-aba terbaru. Facebook sendiri sudah mengumumkan bahwa proteksi 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, sekarang saya membagikan cara memasang Responsive Facebook Comment Terbaru 2015 di Blogger.

Langkah Pertama

Silahkan copy aba-aba di bawah ini di atas aba-aba </body>. Jika pada template Anda sudah terpasang aba-aba menyerupai itu sebelumnya, silahkan hapus aba-aba 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 aba-aba CSS di bawah ini semoga 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 aba-aba padding:0 15px!important silahkan sesuaikan dengan padding .post atau .post-body semoga komentarnya sejajar dengan postingan.

Langkah Ketiga

Silahkan copy aba-aba 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 aba-aba berikut

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

Sehingga menjadi menyerupai 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 aba-aba di bawah ini

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

Dan simpan menyerupai pada penampakan aba-aba 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 menyerupai 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, sekarang komentar Blogger sudah berganti menjadi komentar Facebook.

Untuk menampilkan jumlah komentar atau comments count (biasanya di postmeta), silahkan gunakan aba-aba 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.
Sumber https://www.kompiajaib.com/

Share this post