Thursday, 4 November 2010

Macamana Nak Letak Facebook Comments Box ke dalam Blog Anda


Pertama sekali, pergi ke "Setting Comments" di Blog edit anda kerana kita tidak perlu dua form komen, tetapi jikalau anda perlu ianya tiada masalah.

Caranya sign in akaun Blog anda, kemudian pergi ke 'Setting' tab, kemudian ke 'Comment' menu, dan dalam comments klik pada 'Hide', seterusnya scroll down dan klik SAVE.

Langkah kedua pergi ke Facebook App Id (Application on Facebook)

Anda perlu buat Facebook App Id anda sendiri, ianya mudah saja, pertama login Facebook akaun anda, kemudian ke Facebook Developers disini: Facebook Developers dan seterusnya 'Create New App', Enter nama application anda (terpulang pada anda nak bagi nama apa pun) dan klik ‘Agree’ dan seterusnya klik 'Create Application' sebagai contoh saya letak nama "Comments Form"
Anda akan lihat gambar seperti ini:
Gambar 1(klik pada gambar untuk besarkan)
 
kemudian klik pada 'Web Site' tab (pada sebelah kiri list) dan isikan maklumat application anda:
Untuk URL Connected, jangan lupa letak / di akhir URL Blog anda, Contohnya: http://wrbizonline.blogspot.com/

kemudian enter Site Domain: blogspot.com jikalau anda menggunakan blogspot. Dan seterusnya tekan Save Changes.
Gambar 2(klik pada gambar untuk besarkan)

kemudian klik Next untuk dapatkan No Application, copy Application ID tersebut ke notepad atau wordpad bagi memudahkan langkah seterusnya.

Langkah seterusnya: tampal kod kedalam Blog template.

Anda perlu copy kod kedalam blog template anda supaya comment box dapat ditayangkan.
Caranya pergi ke Blog Account dan terus ke Layout-Edit HTML, tick pada 'Expand Template Widged' tetapi jangan lupa Download dahulu Template blog anda itu sebagai backup in case of errors!


kemudian cari kod ini di HTML kod blog anda:
<body>


dan tampalkan kod ini dibawahnya:



<div id='fb-root'/>

<script>

window.fbAsyncInit = function() {

FB.init({

appId : 'My 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>



Tukarkan ‘ My APP ID ' kepada APP ID Facebook Application yang anda dapat tadi.




kemudian cari kod ini pada HTML kod blog anda:
'</head>'


dan tampalkan kod ini dibawahnya:



<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 Blog Name' property='og:site_name'/>

<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>

<meta content='My APP-ID' property='fb:app_id'/>

<meta content='My Profile-ID-Facebook' property='fb:admins'/>

<meta content='article' property='og:type'/>





kemudian tukarkan;
My Blog Name: kepada nama Blog anda
My APP-ID: kepada APP ID anda
My Profile-ID Facebook: kepada Facebook Profile ID anda (klik pada gambar profile anda di facebook dan copy no ID nya di hujung alamat, contoh http://www.facebook.com/mamat tahir#!/album.php?profile=1&id=100000686551437)

Last step cari kod ini pada html blog anda: <data:post.body/>

Dan tampalkan kod ini di bawahnya:


<b:if cond='data:blog.pageType == "item"'><br/> <p align='left'><a href='http://wrbizonline.blogspot.com/2010/11/macamana-nak-letak-facebook-comments.html' target='new'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDs_FBs6X4s6oYxsqzQasI6Yp268N6-8xa7HPW9tBDGCB48PRYZLGUAo2liKqCjToIX9q65nq1xPB_4st71pg2VqIBI3LrbO-Gqmk31E_e6LF8aOD-IZk88SM9RLs1s1uMD_qtfQ07_A/s1600/comment.gif'/></a></p><div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='500'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b>  by <a http://wrbizonline.blogspot.com/2010/11/macamana-nak-letak-facebook-comments.html' target='_blank' title='Facebook Coment Form'>Facebook Comment Form , Want ?</a></b></div></b:if><br/>


Last sekali klik SAVE.

Itu sahaja, terima kasih :)

No comments:

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...