Memasang Komentar Facebook dan Blogger berdampingan
https://sayajadiberkat.blogspot.com/2015/09/memasang-komentar-facebook-dan-blogger.html
Kita akan membuatnya berdampingan dengan boks komentar asli dari blogger, yang juga sangat bermanfaat bagi pemilik blog, google dan pengunjung yang tidak memiliki akun dimanapun, karena boks komentar dari blogger ini memang pasti masih sangat berguna, sehingga tampilan tetap manis karena menggunakan fungsi tab dalam pengoperasian kotak komentar ini.
Yuk kita mulai saja membuatnya, membuatnya memang sedikit rumit dan butuh ketelitian, baiknya ikuti saja dulu:
- Yang harus pertama kali dilakukan adalah mendaftar aplikasi boks komentar dulu di facebook, bertujuan untuk mendapatkan ID yang akan kita gunakan untuk melakukan moderasi komentar nantinya. Klik disini.
- Klik Apps > Login, lalu klik lagi tautan di langkah 1, kalo sudah login klik Apps > Add new App / Register a developer
- Pada pop-up yang muncul pilih > Advanced Setup
- Isi sesuai dengan selera Anda, Display name : (bebas) / Namespace (kosongkan saja) / Kategori : (bebas)
- Kemudian jika sudah klik > Buat Aplikasi
- Nah jadi deh, ID-nya, ini penting buat moderasi komentar nantinya, sekaligus menjadikan setiap komentar yang masuk ke facebook komentar di blog juga diberitahukan kepada kita di facebook. Copy aja App ID yang ada.
- Selanjutnya cari tahu juga nama profil facebook kamu, caranya pada pojok kanan atas klik foto > Profile
- Muncul halaman profil facebook seperti ini: https://www.facebook.com/berkahpokroku
- Kamu cukup copy dan menyimpan nama facebook milik kamu yang diwarnai biru, buat nanti dipakai.
Pasang di Blogger
- Login dulu di blogger
- Kemudian masuk ke dashboard > Template > edit html
- Setelah jendela html editor terbuka, klik pada script yang ada dan tekan CTRL + F untuk mulai mencari script.
- Mulai pencarian pertama: <head>
- Copy dan paste script dibawah ini tepat dibawah <head>
<meta content='148746543XXXX158' property='fb:app_id'/>
<meta content='berkahpokrokus' property='fb:admins'/>
- Ganti tulisan berwarna merah, yang angka-angka dengan App ID
- Yang tulisan berkahpokrokus diganti dengan Nama profil facebook sobat.
- Selanjutnya, kamu perlu copy paste script dibawah ini tepat diatas ]]></b:skin>
.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px;cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}
Jika sudah, lakukan langkah selanjutnya:
- Copy dan paste script dibawah ini tepat diatas </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='148746543XXXX158' property='fb:app_id'/>
<meta content='berkahpokrokus' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
- Ganti tulisan berwarna merah dengan App ID yang tadi didapatkan
- Ganti tulisan berwarna biru dengan nama facebook sobat.
- Copy dan paste script dibawah ini tepat dibawah <div class='comments' id='comments'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'><img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlGK52TfN3RgcXeP6VWPD5KpDqN6MDNw3eaHeij_57NTlSjMe6VcRv9MZ1Gp46QdQ5N3PNX2dDLcz4g-B_I6FQM33SJEX30DL9tA050QXmXW-wdyXXQ2NXfDg1zgI00oFaV3P-Mqmcrb4/s1600/facebook.gif'/> <fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='5' width='536'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>
- <div class='comments' id='comments'> ada dua, copy dan paste pada kode kedua saja.
- Ubah tulisan berwarna merah angka 5, adalah banyaknya post yang ditampilkan penuh.
- Ubah tulisan merah angka 536, adalah lebar halaman blog, sesuaikan dengan lebar blog sobat.
Jika artikel ini bermanfaat bagi kamu, di share ya dengan klik tombol share dibawah ini...
