Gantikan comment blogspot anda kepada Facebook comment dengan butang like facebook

Ditulis oleh Aliff pada June 11, 2010 – 6:29 pm -

Tutorial nih aku buat saja nak kongsikan kat korang macam mana aku buat facebook comment untuk http://likesbutton.blogspot.com. Agak-agak korang faham-fahamkan la menatang nih k….. blogspot dan jugak facebook application. Aku tak nak cakap bnyak korang baca je lah and try jelah tutorial nih… Jika anda mempunyai permasalahan. Korang boleh komen terus di bawah. Isha-Allah, aku balas komen balik secepat yang mungkin. Jika anda suka entri ini, sila klik like okay. Kredit kepada facebook developer.  

Langkah 1, buat satu aplikasi facebook:

1. Pergi ke: http://www.facebook.com/developers
2. Klik pada + Set Up New Application (kiri bahagian atas halaman)
3. Letak nama; Application Name (contoh: NAMA.blogspot.com) > klik Agree > kemudian pada Create Application

 
4. pergi ke Connect tab (bahagian kiri halaman)
5. Letakkanurl blog dengan penutup slash. ” / ” Connect URL (Contoh: http://NAMA.blogspot.com/)
6. Anda wajib meletakkan bahagian Base Domain dengan: blogspot.com , dan klik Save Changes

 7. Anda akan nampak nombor Application ID anda (di bawah app API & Secret)
8. Akan mengambil masa 2 -20 minit untuk diggunakan selepas mendaftar aplikasi tadi.

———————————————————————————————-

Meletakkan SDK script + Open Graph protocol tags + xmlns attribute ke layout blogspot anda.

Edit layout blogspot anda, Pergi ke : Layout > Edit HTML, kemudian TANDA pada “Expand Widget Templates” checkbox.
http://img291.imageshack.us/img291/7268/expandwidgettemplates.png

———————————————————————————————-

XMLNS facebook attribute in the <html> tag:
Cari: <html (pada line#2/3),
Tambahkan attribute (seperti yang telah diBOLD) sesudah (2005/gml/expr’>) seperti:

<html expr:dir=’data:blog…………..2005/gml/expr’ xmlns:fb=’http://www.facebook.com/2008/fbml’>

———————————————————————————————-

Open Graph protocol mata-data tags:
Cari: </head> (di atas<body> tag)
Sebelum code di atas tambah;

<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=’NAMA.blogspot.com‘ property=’og:site_name’/>
<meta content=’http://ia.media-imdb.com/rock.jpg’ property=’og:image’/>
<meta content=’ID-APP-ANDA‘ property=’fb:app_id’/>
<meta content=’ID-FACEBOOK-PROFIL-ANDA‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>
</head> jangan copy.

Ganti NAMA.blogspot.com dengan nama yang akan keluar ketika di-like. (Cullen likes Aliff Cullen Hensem on NAMA.blogspot.com )
Ganti http://ia.media-imdb.com/rock.jpg’  dengan logo blog anda, atau buang terus jika anda tidak mahu.
Gantikan ID-APP-ANDA dengan nombor aplikasi facebook anda.
Gantikan ID-FACEBOOK-PROFIL-ANDA dengan ID facebook profil anda sendiri.

———————————————————————————————-

Javascript SDK right after the opening <body> tag:
Cari: <body> (di bawah</head> tag)
Tambahkan SDK script selepas code tersebut <body> tag:

<body> jangan copy.
<div id=”fb-root“></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : ‘ID-APP-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>

Hanya gantikan ID-APP-ANDA  dengan ID aplikasi anda.

—————————————————————————————————————————————–

Meletakkan Facebook plugins XFBML tags
—————————————————————————————————————————————–
Like button:
Cari <data:post.body/> ini adalah body text untuk setiap postingan anda,
Jadi, anda boleh meletakkan sebelum code tersebut atau selepas code tersebut.

<div><fb:like expr:href=’data:post.url’/><br/><br/></div>
<data:post.body/> jangan copy.

jika anda ingin mempamerkan like button sesudah entri anda, sila;

<data:post.body/> jangan copy.
<div><fb:like expr:href=’data:post.url’/><br/><br/></divm>

Jika anda mahu butang like hanya di dalam entri anda dan tidak keluar pada halaman utama. Tambah code yang sesudah dibold:

<b:if cond=’data:blog.pageType == &quot;item&quot;’><div><fb:like expr:href=’data:post.url’/><br/><br/></div></b:if>

dan sila klik Save Template

Jika anda ingin mebuat penambahan pada butang like sila ke Like-button page kemudian generate butang like kat situ.
SILA JANGAN UBAH HREF=’data:post.url’/.

—————————————————————————————————————————————–

Facebook Comments:
Cari <data:post.body/> ini adalah body text entri anda,
terpulang pada anda hendak meletak komen sebelum entri anda atau sesudah entri anda.

<data:post.body/> jangan copy.
<div><br/><br/><fb:comments expr:title=’data:post.title’ expr:url=’data:post.url’ expr:xid=’data:post.id’/></div>

Jika anda mahu komen hanya nampak pada bahagian dalam entri sila letak code di bawah:

<data:post.body/> jangan copy.
<b:if cond=’data:blog.pageType == &quot;item&quot;’><div><br/><br/><fb:comments expr:title=’data:post.title’ expr:url=’data:post.url’ expr:xid=’data:post.id’/></div></b:if>

dan klik Save Template

Ingin membuat penambahan? Sila ke Comments box page dan generate code, atau ke HALAMAN  ini untuk selanjutnya.

JANGAN GANTIKAN XID / URL / TITLE

Jangan lupa yang Blogger mempunyai comment sistem dorang sendiri, untuk  disable, sila ke : Settings > Comments > Comments,  Hide
http://img34.imageshack.us/img34/7235/disablebloggercomments.png
dan klik Save Settings

Untuk membuang (hide) butang like pada comment box. Anda boleh meletakkan ini. Anda perlu membuat penambahan 2 perkara yakni;
1. simple=”1″
2. css=”http://NAMAHOSTING.com/komenfacebook.css”

<fb:comments expr:title=’data:post.title’ expr:url=’data:post.url’ expr:xid=’data:post.id’ simple=’1′ css=’http://NAMAHOSTING.com/komenfacebook.css’>

dalam css sila letak code di bawah:

div.like {display:none;}

(Penambahan anda boleh dapatkan di sini)

———————————————————————————————-

CONTOH BLOGGER:
Anda boleh melihat contoh di; http://likesbutton.blogspot.com

———————————————————————————————-

Menukar Language:

Diambil dari FB.init

Internationalization
Facebook Connect features are available many locales.
You can replace the en_US locale specifed above with one of the supported Facebook Locales.
For example, to load up the library and trigger dialogs, popups and plugins to be in Hindi (hi_IN),
you can load the library from this URL:

//connect.facebook.net/hi_IN/all.js

Anda boleh memilih dari bahasa apa yang anda mahu di bawah, bagi memudahkan code bahasa Melayu adalah ms_MY :

Catalan
ca_ES

Czech
cs_CZ

Welsh
cy_GB

Danish
da_DK

German
de_DE

Basque
eu_ES

English (Pirate)
en_PI

English (Upside Down)
en_UD

Cherokee
ck_US

English (US)
en_US

Spanish
es_LA

Spanish (Chile)
es_CL

Spanish (Colombia)
es_CO

Spanish (Spain)
es_ES

Spanish (Mexico)
es_MX

Spanish (Venezuela)
es_VE

Finnish (test)
fb_FI

Finnish
fi_FI

French (France)
fr_FR

Galician
gl_ES

Hungarian
hu_HU

Italian
it_IT

Japanese
ja_JP

Korean
ko_KR

Norwegian (bokmal)
nb_NO

Norwegian (nynorsk)
nn_NO

Dutch
nl_NL

Polish
pl_PL

Portuguese (Brazil)
pt_BR

Portuguese (Portugal)
pt_PT

Romanian
ro_RO

Russian
ru_RU

Slovak
sk_SK

Slovenian
sl_SI

Swedish
sv_SE

Thai
th_TH

Turkish
tr_TR

Kurdish
ku_TR

Simplified Chinese (China)
zh_CN

Traditional Chinese (Hong Kong)
zh_HK

Traditional Chinese (Taiwan)
zh_TW

Leet Speak
fb_LT

Afrikaans
af_ZA

Albanian
sq_AL

Armenian
hy_AM

Azeri
az_AZ

Belarusian
be_BY

Bengali
bn_IN

Bosnian
bs_BA

Bulgarian
bg_BG

Croatian
hr_HR

Dutch (België)
nl_BE

English (UK)
en_GB

Esperanto
eo_EO

Estonian
et_EE

Faroese
fo_FO

French (Canada)
fr_CA

Georgian
ka_GE

Greek
el_GR

Gujarati
gu_IN

Hindi
hi_IN

Icelandic
is_IS

Indonesian
id_ID

Irish
ga_IE

Javanese
jv_ID

Kannada
kn_IN

Kazakh
kk_KZ

Latin
la_VA

Latvian
lv_LV

Limburgish
li_NL

Lithuanian
lt_LT

Macedonian
mk_MK

Malagasy
mg_MG

Malay
ms_MY

Maltese
mt_MT

Marathi
mr_IN

Mongolian
mn_MN

Nepali
ne_NP

Punjabi
pa_IN

Romansh
rm_CH

Sanskrit
sa_IN

Serbian
sr_RS

Somali
so_SO

Swahili
sw_KE

Filipino
tl_PH

Tamil
ta_IN

Tatar
tt_RU

Telugu
te_IN

Malayalam
ml_IN

Ukrainian
uk_UA

Uzbek
uz_UZ

Vietnamese
vi_VN

Xhosa
xh_ZA

Zulu
zu_ZA

Khmer
km_KH

Tajik
tg_TJ

Arabic
ar_AR

Hebrew
he_IL

Urdu
ur_PK

Persian
fa_IR

Syriac
sy_SY

Yiddish
yi_DE

Guaraní
gn_PY

Quechua
qu_PE

Aymara
ay_BO

Northern Sámi
se_NO

Pashto
ps_AF

Klingon
tl_ST

 

Entri lain yang berkaitan


Share/Bookmark
Tag: , , , , , , , , , , ,
Ditulis dalam Article, Coretan, Facebook Hack, Facebooktalk, Panduan, SEO, wordpress | 2 Komentar »


2 Komentar to “Gantikan comment blogspot anda kepada Facebook comment dengan butang like facebook”

  1. Komentar oleh Faliqfahmie pada Aug 5, 2010 | Balas Komentar

    bro aku dah ikut steps kau utk add LIKE button kat page aku.
    tp after so many hours, mcm takde pape je
    how

    [Balas]

  2. Komentar oleh Aliff Cullen pada Aug 8, 2010 | Balas Komentar

    heading code. xlms attributes ko betul?? step ini sume betul…. dari A-Z aku buat… ko try lagi…

    [Balas]

Sila tinggalkan komentar anda

CommentLuv Enabled