Cara membuat kotak komentar facebook di Blogger
Assalamualakum. wr.wb
ganti YOUR ID FB PROFILE dengan App ID sobat. Langkah selanjutnya adalah memasukkan kode CSS dibawah ini pada template. cari kode #comment atau .comment (gunakan ctrl+f) kemudian copas kode dibawah ini tepat diatasnya.
Wassalam.
Pada postingan ini, sebenarnya saya akan menulis kelanjutan dari postingan saya sebelumnya. yaitu Cara mudah membuat Aplikasi di Facebook, dan sekarang saya akan menulis artikel tentang Cara Membuat Kotak Komentar Facebook di Blogger.
gambar di atas adalah sedikit penampakan dari komentar facebook yang ada di blog ini. dan untuk cara pemasangan nya silahkan sobat ikuti langkah langkah sebagai berikut :
Kali ini kita akan memasukkan tiga jenis kode dari developer facebook. sebelumnya pastikan sobat sudah mengetahui App ID dan ID facebook sobat. untuk mendapatkan App ID caranya bisa dilihat pada postingan saya sebelumnya, klik disini. dan bagi sobat yang belum mengetahui ID fb nya, silahkan ikuti tutorialnya disini.
Untuk berjaga-jaga simpan lah App ID dan ID facebook sobat di Notepad agar nanti mudah mencarinya saat dibutuhkan, nah untuk Langkah pertamanya Kita akan memasukkan kode fbml facebook ke template blog. caranya :
Sebelumnya jangan lupa untuk mendownload terlebih dahulu template sobat. agar jika terjadi kesalahan kita dapat mengembalikannya seperti semula lagi. kemudian masuk ke akun blogger sobat kemudian pilih Template kemudian pilih Edit html.
Pada Edit HTML cari kode <html (gunakan ctrl+f untuk memudahkan pencarian) kemudian masukkan kode berikut setelahnya.
xmlns:fb='http://www.facebook.com/2008/fbml'
copy code diatas kemudian paste-kan setelah kode <html .contoh nya :
<html xmlns:fb='http://www.facebook.com/2008/fbml'
kemudian pilih save untuk menyimpan perubahan. untuk langkah selanjutnya yaitu memasukkan kode open graph protocol facebook pada template blog. pada edit HTML. carilah kode <b:skin> (gunakan ctrl+f untuk mempermudah) kemudian pastekan kode berikut tepat diatas nya.
<b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='BLOG NAME' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='YOUR APP ID' property='fb:app_id'/> <meta content='YOUR ID FB PROFILE' property='fb:admins'/> <meta content='article' property='og:type'/>
Silahkan sobat ganti item yang berwarna merah. BLOG NAME diganti dengan Nama Blog sobat, YOUR APP ID ganti dengan App ID Aplikasi yang telah dibuat sebelumnya, caranya bisa dilihat pada postingan sebelumnya. lihat disini. kemudian YOUR ID FB PROFILE ganti dengan ID facebook sobat, bagi yang tidak tahu caranya silahkan lihat disini
Kemudian Klik Save untuk menyimpan perubahan.
Langkah berikutnya adalah memasukkan kode SDK(Software Development Kit) dari facebook developer, caranya Masih pada menu Edit Html. kemudian cari kode <body> kemudian copas kode dibawah ini tepat dibawah nya.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
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);
}());
<fb:comments/>
</script>
Silahkan ganti tulisan YOUR APP ID dengan App ID sobat. kemudian klik Save.
Nah, sampai disini kita sudah berhasil mengintegrasikan Aplikasi facebook yang kita buat dengan Blogger, artinya kita sudah bisa memoderasi komentar yang masuk melalui aplikasi facebook tsb. tapi komentar facebook nya masih belum muncul di sebelah kotak komentar Blog kita, nah untuk memunculkan kotak komentar fb di blog, langkah selanjutnya adalah :
1. Masuk ke Akun Blogger, pilih menu Template kemudian Edit Html.
2. (gunakan ctrl+f) kemudian cari kode <div class='comments' id='comments'>
Catatan : Kalau pada template sobat terdpat dua kode yang seperti diatas maka coba pilih kode yang kedua, jika gagal pilih kode yang pertama. contoh kasusnya pada template saya ada dua kode <div class='comments' id='comments'> nya, saya pilih kode yang pertama ternyata gagal. kemudian saya pilih kode yang kedua dan berhasil :)
kemudian paste kan kode dibawah ini tepat diabawah kode diatas.
<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='2' width='400'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'>
Silahkan diganti tulisan yang berwarna biru sesuai keinginan sobat, angka 2 adalah jumlah komentar default yang akan ditampilkan di blog. sedangkan 400 adalah lebar dari kotak komentar tsb.
Langkah selanjutnya, masih pada Edit Html. silahkan cari kode </head> (gunakan ctrl+f) kemudian pastekan kode dibawah ini tepat diatasnya.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFILE' 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 YOUR ID FB PROFILE dengan App ID sobat. Langkah selanjutnya adalah memasukkan kode CSS dibawah ini pada template. cari kode #comment atau .comment (gunakan ctrl+f) kemudian copas kode dibawah ini tepat diatasnya.
.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: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
Kemudian Klik Save. Selesai. sekarang silahkan coba test komentar pada salah satu Postingan blog sobat, kemudian lihat hasilnya. kalau berhasil hasilnya seperti ini :
Selamat, sekarang tampilan komentar di blog akan terlihat lebih keren dengan adanya komentar fb dan blogger bersebelahan :) jika ada yang gagal silahkan ikuti lagi langkah-langkahnya dari awal. mungkin ada langkah-langkah yang gagal/tertinggal.
Sekian Postingan Cara membuat kotak komentar facebook di Blogger. Terimakasih sudah berkunjung di blog ini. Jangan Lupa Komentar nya ya sob :)
Wassalam.
Posted By : Rinaldi Rizki Ananda
Categories:
Tips Blogging
Terima kasih artikelnya. Telah saya coba untuk membuat komentar facebook di blog, dan berhasil,, mantap banget.... salam sukses selalu..
BalasHapussama-sama mas, thanks atas kunjunganya
Hapus