Setelah Sebelumnya saya mengajak anda Cara Membuat "Facebook Send Button" di Blogger [Blogspot] serta TweetBox Di Bawah Postingan Anda, Kini saya akan mengajak anda membuat Kotak Komentar Facebook Di Blog Anda.Bentuknya seperti Gambar Diatas, Tertarik Membuatnya?
Silahkan Simak Tutorial Berikut:
Langkah 1.
- Pertama login ke akun blogger anda.
- Kemudian buka facebook anda, login terlebih dahulu, lalu masuk ke aplikasi facebook developers
- Kemudian buat nama aplikasi terlebih dahulu, Isikan nama Aplikasi Dengan Kotak Komentar atau lainnya setelah itu, klik tombol " Buat Aplikasi baru (create new aplication)"
Jika Sudah, Save Dan Ambil Applications ID'nya(Kode Aplikasi)Jika Sudah, masuk Ke Akun Blogger Anda Masing-masing >> rancangan(Design) >> Edit HTML >> Centang Expand Template Widget
Jika Sudah, Cari Kode Berikut:
<body>
Setelah Ketemu, Masukkan Kode Dibawah ini tepat Dibawah Kode Tersebut
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ' APP-ID anda ',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Kemudian, Cari Kode <b:skin><
Silahkan klik untuk memperbesar agar dapat lebih jelas terlihat, Jadi saya jelaskan lagi, jika Kotak Komentar Facebook ini tidak tayang pada blog anda, bukan karena Script yang saya berikan salah namun bisa jadi karena memang penempatan script ini pada masing-masing template berbeda, dan maaf karena saya tidak bisa menjawab pertanyaan-pertanyaan anda satu persatu dengan segera karena saya pun memiliki keterbatasan waktu dan harus kerja :)
Update
Pasca pembaharuan Facebook Comment atau Kotak Komentar Facebook yang baru-baru ini dilakukan oleh Tim Developer aplikasi mereka, ada satu parameter yang akhirnya ikut diganti oleh mereka yang membuat Aplikasi ini tidak dapat berjalan dengan baik di beberapa blog yang memasang Kotak Komentar facebook versi ini, untuk itu jika anda salah satu pengguna yang ikut terkena imbasnya, silahkan ganti parameter url menjadi href, untuk lebih jelasnya silahkan perhatikan perubahan yang saya sertakan dibawah ini:
Saat masih memakai Parameter url, sript dibawah kode <data:post.body/> Adalah:
<b:if cond='data:blog.pageType == "item"'><br/> <p align='left'><a href='http://dj-note.blogspot.com/' target='new'><img border='0'/></a></p><div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='450'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://dj-note.blogspot.com/' target='_blank' title='Facebook Comment'>Mau Pasang Kotak Komentar kayak Gini? Klik Disini</a></b></div></b:if><br/>
Sedangkan setelah memakai parameter href, sript dibawah kode <data:post.body/> Menjadi:
<b:if cond='data:blog.pageType == "item"'><br/> <p align='left'><a href='http://dj-note.blogspot.com/' target='new'><img border='0'/></a></p><div><fb:comments expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id' width='450'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://dj-note.blogspot.com/' target='_blank' title='Facebook Comment'>Mau Pasang Kotak Komentar kayak Gini? Klik Disini</a></b></div></b:if><br/>
Dan sebagai catatan, di beberapa template blog, parameter yang lama pun masih bisa digunakan dan tidak akan mengalami masalah apapun sekalipun tidak diganti, tapi untuk beberapa template blog yang lain, jika tidak diganti anda akan menemukan kata 'href' no required tepat dibawah kotak komentar anda, jadi update kali ini bisa saya katakan sebagai optional, so jika parameter lama kotak komentar ini bermasalah di template blog anda silahkan diganti, dan jika tidak terjadi masalah apapun, silahkan didiamkan saja :)
Sumber
0 comments:
Post a Comment