Cara Mudah Membuat Komentar Facebook Responsive di Blogger

Tutorial kali ini ialah cara gampang memasang/membuat komentar Facebook responsive dan cara memasang penghitung komentar (comments count) Facebook di website atau blog. Mengapa memasang komentar Facebook sangat mudah? Sebab kita tinggal memasang plugin yang telah disediakan oleh Developer Facebook.

Cara Mudah Membuat Komentar Facebook Responsive di Blogger

Sayangnya plugin yang dibagikan tidak responsive jika diterapkan pada blog yang telah meresponsive blognya. Agar tampilan komentar ini menjadi responsive, maka perlu mengubah sedikit struktur script dari plugin yang dibagikan, yaitu menambahkan style 100% pada width.

Baca juga: Cara Terbaru Memasang Komentar Disqus di Blogger Valid HTML5

Cara Membuat dan Memasang Komentar Facebook di Blog

1. Masuk ke editor template, lalu di bawah kode <head> letakkan meta content berikut ini di bawah kode tadi (ganti yang ditandai).
<meta content='ID profil Facebook' property='fb:admins'/>
<meta content='ID APP Facebook' property='fb:app_id'/>

2. Kopi kode di bawah ini dan letakkan di atas kode </head>. Jika sudah terpasang sebelumnya, hapus kode tersebut dang anti dengan kode berikut ini.
<script type="text/javascript">
    //<![CDATA[
    $(window).bind("load resize", function(){
      var url = location.protocol+'//'+location.host+location.pathname;
      var containercm_width = $('#container-commentfb').width();
        $('#container-commentfb').html('<div class="fb-comments" ' +
        'data-href="'+url+'"' +
        ' width="' + containercm_width + '" data-num-posts="10"></div>');
        FB.XFBML.parse( );
    });
    //]]>
    </script>

3. Saatnya memasang plugin komentar facebook agar tampil di setiap halaman/postingan blog anda, dengan cara temukan kode <data:post.body/> (untuk postingan penuh) letakkan kode berikut ini di bawah kode tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>

4. Langkah terakhir simpan template, dan lihat hasilnya dengan membuka salah satu postingan blog.

Sampai disitu pemasangan komentar Facebook untuk blog anda telah selesai. Selanjutnya cara memasang comments count atau penghitung komentar facebook tadi.

Cara Memasang Facebook Comments Count di Blog

Biasanya plugin atau widget ini di pasang pada postmeta atua post-info untuk setiap artikel blog. Untuk menampilkan penghitung komentar Facebook ini, anda cukup menggunakan 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>

Demikian tutorial tentang Cara Membuat atau Memasang Komentar Facebook dan Penghitung Komentar Facebook di Blog. Selamat mencoba, semoga membantu.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates