Cara Mudah Membuat Comment Box Facebook di Blogger

Home » Tutorial Blog » Cara Mudah Membuat Comment Box Facebook di Blogger

Cara Mudah Membuat Comment Box Facebook di Blogger

Posted by Unknown September 01, 2013 4 comments

Cara Mudah Membuat Comment Box Facebook di Blogger - Cara Membuat Comment Box Facebook di Blogger,bersebelahan dengan komentar blog. Membuat komentar dengan tampilan yang menarik, akan memancing pengunjung untuk berkomentar di blog Anda. Hal ini sudah tidak menjadi hal yang baru, dan telah banyak yang memakai dengan aplikasi plugin tambahan Facebook ini. Mengapa banyak orang yang ingin membuat kotak komentar facebook di blognya? Salah satu faktor utama adalah untuk meningkatkan traffik pengunjung bagi blog mereka.
Facebook memang sebagai Social Media sedangkan Blogger adalah Pembangun Blog dengan platform gratis. Hubungan pembuatan komentar Facebook di Blogger, bukan untuk media promosi di social media melainkan menghubungkan konektivitas antara social media tersebut dengan blog kita. Sehingga, blog kita mendapatkan lalu lintas yang besar dengan facebook. Untuk cara pembuatan kotak komentar facebook ini cukup mudah dan 100% berhasil. Agar blog Anda lebih terkonektivitas dengan facebook, langkah pertama adalah dengan membuat aplikasi di facebook terlebih dahulu. Tetapi, bagi Anda yang hanya ingin mengarahkan kotak komentar sebagai Anda yang menjadi adminnya tidak perlu membuat aplikasi facebook ini.

Cara Mudah Membuat Kotak Komentar Facebook di Blog :
1. Pertama tentu anda harus masuk akun blogger yg ingin anda kasih kotak komentar facebook . Lalu pilih Template - Edit Html

2. Klik pada bidang kotak yang berisi kode-kode template anda, letakkan pointer dimana saja.

3. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F

4. Letakan kode CSS di bawah tepat di atas kode ]]></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: #C0DFF5;}.inactive-select-tab { background-color: #f2f2f2;}

5. Setelah itu cari lagi kode </head> kemudian letakkan kembali kode di bawah ini tepat di atas kode </head> :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='siicunn' 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 kata ID FB Sobat dengan id facebook anda yang terlihat di browser. Contoh : http://facebook.com/siicunn maka masukkan siicunn saja pada kode ID FB Sobat tadi.

6. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi.
Silahkan cari kode <div class='comments' id='comments'> Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, bagi pemula biasa akan janggal mencari yang mana yang terakhir . anda bisa memanfaatkan balok scroll di sebelah kanan kotak edit html anda lalu letakan script dalam kotak di bawah ini tepat di bawah kode <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='http://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='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='500'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments Design by <b><a href='http://facebook.com/siicunn' style='text-decoration:underline; color:#fff;' target='_blank' title='Facebook Admin'>Jon Pheter</a></b></div> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'>

Lalu, Klik Simpan Template dan lihat hasilnya. Jika Kotak Komentar Facebook belum terlihat juga mungkin template tidak memiliki script kode yang support dengan facebook.
Kemudian Simpan Template Anda.

Note :Saya tidak bertanggung jawab atas kerusakan/crash karena terjadi kesalahan pribadi dalam penambahan widget yang anda lakukan.Sebelum mencoba kode HTML/CSS diatas ,ada baiknya anda mem-backup template anda terlebih dahulu untuk menghindari hal yang tidak di inginkan.

Nah itulah tadi mengenai Cara Mudah Membuat Comment Box Facebook di Blogger , semoga dapat bermanfaat bagi sobat-sobat semua , Jika artikel-artikel yang kami terbitkan membantu silahkan tinggalkan komentar ataupun +1 anda (seberapa penting +1 anda buat kami) pada artikel ini dan sobat juga dapat berlangganan artikel dengan siic unn.b logspot.com baik itu melalu RSS Feed ataupun melalu akun email anda untuk mendapatkan pemberitaan postingan lebih cepat dari yang lainnya melalui email anda.