Bagi anda yang ingin memasang Facebook Comments Box untuk Blogger atau Blogspot, anda bisa mempraktekannya menggunakan tutorial berikut ini. Comment blog ini bisa di pasang di berbagai CMS blog anda yang mungkin akan membuat blog anda lebih menarik dan lebih familiar dengan facebook. with Facebook Comments Box untuk Blogger - Blogspot, Facebook users on your blog can comment on your content or news, post those comments to their profiles asap, and share them with their friend on Facebook. The Comments Box allows non-Facebook users to make comments on your site as well. And via our APIs, you can access related comments made on Facebook as well to bring the conversation together. Langsung ajah ya kita mulai step by stepnya untuk bisa memasang Facebook Comments Box untuk Blogger - Blogspot. Sebaiknya simpan doloe (Download Template) template anda biar kalo ada kesalahan pemasangan bisa di Load lagi hasil simpanan awal. :
Step 1 : Anda bisa menghilangkan menu comment pada blogspot anda (Disable) atau non aktifkan default comments
>> setting (pengaturan pada Blogspot) >> Comments >> Pilih options Hide
* Sehingga form komentar standart blogger tidak muncul .
>> setting (pengaturan pada Blogspot) >> Comments >> Pilih options Hide
* Sehingga form komentar standart blogger tidak muncul .
Step 2 : Buat sebuah aplikasi di Facebook anda dengan masuk ke link
Jika anda baru mendaftar pilih menu Buat aplikasi atau Create Aplication di bagian Kanan Atas.
Isi nama aplikasi dan url blog anda yang akan anda pasangkan aplikasi form komentar dari facebook
* gunakan / (slass) di akhir url (biasanya kalo ngga dikasih jadi ngga bisa) kemudian Pilih Agree dan Create Application
click to enlarge
kemudian pilih (on the left tabs-list/ menu tab samping kiri), akan muncul menu seperti gambar di atas :
Pilih Connect * ( terhubung = jika anda menggunakan bahasa indonesia)
- isi connect url dengan dengan nama blog anda , contoh :
http://bloganda.blogspot.com/ kalo domain sendiri bisa ditulis
http://www.domainanda.com/
- isi Base Domain dengan blogspot.com& kalo domain sendiri berarti tulis ajah
domainanda.com
kemudian klik Agree dan save changes.
Jangan lupa menyimpan / copy Application ID anda (bila perlu simpan di notepad, supaya tidak bolak balik pada saat menyeting :
Step 3 : Saatnya masuk ke Blogger Dashboard anda, pada Layout atau Design - edit html, centang expand widget templates>
cari kode <html (* gunakan ctrl+F pada firefox untuk mencari)
tambahkan kode ini setelah kode <html
Jangan lupa menyimpan / copy Application ID anda (bila perlu simpan di notepad, supaya tidak bolak balik pada saat menyeting :
Step 3 : Saatnya masuk ke Blogger Dashboard anda, pada Layout atau Design - edit html, centang expand widget templates>
cari kode <html (* gunakan ctrl+F pada firefox untuk mencari)
tambahkan kode ini setelah kode <html
xmlns:fb='http://www.facebook.com/2008/fbml'
sehingga kodenya menjadi seperti ini
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..
2009/gml/expr' >
Step 4 : Cari kode <body>
kemudian pastekan kode di bawah ini setelah kode <body>
kemudian pastekan kode di bawah ini setelah kode <body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Id Aplikasi 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>
* Jangan lupa mengganti kode Id Aplikasi anda dengan Id App anda yang terdapat pada Aplikasi yang anda buat.
Step 5 : cari kode </head>
paste kode berikut sebelum </head>
Step 5 : cari kode </head>
paste kode berikut sebelum </head>
<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='NamaBlogAnda' property='og:site_name'/>
<meta content='IdAppAnda' property='fb:app_id'/>
<meta content='ProfileIdAnda' property='fb:admins'/>
<meta content='article' property='og:type'/>
Jangan lupa mengganti tulisan:
- Nama Blog Anda : isi dengan nama blog anda (http://bloganda.blogspot.com) atau http://domainanda.com
- idAppAnda : isi dengan kode Aplikasi Anda.
- Profile Id : isi dengan profil facebook anda
* Untuk mengetahui id profile kita tinggal klik menu profile pada facebook kita
** misal "http://www.facebook.com/home.php?#!/profile.php?id=670358608" berarti profile kita adalah "670358608"
Step 6 : cari kode
jika anda menemukan dua kode yang sama pilihlah kode yang kedua .
- pastekan kode berikut setelah <data:post.body>
</data:post.body>
- Nama Blog Anda : isi dengan nama blog anda (http://bloganda.blogspot.com) atau http://domainanda.com
- idAppAnda : isi dengan kode Aplikasi Anda.
- Profile Id : isi dengan profil facebook anda
* Untuk mengetahui id profile kita tinggal klik menu profile pada facebook kita
** misal "http://www.facebook.com/home.php?#!/profile.php?id=670358608" berarti profile kita adalah "670358608"
Step 6 : cari kode
jika anda menemukan dua kode yang sama pilihlah kode yang kedua .
- pastekan kode berikut setelah <data:post.body>
</data:post.body>
<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'
width='470'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc;
font-size:10px; padding:3px;width:100%;'> </div></b:if>
Width='470' bisa anda sesuaikan sendiri dengan template, karena 470 adalah ukuran lebar main-wrapper (lebar postingan anda)
Kemudian Save Templates. SELESAI. Mudah bukan dan sekarang anda bisa menggunakan Facebook Comments Box untuk Blogger - Blogspot
Kemudian Save Templates. SELESAI. Mudah bukan dan sekarang anda bisa menggunakan Facebook Comments Box untuk Blogger - Blogspot
0 comments:
Posting Komentar