Ads: (Please Click!)

Sunday, July 04, 2010

Tutorial: Facebook Comment Box


Assalamualaikum dan salam sejahtera.

Mungkin ada yang ternanti-nanti dan tertunggu-tunggu artikel yang terbaru dari aku, lebih-lebih lagi artikel yang berkaitan dengan tutorial. Lihat saja pada tajuk, mungkin ada di antara pembaca blog aku sudah tidak sabar lagi untuk mengetahui bagaimana hendak buat Comment Box sepertimana serupa di Facebook. Tetapi kali ini aplikasi ini boleh dipasang di blog anda sepertimana yang terdapat di blog aku.

Terlebih dahulu, ingin juga aku melampirkan beberapa pautan yang berkaitan dengan aplikasi di Facebook, contohnya Facebook Share Button dan Facebook Like/Recommend Button. Dua aplikasi ini sememangnya popular di kalangan blogger, bukan? Dua tutorial ini telah aku sediakan di sudut kanan blog.

Tutorial kali ini masih lagi dengan aplikasi Facebook. Ia dinamakan Facebook Comment Box. Pada awalnya, agak pening juga untuk membuat research dan belajar satu persatu. Akhirnya, hampir 5 jam di depan komputer maka terhasillah seperti yang anda dapat lihat di sudut kanan atas blog aku. Hehe. Menarik, bukan?

Okey, cukup untuk membebel. Tutorial kali ini aku tidak mahu menyerabutkan kepala anda. Anda hanya perlu ikut langkah demi langkah seperti yang akan aku nyatakan di bawah ini nanti. Ia adalah langkah mudah sahaja. Walau bagaimanapun, ia aplikasi Facebook. Maka, syarat paling utama ialah anda perlulah ada akaun Facebook. Jika sebaliknya, maaf aku ucapkan. Aplikasi ini mungkin tidak sesuai untuk blog anda.

Klik spoiler ini untuk meneruskan bacaan..

1) Daftar Aplikasi

Klik link ini: http://www.facebook.com/developers/createapp.php.
Kemudian sila isikan borang tersebut, sebagai contoh; Aduka's Blog.
Kemudian, tandakan 'Agree' dan klik butang 'Create Application'.


2) Salin Kekunci

Salin API Key ke dalam Notepad. Anda mahu salin kesemuanya pun tidak mengapa. Cuma pastikan API Key anda disimpan ditempat yang selamat.
Lain-lain tempat kosong yang ada di dalam borang ini adalah bebas. Anda boleh isi atau biarkan untuk ke langkah yang seterusnya.


3) Link Blog

Seterusnya, klik link tab Connect yang ada di sebelah kiri borang aplikasi.
Pada medan Connect URL, isikan link penuh blog anda, sebagai contoh: http://aduka5.blogspot.com.
Kemudian, klik butang Save Changes.


4) Edit HTML

Login ke Blogger anda.
Kemudian, pada Dashboard anda sila ke Design > Edit HTML.
Sebelum langkah pengubahsuaian dilakukan, sila back-up kod HTML template anda ini dengan klik 'Download Full Template'. Ini adalah langkah berjaga-jaga sekiranya anda membuat sebarang kesilapan semasa proses pengubahsuaian kod.
Seterusnya, cari kod di bawah di dalam editor:
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

dan, tambahkan code yang ditandakan merah seperti di bawah

xmlns:fb='http://www.facebook.com/2008/fbml'

Ia akan kelihatan seperti kod di bawah ini.
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>

Sekarang, tambah kod di bawah sebelum tag </head>

<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' type='text/javascript'/>

Selepas itu, tambahkan kod di bawah sebelum tag </body>. Sila tukar API_KEY yang ditandakan biru kepada API KEY yang telah anda salin ke Notepad pada langkah yang pertama tadi.

<script type='text/javascript'>
FB.init(&quot;API_KEY&quot;, &quot;&quot;);
</script>

Akhir sekali, klik butang oren 'Save Button'.


5) Langkah Terakhir, Aplikasikan Facebook Comment Box

Salin kod di bawah.

<fb:comments numposts='3' width='400'/>

Dan anda letakkan di mana-mana di blog anda. Anda boleh gunakan HTML/JavaScript blogger widget, mahupun terus edit di editor HTML bagi blogger yang mahir.

Anda bebas untuk mengubah kod yang ditanda warna. Untuk numposts='3', ia akan mengarahkan berapa banyak jumlah komen yang perlu dipapar pada comment box. Manakala width='400' pula, adalah tahap kelebaran comment box anda.

Sila pra-tonton (preview) blog anda untuk melihat hasilnya!
Artikel ini telah dikemaskini! Sila baca artikel terbaru (latest and updated) DI SINI!


PERHATIAN! Aktiviti PLAGIAT (copy & paste) sesuatu artikel tanpa pengetahuan dan kebenaran penulis adalah satu aktiviti/perbuatan yang TIDAK BERMORAL!

Ads: (Please Click!)
Comments
31 Comments


31 Orang Kentut Madu:

cikgadis konfiuss said... [Reply]

wuiyooo...
pening2 jg ni..
kalo ku bg pasword n emel ko tlg adjust blh?
ekkeke
ok mmg dasar pmalas
:p

wanita mustanir said... [Reply]

hehehe..
aduka, thanks for the tutorial..
really informative..
=)

aduka said... [Reply]

cik gadis:
Jgn malas2 ye mas..
Try buat dlu..
Kalu x dpt, sy bleh tolong..
Xde mslh..
;-)

