Memasang kolom komentar facebook di blog ternyata sangat membantu. Bukan cuma untuk pengunjung blog, tapi juga bagi pemilik blog itu sendiri. Tapi ada masalah lain ketika kolom tersebut dipasang berurutan (bawah atas) dengan kolom komentar bawaan blogger. Memakan ruang yang mengakibatkan halaman blog berambah panjang.
Ada trik sederhana agar kolom komentar facebook tampil di blog, tapi tidak memakan banyak tempat, karena diletakkan berdampingan dengan kolom komentar bawaan blogger.
Untuk memasang kolom komentar facebook dan blogger berdampingan, yang harus dipersiapkan yaitu, ID facebook kamu dan ID aplikasi facebook. Bagi yang belum mempunyai ID facebook bisa mendapatkannya dengan mengikuti cara yang saya tulis DISINI (klik langsung untuk melihat).
Sekarang kita langsung pada cara memasangnya :
1-Login ke akun blogger
2-Pilih blog yang ingin dipasang komentar facebook
3-Klik Template dan lanjutkan..
4-Edit HTML dan jangan lupa untuk centang Expand Widget Templates.
5-Cari kode ]]></b:skin> (tekan F3 untuk mempermudah pencarian kode HTML nya)
6-Letakkan kode berikut ini diatas kode ]]></b:skin>.
.comments-page { background-color: #f2f2f2;}7-Lalu cari kode <head> masukkan kode ini dibawah kode <head>, kalau saya sendiri meletakkannya dibagian paling bawah meta. Berikut kode yang harus dipasang.
#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;}
<meta property="fb:admins" content="ID Facebook"/>Ganti yang berwarna biru dengan ID facebook dan App ID facebook kawan sedusun. Caranya lihat disini : Cara Agar Komentar Facebook Di Blog Ada Pemberitahuan.
<meta property="fb:app_id" content="App ID"/>
8-Cari kode </head>, lalu letakkan kode berikut ini diatasnya
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>9-Lanjutkan dengan mencari kode <div class='comments' id='comments'>. Biasanya didalam template akan terdapat dua kode <div class='comments' id='comments'>.
<script src='http://code.jquery.com/jquery-latest.js'/>
<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>
10-Letakkan kode berikut ini dibawah dua kode <div class='comments' id='comments'>. (Pasang dibawah kode <div class='comments' id='comments'> yang pertama dan kedua)
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>Angka 2 menunjukkan jumlah komentar yang tampil, sedangkan angka 400 menunjukkan ukuran lebar kolom komentar facebook. Ganti atau sesuaikan dengan keperluan kawan sedusun.
<img class='comments-tab-icon' src='https://s-static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<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='https://lh5.googleusercontent.com/--vu5gE3yh1E/UA333Ytm5hI/AAAAAAAAAnM/nbi9p0of21o/h120/favicon.ico'/> <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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Untuk mempermudah mencari dua buah kode <div class='comments' id='comments'>, tekan F3, tuliskan kode tersebut. Tambahkan angka 1 di belakang kode yang dicari tadi (contoh : <div class='comments' id='comments'1>), dan langsung letakkan kode komentar facebook dibawah kode yang ditemukan pertama. Kembali ke pencarian menggunakan F3 tadi dan cari <div class='comments' id='comments'>. Letakkan kode komentar facebook. Dan kembali lagi ke kolom pencarian menggunakan F3, cari <div class='comments' id='comments'1>, hapus angka 1 dan klik "Save Template".
Selesai, bila semua langkah diikuti dengan benar dan kolom komentar facebook belum juga tampil di blog kawan sedusun. Tutup dulu browser, atau log out sekalian. Buka kembali/login ke akun blogger. Buka blog yang sudah dipasang komentar facebook berdampingan dengan komentar blogger/blogspot. Di kolom komentar sudah tampak di halaman blog kawan sedusun, lengkap dengan pemberitahuan bila ada pengunjung yang memberi komentar melalui akun facebook.
Sekedar tambahan : Bila kawan sedusun memang sudah niat ingin memasang komentar fabeook yang berdampingan dengan kolom komentar blogger. Baca dan ikuti cara diatas disetiap langkahnya. Akan lebih baik jika sambil membaca caranya, kawan sedusun sambil praktek di blognya. Selain menghindari ada langkah yang terlewat, cara ini juga efektif untuk mempercepat proses pemasangan kolom komentar facebook di blog kawan sedusun.
Semoga tulisan saya bisa dipahami dengan mudah dan bisa bermanfaat untuk kawan sedusun semuanya.
Description: Membuat dua pilihan komentar di blog, facebook dan blogger dengan posisi berdampingan dan Rating: 5
Kok gak bisa ya, padahal udah bener nerapinya, apa yang salah ya
BalasHapusapa templetasnya yg gak bisa?
Apa karena related post ada disitu ya?, soalnya ane belum pernah pasang di blog yang sudah ada related post di bawah artikel duluan.
Hapusterima kasih tutornya, bahkan sudah saya ikuti mulai dari 2 postingan sebelumnya, cuman terdapat satu kendala kawan, tampilan comment facebook di blog saya jadi 2 tempat, yg satu berdampingan dengan comment blog, yang satunya tampil di bawahkeduanya, gimana caranya untuk hilangkan yang didibagian bawah? mohon pencerahannya.
BalasHapusKemungkinan kode script komentar facebooknya yang dahulu (artikel pertama) tidak dihapus. Jadi hapus dulu kode yang dulu
Hapusok makasih kawan boss, sudah beres,
Hapusboss, kok hilang lagi ya comment fb nya? padahal aku lihat di scriptnya masih ada ? apakah pengaruh dari saya coba2 ganti template yah?
HapusBanyak faktor yang bisa menyebabkan tidak tampil gan. Bisa karena ada script yang kurang, penempatan script yang melenceng, chace kompi, dan juga koneksi. Bila sudah yakin scriptnya lengkap n terpasang tepat, nggak perlu bingung, tutp browser, atau log out dulu, kemudian buka kembali. Semoga bisa membantu
HapusApa emang gak bisa ya, kalo sudah ada releated post bawaan dari tempelatny?
BalasHapuscoba saya utak atik dulu, sebelumnya terimakaish gan...hehehehe
sama-sama gan, moga berhasil utak atiknya
Hapuscoba sebentar gan
BalasHapusmau nanya gan, facebook end bloge ga sejajar, malahan diatas dan dibawah mohon di bantu http://ada-lintang.blogspot.com
BalasHapusKalau hasilnya tidak berdampingan kemungkinan besar penempatan kodenya yang tidak tepat. Cek lagi penempatannya yang benar dan ikuti caranya lengkap seperti tertulis di artikel
Hapusterimakasih sukses
BalasHapusmangga di tengok
berhasil.terimakasih sob!
BalasHapusgan aane berhasil c cuma kok jadi dua yah???,,,coz dlu template ane punya komen fb cuman ilang,,trus abis pasang ini kok muncul lg yah??,,jdi nya komen fb 2,,gmn caranya minta solusi sob thanks
BalasHapussolusi terbaik menurut ane sih ya cari kode/script komentar fb yang dulu ataupun yang sekarang dan hapus salah satunya
HapusThanks,, ane coba dulu sob.
BalasHapusThanks Mas Bro tutorialnya. Udah nongkrong diblog ane
BalasHapusterimakasih gan
BalasHapusSaya baca artikel ini sambil praktek...!
BalasHapusHasilnya: "SUKSES...!" Trims Bro..
alhamdulillah, berhasil mas...., mantap btul nih :)
BalasHapusdah praktek di http://alhabibi89.blogspot.com/
thanks a lot (y)
Alhamdulillah sukses gan :)
BalasHapushttp://sotosop-tutorial.blogspot.com/
Cobain dulu ya mas.
BalasHapusGan, koo ikut muncul juga pada halaman statis ya,,,,,,
BalasHapusGimana ni gan cara ngilanginnya biar gak ikut muncul pada halaman statis?
nais info gan
BalasHapusThanks gan... Kunjungan balik ya,
BalasHapusartikel ini yg saya cari, sy sendri emang kesulitan juga nyari kata kunci utk judul artikel ini, so thank you for nice info..be a smartest blogger
BalasHapusOm abi , mau nanya ni. kan udah di pasang tu koment fb& blog berdampingan. tp menu drop down jd g aktif , terus gmn solusinya ? soalnya diatas kode ]] ada script punya menu drop downnya. apa bisa kita buat 2 kode +]] lg ? hehe maaf banyak nanya , saya newbie. mohon pencerahanya. makasi sebelumnya :D jaya terus om !!
BalasHapusini yang saya cari , menggunakan teknik ini lebih efektif gan, makasih yah
BalasHapusnice ilmunya sob,,,,,,
BalasHapusbila berkenan kunjungi gubug kecil saya gan,, terima kasih
Dari sekian banyak tutorial membuat kotak komentar FB dan Blog. tutorial di blog ini la yang mantap dan tidak ngawur... shingga mudah difahami buat org yang "newbie" seperti saya ini... dari sekian puluh (mungkin lebih dari 30) tutorial sudah saya coba dan selalu gagal. ketika mencoba tutorial ini, waw... langsung berhasil terimakasih mas bro.....
BalasHapusTutorial yang mantap, akhirnya berhasil juga membuat komentar FB berdampingan dengan komentar blog, padahal sudah mencoba lebih dari 30 tutorial semuanya gagal.. terimakasih banyak buat admin blog ini. semoga Yang Maha Kuasa selalu melindunginya... mampir ke sini ya : http://sdnegeri70.blogspot.com/
BalasHapusTerima kasih Pak Kemas dan juga semua yang sudah berkomentar atas apresiasi dari apa yang saya tulis diatas. Semoga mudah dipahami dan bisa membantu. Jika ada yang kurang bisa dipahami harap di maklumi saja mas/mba' gan, maklum... sayanya juga masih perlu banyak belajar. Dan saya mohon maaf juga jika tidak bisa menjawab semua pertanyaan ataupun ucapan kepada saya satu persatu. Kebetulan lagi ada kesibukan offline jadi jarang online.
BalasHapusSalam sukses untuk semuanya
gan, ane udah ikutin smua langkahnya, bisa,
BalasHapustapi yg jadi masalah kok comment count fb di blog ane 0 mulu gan, padahal udah ada yg komen.
klo di blog agan kan gk demikian. solusinya gmna yah gan?
tampilannya gk kyak gini,, kolomnya cuma berbaris doank http://princesekhye.blogspot.com/
BalasHapus