Tuesday, June 15, 2010

Tutorial : How To Add Facebook Comment Box To Blogs

Greetings everyone. Nowadays, facebook comment box are getting famous on blogs.. Byk org inginkan comment box dlm blog dorg masing2..hehe.. since I've been having a lot of requests and questions about putting facebook comment box on blog sidebars, so I've decided to make my very own first tutorial on how to put the FB comment box on our sidebar :-)
Ya la... dalam hidup ni, x baik kedekut ilmu.. betul x? hehehe..
P/S : Biarlah bahasa rojak, yang penting faham. 1Malaysia kan? hehe 

 jgn jelezz..you'll be having yours soon. hehe

 Siapa yang request ni? eh byk weh...yang boleh list down, miss hidayah, iza arm, fajratul aini n byk lagi..
Kepada Bro Aie, harap dapat terjawab jugak lpas baca tutorial ni... kalau masih ada problem, cari aku bro~

This tutorial uses blogger/blogspot blog for demo. However, it will also work with other blog or websites. Okay, here goes nothing~

Step 1: Visit Facebook developer page and then enter your blog name, blog URL and click on Create application.

Step 2: Pas tu dapat la benda mcm di bawah ni. Copy your App ID and paste it somewhere so u won't lost it (letak kt notepad pun ckup laa).


Step 3: Login to your blogger dashboard and go to Layout > Edit HTML . jgn lupa tick on 'expand widget templates' . tekan CTRL + F, then type in . You'll have something like this


Step 4: Copy code below and paste it under on your HTML template. Don't forget to change YOUR-APP-ID with your own APP ID. 

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Step 5: You are almost done. Copy the code below and put it on anywhere you want the comment box to be. You can change the width as you want. and you can change the number of posts to be shown. :-)
<fb:comments numposts="10" width="550"></fb:comments>

Step 6 : Refresh and walahhh~! Facebook comment box on your very own blog. hehe.

 Don't forget to drop some comments for feedback and help. Hope you'll be able to work everything out without a problem. Happy trying~!

Do you think that my tutorial is useful? If yes, do support :)
I will be posting more tutorials after this, only if this first tutorial dapat sambutan. hehe. take care guys :)

18 comments:

Azreen said...

thanks azreen for da tutorial :)

http://nurhidayahisa.blogspot.com/

Azreen said...

bagus :)

Azreen said...

smlm dh jumpa tutorial, tp ada yg tak jd..hari ni jadi pulak..nway, nice tutorial.. =)

Azreen said...

wahhh apek nk buat..thanks azreen

Azreen said...

Ok sekali buat je dah jadi,thanks....

Azreen said...

uihh da lama cari bende alah ni..thanks 4 sharing

Azreen said...

you're welcome Ryujimitsui :)

Azreen said...

dah jadi :)

Azreen said...

knp ade error invalid url pula? huhu

Azreen said...

dah buat..tp xleh sbb syuq pkai custom template :(

Azreen said...

tq..dah jadi dah.
http://miszsephia.blogspot.com

:clap:

Azreen said...

custom template? x leh? aku blom pnh cuba.. tp rasanya xda mslh...dpt support d semua jenis site.. asalkan ada Html.

Azreen said...

dah cuba & menjadi... thanks

Azreen said...

check here : http://www.kakyong.com

Azreen said...

erm...agak menarik gak ni bro....
aku ade wat satu page ni kat FB....
page blog aku...
aku xnak letak aku punye personal acc fb dlm tu...
aku nak yg page blog aku tu...
ko paham x?
aku pun was2 nak tnye ni....
haha...

Azreen said...

Thanks, tutorial yg sgt berguna bg sy!

fiqasaleh said...

napa aku wat nda menjadi? Y_Y

TTT said...

wah bestnye
thx azreen

linkwithin

Related Posts with Thumbnails