Cara Memasang Komentar Facebook Responsive Di Blogger Terbaru

Tutorial Blogger kali ini wacana cara mengganti komentar bawaan Blogger/Blogspot dengan komentar Facebook (FB Comments) responsive, yang memungkinkan tampilan komentar FB tersebut menyesuaikan dengan segala bentuk ukuran devices.

yang memungkinkan tampilan komentar FB tersebut menyesuaikan dengan segala bentuk ukuran Cara Memasang Komentar Facebook Responsive di Blogger Terbaru

Jika pada tutorial sebelumnya mengenai cara terbaru memasang komentar Disqus di Blogger, maka kali ini akan dibahas wacana cara pasang komentar FB di platform blog sejuta umat ini. Jika berminat, silahkan ikuti tutorialnya berikut ini.

#Langkah 1
Silahkan tambahkan meta tag berikut di bawah aba-aba <head> atau <head>

<meta content='FACEBOOK_APP_ID' property='fb:app_id'/>
<meta content='ADMIN_PROFILE_ID' property='fb:admins'/>
<meta content='ADMIN_PROFILE_ID' property='fb:profile_id'/>
<meta content='FANPAGE_ID' property='fb:pages'/>

Dari keempat aba-aba meta tag di atas, direkomendasikan unuk memasang Facebook APP ID. Kegunaan dari aba-aba tersebut yaitu memoderasi seluruh komentar yang masuk. Nantinya jikalau ada komentar mengandung link dan spam, dapat dihapus atau di blacklist. Tidak perlu juga memasang seluruh meta tag tersebut, satu saja sudah memenuhi syarat untuk memoderasi.

#Langkah 2
Cari aba-aba ibarat ini:

<b:includable id='commentPicker' var='post'/>

Atau ini:

<b:includable id='commentPicker' var='post'>

kemudian letakkan aba-aba berikut sempurna di atas aba-aba tadi:

<b:includable id='commentFB' var='post'>
<b:if cond='data:view.isPost'>
<div class='fbComments' id='fbComments'>
<div class='fb-comments' data-numposts='10' data-width='100%' expr:data-href='data:blog.canonicalUrl'/></div>
</b:if>
</b:includable>

#Langkah 3
Cari aba-aba </article> kemudian letakkan aba-aba berikut di atas aba-aba tadi:

<b:include cond='data:view.isPost' data='post' name='commentFB'/>

Perhatian:
Jika komentar Facebook ingin juga ditampilkan pada halaman static, silahkan ubah tag kondisi data:view.isPost dengan data:view.isSingleItem pada #Langkah 3 tersebut.

#Langkah 4
Cari aba-aba </body> atau </body> kemudian letakkan aba-aba berikut ini di atas aba-aba tadi:

<div id='fb-root'/>
<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 = 'https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v3.1';
js.async = 'async';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]> </script>

#Langkah 5
Simpan tema, lihat akhirnya dengan membuka salah satu postingan blog.

Jika komentar menjadi double, dalam artian komentar blogger juga muncul, silahkan pergi ke Dashboard Blogger, kemudian pilih sajian Settings, dan ikuti petunjuk gambar berikut: