Cara Memasang Komentar Facebook Dengan Tombol OnClick Event

Memasang komentar facebook responsive di blogspot sebenarnya sudah pernah saya buat pada artikel yang dahulu, namun beberapa pengguna plugin facebook ini mungkin masih belum begitu paham dengan cara penggunaan ataupun pemasangan dari kotak komentar ini.

Menjadikan facebook sebagai kotak komentar bisa jadi merupakan hal yang diinginkan oleh banyak pengguna website ataupun blog. Bagaimana tidak, jika kita melihat jumlah total pengguna facebook sampai saat ini semakin luar biasa banyaknya hal ini tentu bisa dijadikan sebagai pancingan untuk visitor dari media sosial facebook.

cara pasang komentar facebook responsive

Nah, dengan memanfaatkan jumlah pengguna facebook, kita berharap bisa mendapatkan pengunjung dari platofrm facebook. Tentunya agar pengunjung ini meninggalkan jejeknya di blog, haruslah Anda memasang kotak komentar yang sesuai dan bisa memudahkan visitor dan visitor serta admin web berinteraksi dengan baik.

Cara Memasang Kolom Komentar Facebook Responsive Terbaru

Pada pembaharuan ini, kotak komentar dibuat semakin responsive,ringan serta SEO Friendly agar memanjakan pengguna mobile device atau handphone, karena kita tahu bahwa saat ini pengguna android lebih banyak daripada PC maupun laptop.

1. Pasang Meta Tag

Silakan login ke akun blogger Anda, pilih theme, lalu klik edit theme.

Sebelum pemasangannya pada blog, check dahulu tag meta Anda, apakah kode berikut sudah ada dibawah <head>

<meta content='https://www.facebook.com/profil-facebook' property='article:author'/>
<meta content='https://www.facebook.com/fanpage-facebook' property='article:publisher'/>
<meta content='kode-aplikasi-facebook' property='fb:app_id'/>
<meta content='kode-admin-facebook' property='fb:admins'/>
<meta content='kode-profil-facebook' property='fb:profile_id'/>

Jika belum, silakan copykan kode diatas terlebih dahulu dan isi sesuai dengan akun Anda. Jika belum tahu cara mendapatkan kode diatas, silakan baca Cara Mendapatkan Kode ID Facabook

2. HTML

Setelah semuanya sudah siap, cari kode dibawah ini pada template Anda. Gunakan CRTL + F untuk mempermudah pencarian.

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

atau kode ini

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

Untuk lebih jelasnya, bisa di check pada gambar dibawah ini

Setelah kodenya sudah ketemu, tambahkan kode ini diatas kode 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>

Kode diatas hanya menampilkan kolom komentar pada halaman posting, Jika ingin menampilkan kotak komentar facebook pada halaman static, rubah kode data:view.isPost menjadi data:view.isSingleItem

3. HTML Ke Dua

Cari kode ini </article>, setelah ketemu, pasang kode dibawah ini tepat diatasnya

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

4. Java Script

Terakhir, pasang kode ini diatas kode </body> atau </body>

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

5. Save Template

Silakan save template dan lihat hasilnya.

Jika Anda ingin membuat komentar facebook ini jadi single komentar tanpa menghadirkan komentar blogger, Anda bisa menambahkan kode css ini sebelum kode ]]></b:skin> atau </style>

#comments {display:none;}
.post-comment-link { visibility: hidden; }

Cara Memuat Komentar Facebook Dengan OnClick Event

Nak sekarang komentar facebooknya sudah siap, selanjutnya kita akan melakukan penambahan script untuk memuat komentar facebook dengan onClick event. Script ini juga sebenarnya sudah pernah saya bagikan pada artikel sebelumnya tentang Memasang Komentar Disqus Dengan Tombol Click Load

Sesuai dengan fungsinya, tombol klik ini akan load iframe facebook bersamaan dengan script sdk bawaan dari facebook. Karena jika memuat ini pada awal, maka loading blog akan menjadi lambat dan sangat tidak baik bagi kesehatan Web.

Silakan copy dan pastekan kode dibawah ini sebelum </body>

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
function loadFacebook(){var e=document.getElementById("fb-loader");e.style.display="none";var e=document.getElementById("fb-comment");e.style.display="block";var e=document.getElementById("fb-showhide");e.style.display="block";!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.data-src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");}
function toggleNavPanel(e){var n=document.getElementById(e),l=document.getElementById("fb-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
</script>
<div id='fb-root'/>
</b:if>

Untuk mempercantik tampilan tombol kliknya, silakan tambahkan kode berikut ini diatas kode </head> atau&nbsp;</head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.comments,.comments-fb{background:#262626;clear:both;margin:0 20px;line-height:1em;padding:0 12px;}
#comments{padding:10px 20px;margin-top:0;display:none}
.fb-comments,.fb_iframe_widget span,.fb_iframe_widget iframe{width:100%!important}
.fb-comments{padding:0!important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.fb-title,.disqus-title{margin:0 20px;text-align:left;background:#111;padding:6px 10px;color:#f7f7f7!important;font-size:120%;font-weight:700}
#disqus-title{margin:20px 20px 0!important;}
.fb-loader,#fb-showhide,.disqus-loader,#disqus-showhide{float:right;cursor:pointer}
#fb-comment,#disqus-showhide,#fb-showhide{display:none}
</style>
</b:if>

Demikian artikel tutorial blogging kali ini tentang Cara Memasang Komentar Facebook Dengan Tombol OnClick Event. Semoga bermanfaat

Sumber :