Ini adalah fitur yang paling ditunggu oleh pengguna blogger. Sekarang mari kita melakukannya, saya tahu bahwa Anda pasti ingin mencoba menambahkannya ke blog blogger, tAnda akan melihat bagaimana cara menambahkan kotak tersebut dengan mudah dan 100% berhasil. Tetapi harap berhati-hati dan memperhatikan semua rincian yang ada.
Langkah 1. Nonaktifkan Default Komentar.
Hal pertama yang harus Anda lakukan adalah menonaktifkan komentar default blogger karena Anda tidak ingin memiliki 2 bentuk komentar.
Ke account blogger Anda, navigasikan ke Pengaturan>> Komentar>> pilih Sembunyikan, kemudian gulir ke bawah dan klik Simpan.
Ke account blogger Anda, navigasikan ke Pengaturan>> Komentar>> pilih Sembunyikan, kemudian gulir ke bawah dan klik Simpan.
Langkah 2. Ciptakan Facebook App ID.
Sekarang Anda harus menciptakan facebook app id Anda sendiri, kunjungi saja facebook developers.
Isi Nama Situs dengan blogspot.com dan isi URL Situs dengan alamat blog anda, kemudian klik Buat Aplikasi.
Pada halaman berikutnya, akan terlihat ID Aplikasi anda, salin atau copy ID tersebut, karena akan diperlukan pada langkah selanjutnya.
Langkah 3. Menambah kode di template
Anda harus menambahkan kode berikut ke template blogger Anda untuk memastikan bahwa kotak komentar akan berfungsi untuk blog Anda. Di langkah ini kita akan menambahkan kode berikut :
- xmlns attribute
- SDK script
- Open Graph protocol tags
- Adding the xmlns attribute :
Silahkan buka account blogger Anda lagi, dan arahkan ke, layout>> edit>> html dan centang Expand Widget Templates, temukan kode berikut :
<html
Anda akan menemukannya di atas kode Anda pada baris kedua atau ketiga, lalu tambahkan kode berikut :
xmlns:fb='http://www.facebook.com/2008/fbml'
Anda harus memasukkan spasi sebelum dan sesudah nya, contoh :
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >
- Adding the SDK script Code :
<body>
Kemudian tambahkan kode berikut :
<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);
}());
</script>
Jangan lupa untuk mengubah YOUR APP ID untuk id app Anda (Anda sudah mendapatkannya pada langkah sebelumnya).
- Adding the Open Graph protocol tags:
<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='MY-SITE-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-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
Dan ubah text yang berwarna berikut :
Ganti MY-SITE-NAME dengan yang Anda inginkan muncul bila pengguna menyukai halaman.
Ganti http://google.com/…/blogger_logo.gif dengan logo blog Anda, atau menghapus semua tag jika Anda tidak menginginkannya.
Ganti YOUR-APP-ID dengan nomor ID APP Anda.
Ganti YOUR-FACEBOOK-PROFILE-ID dengan user ID Facebook anda.
Setelah melakukan perubahan ini, tambahkan kode di atas sebelum :
</head>
Sekarang kita sudah selesai menambahkan kode facebook untuk template Anda, jangan menyentuh apa pun dan lanjutkan ke langkah berikutnya.
Langkah 5. Menambahkan Kotak Komentar
Cari kode berikut :
<data:post.body/>
Kemudian tempelkan kode berikut :
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7yZR0PzzjSMoFTuSVePSDcXUrm4OwaiE2dlzLuClu70-hjAAZHr0G9-BvEVJWX7g1l7DZ5mvcSZWds1twZwNw4QP3n5OpcJ4OE73mYmw3inMaWeNIrMHohwCCoz13FU0j8iygfWHdjUo/' width='331'/></p>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>
Untuk mengubah lebar kotak komentar Anda, silakan ubah 450 sesuai yang anda inginkan ( dalam pixel ).
Klik Simpan Template, sekarang lihat blog Anda.
Catatan, jika Anda telah memiliki tombol Facebook Like/Share yang sudah terpasang di blog, sebaiknya anda menghapusnya terlebih dahulu sebelum menerapkan tutorial ini.
Sumber : http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/
Tidak ada komentar:
Posting Komentar