Fahri's Blog - Cara Membuat Kotak Komentar Facebook di Blogspot - Kita sebagai pengguna internet tentunya sudah tidak asing lagi mendengar kata blog, facebook ataupun twitter. Media-media social ini sering kita gunakan untuk keperluan pribadi kita. Misalnya saja blog, biasanya berisi artikel-artikel mulai dari kesehatan, pendidikan, otomotif, dan lain-lain. Di dalam blog tentunya kita juga bisa saling berkomunikasi antara owner/pemiliki blog dengan reader/pembaca. Akan tetapi, untuk dapat berkomunikasi di blog biasanya paling umum kita harus mempunyai akun google plus. Tentunya tidak semua orang mempunyai akun google plus. Maka dari itu, pada hari ini saya akan mengajarkan kepada Anda untuk membuat kotak komentar facebook di blog Anda, agar para pembaca yang tidak mempunyai akun google plus, bisa ikut berkontribusi di dalam blog Anda. Langsung saja ikutin langkah-langkah di bawah ini.
1. Login Facebook Anda terlebih dahulu
2, Setelah login, klik link ini >> https://developers.facebook.com/apps <<
3. Setelah itu klik bacaan Register Now
4. Setelah muncul jendela seperti di bawah ini, klik Selanjutnya
5. Silahkan isi nomor ponsel Anda di kotak yang tersedia. Lalu pilih yang "Send as Text". Nanti Anda akan mendapatkan kode untuk di masukkan ke dalam kotak yang ada bacaan "Kode Konfirmasi". Setelah mendapatkan kode tersebut, lanjut klik "Mendaftar"
6. Setelah berhasil mendaftar, tampilannya akan seperti di bawah ini. Lalu pilih Apps - Create a. New Apps
7. Akan tampil jendela seperti gambar di bawah ini. Untuk Display Name, isilah dengan nama blog Anda. Lalu pilih Kategori - Aplikasi untuk Halaman - Buat Aplikasi
8. Jika Anda melakukannya dengan benar, maka akan muncul tampilan seperti di bawah ini. Lalu pilih Settings - pada kolom contac email, isilah dengan email Anda - lalu klik Add Platform - Pilihlah yang "WEBSITE"
9. Untuk Site Url, isikan dengan Url blog Anda. Sedangkan kotak yang di bawahnya, kosongkan saja. Lalu Save Changes
10. Setelah semuanya selesai, Anda akan mendapat kode ID FB Anda. Selengkapnya lihat gambar di bawah ini.
Capek buatnya yaa?? hahaha ^^
Langkah di atas baru membuat ID FB yang akan ditempel di blog Anda. Untuk Javascipt Kotak Komentar Facebooknya, ikutin lagi ya langkah di bawah ini. Gak banyak kok hehe..
1. Login akun blogger Anda
2. Pilih Template - Edit HTML
3. Carilah kode ]]></b:skin> (Untuk mempermudah bisa menggunakan Ctrl + F)
4. Lalu masukkan kode di bawah ini, tepat di atas kode ]]></b:skin>
.comments-page { background-color: #FFFFFF;} #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;}
5. Jika sudah cari lagi kode </head> , lalu letakkan 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='ID FB Anda' 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>
6. Untuk tulisan yang saya merahkan bisa di ganti dengan ID FB yang sudah di buat tadi
7. Langkah terakhir adalah, cari kode <div class='comments' id='comments'>. Biasanya kode tersebut di dalam blog tidak hanya 1, tapi ada banyak. Jadi carilah kode tersebut yang paling terakhir. Jika Anda sudah menemtukan kode tersebut yang terakhir kali, lalu letakkanlah kode 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 by <b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b> </div> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'>
8. Lalu Simpanlah Template Anda. Jika Anda melakukannya dengan benar, maka akan muncul kotak komentar facebook di blog Anda.
Tambahan:
1. Jika kotak komentar facebook hanya muncul di beberapa positngan blog Anda, sedangkan yang lain tidak muncul, saya akan memberikan tutorial lainnya kepada Anda.
Selengkapnya >> Cara Cepat Memasang Kotak Komentar Facebook <<
*Pastikan Anda sudah menghapus terlebih dahulu script-script di atas yang sudah terlanjur Anda simpan pada template Anda*
Kunjungi Cara Membuat Facebook
Sekianlah artikel saya tentang Cara memasang kotak komentar facebook di blogger. Baca juga tutorial blog lainnya tentang "Cara Membuat Blockquote Keren di Blog"
0 Response to "Cara Mudah Membuat Kotak Komentar Facebook di Blog"
Posting Komentar