Cara membuat kotak komentar Facebook di blog

Santri Balaghy, dalam kesempatan kali ini akan berbagi trik menarik buat sahabat blogger sekalian. Cara membuat kotak komentar Facebook di blog. Ini merupakan salah satu trik yang mungkin terbilang unik dan juga diperlukan oleh sahabat blogger terutama mereka yang situsnya bukan hanya ditujukan untuk para blogger saja (situs SEO misalnya), akan tetapi situs yang bersifat umum seperti situs info, download aplikasi dan situs lainnya.

Kenapa harus memasang komentar Facebook?

Kalau muncul pertanyaan semacam ini, banyak alasan yang mendasari kita memasang komentar via facebook. Jawaban yang paling mendasar adalah sebagaimana kita ketahui bahwa facebook sebagai jejaring social bahkan anak remaja yang masih unyu-unyu pun punya akun facebook. Nah, sedangkan kita para blogger tentunya menginginkan situs blog kita dikenal banyak orang dan sebagai pemilik situs terbuka pastinya ingin situsnya mendapat komentar dari para pengunjung agar bisa lebih meningkatkan kualitas situs. Dengan memasang komentar via facebook inilah lebih memberikan kemudahan kepada para pengunjung agar bisa berkomentar menggunakan akun facebook.
Keuntungannya:

1. Blog lebih banyak yang berkomentar.
2. Dengan komentar facebook, secara otomatis komentar tersebut akan muncul pada dinding orang yang berkomentar.
3. Lebih mudah dikenal orang.

Nah, itu tadi sekedar intermission untuk memasang komentar facebook di blog. Selanjutnya langsung aja nih dia triknya:

Cara menambahkan komentar Facebook di blog

1. Login dan masuk ke menu Template - Edit HTML

2. Carilah kode </head> gunakan (Ctrl + F) untuk memudahkan pencarian

3. Setelah ketemu kodenya, masukkan kode di bawah ini tepat di atas kode </head>

<meta content='Facebook Profile ID' property='fb:admins'/> <meta content='Aplikasi Facebook ID' property='fb:app_id'/>

4. Selanjutnya cari kode ]]></b:skin> lalu copy dan paste kode CSS di bawah ini tepat di atasnya.

.comments-page{ background:#fff;} #blogger-comments-page { padding: 20px; display: none;border:1px solid orange;border-radius:5px;} #fb-comments-page{border:1px solid blue;border-radius:5px;padding:20px;margin-top:10px;} .facebook-tab { float: left;cursor: pointer;margin-right:2px;border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3093c7; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85)); background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85); background-image: -moz-linear-gradient(top, #3093c7, #1c5a85); background-image: -ms-linear-gradient(top, #3093c7, #1c5a85); background-image: -o-linear-gradient(top, #3093c7, #1c5a85); background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85); } .facebook-tab:hover {border:1px solid #1c5675; background-color: #26759e; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b)); background-image: -webkit-linear-gradient(top, #26759e, #133d5b); background-image: -moz-linear-gradient(top, #26759e, #133d5b); background-image: -ms-linear-gradient(top, #26759e, #133d5b); background-image: -o-linear-gradient(top, #26759e, #133d5b); background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b); } .blogger-tab {float: left;cursor: pointer;border:1px solid #ffc826; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #ffd65e; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffd65e), color-stop(100%, #febf04)); background-image: -webkit-linear-gradient(top, #ffd65e, #febf04); background-image: -moz-linear-gradient(top, #ffd65e, #febf04); background-image: -ms-linear-gradient(top, #ffd65e, #febf04); background-image: -o-linear-gradient(top, #ffd65e, #febf04); background-image: linear-gradient(top, #ffd65e, #febf04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04); } .blogger-tab:hover{ border:1px solid #f7b800; background-color: #ffc92b; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc92b), color-stop(100%, #ce9a01)); background-image: -webkit-linear-gradient(top, #ffc92b, #ce9a01); background-image: -moz-linear-gradient(top, #ffc92b, #ce9a01); background-image: -ms-linear-gradient(top, #ffc92b, #ce9a01); background-image: -o-linear-gradient(top, #ffc92b, #ce9a01); background-image: linear-gradient(top, #ffc92b, #ce9a01);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc92b, endColorstr=#ce9a01); }

5. Copy dan paste kode javascript di bawah ini di antara kode ]]></b:skin> dan </head> atau kalau bingung, pastekan aja di atas kode </head>

<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/> <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>

6. Langkah terakhir adalah cari kode <div class='comments' id='comments'> Kalu udah ketemu kodenya, silahkan copy-paste kode di bawah ini tepat berada di bawahnya dan selesai dech.

<div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Komentar Dari Facebook'> <fb:comments-count expr:href='data:post.url'/> Komentar di Facebook </div> <div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Komentar Dari Blogger'> <data:post.numComments/> Komentar di Blogger </div> <div class='clear'/> </div> <div class='comments-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <div align='left'> <a href='http://balaghyelrasyid.blogspot.com/2013/07/cara-menambahkan-komentar-facebook-di.html' target='blank'><small>Cara membuatnya</small></a></div> <fb:comments expr:href='data:post.url' num_posts='5' width='500'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'> <div align='left'> <font color='orange' size='4'><strong>Silahkan Tinggalkan Komentar Anda</strong></font></div> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitNh45JoAxFravWriOjJE1i6hkqYXnv4pv1gvKH5m7BwiGmPNvODXoSj608yHojVcuz4aQXLhoOxQgbTazGQ-xzu8tz5CbMNkYFI_rFaVn5Q548DMmmLIv2cm5JPxNRkTjN99rBYX3avg5/s1600/Blogger-icon.png'/>

Sekarang coba lihat tampilang blog sahabat, dan nikmati hasilnya.

Sekian dulu trik blogger tentang cara menambahkan kotak komentar facebook di blog. Jika info ini memberikan info yang sahabat cari, mohon jangan lupa Like dan Share ya.
Sebelum beranjak, kami ucapkan Selamat Mencoba!

Semoga bermanfaat,
Salam Sahabat Balaghy!

Sumber: seociyus