Welcome to my blog
go to my homepage
Go to homepage

Laman

Google Translate
Arabic Korean Japanese Chinese Simplified Russian Portuguese English French German Spain Italian Dutch

Rabu, 13 Oktober 2010

 Memasang kotak komentar facebook di blog

Langkah Pertama 

Login dengan account facebook juragan. Setelah itu agan bisa langsung membuat aplikasinya di facebook developersLangsung masuk gaan... dimana nantinya juragan bisa mendapatkan APP ID milik sendiri.

Setelah masuk pada halaman pertama (lihat gambar dibawah ini), masukan nama aplikasi yang ingin agan buat. Sebagai contoh, saya beri nama aplikasi saya dengan nama 'Kotak Komentar'. Lalu klik 'setuju' dan klik 'Buat aplikasi baru'.


Pada halaman kedua, agan pastilah melihat penampakan seperti gambar seperti dibawah ini. Di kolom pertama, juragan bakal menemukan 'Kode aplikasi' atau 'APP ID' yang sangat berguna bagi nusa dan bangsa. Benarkah?? Silakan agan pikir sendiri deh.. hehhehe.. dan jangan lupa copy kode tersebut di notepad gan supaya gak digondol maling.

Setelah itu ketik alamat blog juragan di kolom URL Situs. Jangan lupa dikasih garis miring di akhirannya. Sebagai contoh: http://nganggurlagi.blogspot.com/


Abis ntu, penceet gaaaaaaaan..................: Simpan Perubahan

Langkah Kedua

Setelah langkah pertama terselesaikan, silakan kembali ke akun blogger juragan dan masuk ke menu Edit HTML. Centang "Expand Template Widget" dan jangan lupa download templatenya untuk penanggulangan pertama bila terjadi kesalahan.

Lanjutkan...

Cari kode <body> kemudian tambahkan script ini di bawahnya

<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 dengan APP ID yang tadi juragan copy di notepad (bukan kopi tubruk loh..).

Lalu tambahkan script di bawah ini sebelum kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='YOUR-APP-ID' property='fb:app_id'/>
<meta content='Profile-ID-Facebook' property='fb:admins'/>
<meta content='article' property='og:type'/>


Ganti tulisan MY-SITE-NAME dengan nama blog juragan, juga ganti APP ID serta Profil ID masing-masing.

Jika sudah, cari kode <data:post.body/> dan tambahkan script ini tepat dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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><a href='http://nganggurlagi.blogspot.com/2010/09/cara-memasang-kotak-komentar-facebook.html' target='_blank'> dika design</a></b></div>
</b:if>



Untuk mengubah lebar kotak komentarnya, silakan ubah angka 450 dengan yang agan inginkan. Kemudian save templatenya gan (biar macho) dan silakan juragan lihat sendiri hasilnya. Dan demikianlah adanya. Salam

0 komentar:

Posting Komentar