aduka said... [Reply]

wanita mustanir:
U r welcome..
Ilmu perlulah dikongsi bersama..
;-)

hasni said... [Reply]

xda facebook
xleh la wat
hihi

aduka said... [Reply]

hasni:
Ye hasni..
Mmg utk yg ada akaun facebook..
Klu xde cmne nk register form fb application..
Huhu..

syahira ariff said... [Reply]

aku sdang mencuba
thanx for sharing aduka
sblm tu kena tanya
dia mkn saiz ruang sidebar besar tak?

aduka said... [Reply]

syahira ariff:
Sama2 dik..
Bab tu, ya dik..
Mkn space besar sikit..mungkin width dlm 350px ke atas..
:-)

maldinifaridkamil said... [Reply]

bro aduka..
kenapa aku punya plugin dye klua kat widget je..xde pn kat setiap post..hurmm..cmne ea?

syahira ariff said... [Reply]

owh,mcm tu
^___^
kena adjust widht nampaknyer.hee~

miss lolly a.k.a luvfareda said... [Reply]

waaaaaaaaaa


info yg bagus kepada yg menggemarinya.

l0lly ? agak malas skit bahahahaa.

aduka said... [Reply]

cik lolly:
Hehe..nak buat alah ni xle malas2..

aduka said... [Reply]

maldinifaridkamil:
mmg x boleh apply utk setiap post..
saya pn dh cuba..
dia kluar comment box yg biasa..
sbb tu tutorial saya ni, saya ajar letak utk widget..
saya dah ajukan persoalan ni kat developer FB..
masih xde jawapan..
maybe someday ade kot..
saya akan update balik if diorg dah spread coding or tutorial tu..
ok?
=)

aduka said... [Reply]

syahira arif:
yep..
just adjust width aje..
=)

hans said... [Reply]

aku buat xblh2 pun

aduka said... [Reply]

hans:
kat mana x boleh tu?

Nadd said... [Reply]

aduka...
nad bg link blog aduka kat latest entry nad tau...
sbb nad blaja wat mende tu dr sini..
heehheee...
tq aduka... ;)

aduka said... [Reply]

nadd:
Ok nadd..
Trima ksh..

sumpit said... [Reply]

peh mantap bro...

Berkawan Jom

Hamba Ilahi said... [Reply]

nak cuba kotak komen macam ni, tapi tak boleh pasal tak dapat daftar application facebook.
saya lupa password yang dihantar ke handset.

macam mana?

Aduka said... [Reply]

@hamba ilahi
boleh reset balik no fon tu. kmudian register balik. request balik kod utk di hantar ke henset. kmudian daftar fb developer.

Hamba Ilahi said... [Reply]

macam mana nak reset balik no fon dan register macam cara yang ditunjuk dalam tutorial ke?

Aduka said... [Reply]

@hamba ilahi
tak.. kalau tidak silap, pergi ke account setting dan klik pada tab Mobile.. di situ anda boleh reset..

Hamba Ilahi said... [Reply]

tak dapat jugak.
bila saya nak register semula, takdak negara Mesir dalam list tu.
saya sekarang belajar di mesir, ada cara lain lagi tak nak buat ni?

lagi satu, kotak komen yang ini sama tak dengan kotak komen yang bawah artikel kat atas ni?

Aduka said... [Reply]

@hamba ilahi
xde negara mesir?
cuba cari egypt sbb mesir dlm bhs inggerisnya adalah egypt..

kotak ini tidak sama dgn komen fb..

Hamba Ilahi said... [Reply]

saya dah semak.
mesir tak ada, egypt pun tak ada.
sebenarnya yang saya nak tanya tentang kotak chat tu. boleh ajar tak?

lagi satu, boleh tak adjust widget saya yang semuanya di sebelah kiri untuk sebahagiannya saya letakkan di sebelah kanan?

Aduka said... [Reply]

@hamba ilahi
kalu macam tu saya pn x tau camne nk tolong.. klu guna provider dr malaysia xde masalah sgt kot.. kot la mesir tu dah banned fb.. sy x pasti..

kotak chat yg mana maksud saudara?

utk widget, saudara kena tukar template..

Hamba Ilahi said... [Reply]

owh, takpalah.

silap, bukan kotak chat, tapi komen fb macam bawah artikel blog anda.

kalau tukar tenplate payah la, template blog macam Blog Aduka ni buat macam mana?

Aduka said... [Reply]

@hamba ilahi
seperti yg sy katakan, tukar template.. saudara punya template fb yg lama.. sy yg baru.. 3 column.. ada di internet saja saudara..

utk komen spt sy, nantikan tutorial facebook comment box part 2..

SMK JENAGOR said... [Reply]

jd doh,, wak godek3,, terima kasih.. part 2 jd laju sket loading ,, terima kasih..

Firdaus Kasim said... [Reply]

aduka , kalo org nk komen nk kena ada fb ke? kalo x de fb x leh komen la mcm tue

Post a Comment

Ruang komen telah di-set sebagai 'dofollow'. Sila tinggalkan URL blog anda dengan cara yang bijak. Baca DI SINI untuk mempelajari SEO mengenai 'dofollow' link.

Kepada ANONYMOUS, sila tinggalkan link dengan cara yang bermoral sedikit.

Terima kasih kerana sudi membaca artikel ini dan menurunkan komen anda.

 

Blog Aduka Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger