Ads: (Please Click!)

Thursday, November 11, 2010

Facebook Like / Recommend Button For Blogger (Part 2)


Kepada kaki plagiat, sila minta izin jika mahu copy-edit-and-paste. Jangan biadap sangat.


Salam.

Artikel ini adalah tutorial terkini (updated) untuk Facebook Like / Recommend Button yang aku pernah terbitkan sebelum ini. Update ini dibuat memandangkan ada beberapa ralat (error) yang telah dikenalpasti oleh aku selama beberapa bulan tutorial sebelum ini di aplikasikan di blog. Dan minta maaf kepada sesiapa yang pernah mengikuti tutorial aku sebelum ini. Mungkin sesetengah blogger akan perasan bahawa tutorial ini mungkin berjaya dan berjalan lancar, sebaliknya tidak. Ya, tidak. 'Tidak' maknanya 'tidak berapa efisyen'.

Read more/less..

Untuk memuaskan hati semua pihak, artikel ini akan mengubah segala kesulitan yang pernah dihadapi oleh semua. Harap-haraplah.

Oh ya. Kepada 'kaki copy-and-paste', kaki plagiat (copy, ubah, dan post), harap bertimbang rasa sikit. Sila bagi kredit (bukan top-up okey!) di atas segala ilmu yang aku turunkan di sini. Sekurang-kurangnya, link artikel korang yang telah di copy-edit-and-paste itu terus ke blog ini atau artikel ini.

Okey. Terus ke tutorial. Aku buat step-by-step seperti biasa. Mudah faham.



1 - Masuk link ini http://www.facebook.com/developers/ dan klik butang + Set Up New Application. Jika anda sudah/pernah membuat langkah-langkah ini, sila langkau terus ke langkah yang ke-7.


2 - Isikan ruang 'Application Name'. Korang letak nama blog korang pun boleh. Suka hatilah. Kemudian pastikan anda pilih 'Agree'. Seterusnya, klik butang 'Create Application'. Tetingkap Security Check akan keluar. Isikan kod security.


3 - Page korang akan keluar seperti ini.


Aku sarankan korang lengkapkanlah semua ruang kotak kecuali 'Privacy Policy URL' dan 'Terms of Service URL'. Tinggalkan kosong. Yang ada logo, bubuh logo.

4 - Klik 'Web Site' seperti gambar di bawah.


Isikan ruang 'Site URL' dengan alamat atau link blog korang. Pastikan tanda '/' diletakkan pada akhiran link blog korang. Ruang 'Site Domain' letak blogspot.com.

5 - Klik butang 'Save Changes'.

6 - Kemudian, page korang akan terpapar seperti gambar di bawah.


7 - Sila copy maklumat 'Application ID'. Maklumat ini akan digunakan selepas ini.

8 - Edit layout anda: Design > Edit HTML, dan klik 'Expand Widget Templates'. Kemudian, buat carian katakunci 'html expr' kemudian letakkan kod ini xmlns:fb='http://www.facebook.com/2008/fbml' di akhiran xmlns:expr='http://www.google.com/2005/gml/expr'. Pastikan anda menjarakkan sedikit antara kedua kod ini (space). Lihat contoh seperti gambar di bawah.


9 - Buat carian kata kunci ini pula: '/head'. Kemudian copy kod di bawah:

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' 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-BLOG-KORANG' property='og:site_name'/>
<meta content='LINK-LOGO-KORANG' property='og:image'/>
<meta content='APPLICATION-ID-KORANG' property='fb:app_id'/>
<meta content='FACEBOOK-PROFILE-ID-KORANG' property='fb:admins'/>
<meta content='article' property='og:type'/>

Dan paste atas daripada kod </head> tadi. Hati-hati semasa melakukan langkah ini.

10 - Apa yang aku highlight dalam kod di atas, korang perlu ubah, okey? Data-data ini akan terpapar di Facebook apabila sesiapa sahaja yang klik butang Like dalam artikel korang.

NAMA-BLOG-KORANG : Bubuh apa saja. Nama blog pun boleh.
LINK-LOGO-KORANG : Letakkan link logo korang. Contohnya: http://imageshack.us/..blogaduka.gif
APPLICATION-ID-KORANG : 'Application ID' ini korang akan dapat semasa langkah yang ke-7.
FACEBOOK-PROFILE-ID-KORANG : Letakkan Profile ID Facebook korang. Cara hendak dapatkan Profile ID ialah:

- Login ke Facebook.
- Klik Profile.
- Alihkan mouse di atas gambar profile.
- Right-click dan pilih 'Copy Link Location'.
- Contoh: http://www.facebook.com/album.php?profile=1&id=1814790405 Nombor yang aku highlight ini adalah Profile ID.

11 - Buat carian katakunci '<body>'. Kemudian, copy kod di bawah.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APPLICATION-ID-KORANG', status : true, cookie : true, xfbml : true
});
};

(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>

Dan paste di bawah <body> tadi. Seperti langkah ke-10, tukarkan APPLICATION-ID-KORANG kepada Application ID.

12 - Buat carian katakunci '<data:post.body/>', kemudian copy kod di bawah.

<fb:like expr:href='data:post.url'/>

Ada beberapa lokasi untuk korang meletakkan Button Like ini, samada di bahagian atas (sebelum) artikel, di bahagian bawah (selepas) artikel, dan di dalam hanya setiap laman posting.

Bahagian atas (sebelum) artikel : paste kod di atas <data:post.body/>. Sebagai contoh:

<div><fb:like expr:href='data:post.url'/></div>
<data:post.body/>

Bahagian bawah (selepas) artikel : paste kod di bawah <data:post.body/>. Sebagai contoh:

<data:post.body/>
<div><fb:like expr:href='data:post.url'/></div>

Di dalam hanya laman posting : paste kod seperti mana yang telah aku bold-kan.

<b:if cond='data:blog.pageType == "item"'><div><fb:like expr:href='data:post.url'/></div></b:if>


13 - Langkah terakhir, klik butang 'Save Template'. Cuba view blog anda. Jika Button Like tidak keluar, tunggu 10-15 minit kemudian cuba view kembali.

AMARAN! : Korang dinasihatkan tidak mengubah kod-kod yang diberikan.


Untuk setting yang lain seperti jenis font, atau Recommend Button, sila baca artikel lama yang pernah aku post. Klik DI SINI.

Jika anda mempunyai masalah, pertanyaan, dan apa saja sila tinggalkan komen.

Sekian. Selamat mencuba!

Selepas ini akan menyusul Facebook Comment Box pula. Jadi, untuk pengetahuan semua, tutorial dalam artikel ini SANGAT PENTING, okey? Hehe.


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

Ads: (Please Click!)
Comments
10 Comments


10 Orang Kentut Madu:

juelee said... [Reply]

thanks adukaaaa

Aduka said... [Reply]

u r welcome..

dayah said... [Reply]

tq for sharing :)

Asfan Ash said... [Reply]

salam brader..aku gune .com tp still bawah blogger. so bahagian domain tu nak taruk ape....aku nye butang kluar je tp probnye xkluar feed kt homepage

Aduka said... [Reply]

@ARC
domain tu letak platform apa guna.. klu wordpress, buh wordpress.. klu blogspot, buh blogspot.. x kisah pkai .com or lain2nya..

Asfan Ash said... [Reply]

kalau pakai .com mcm aku, guna domain arcx13.com. bukan blogger.com

btw, apesal ttibe xleh copy code ni? adoiiiii

Aduka said... [Reply]

@ARC
itu domain.. ini platform.. domain ngan platform tu istilah lain2.. x sama tau..

ops sorry.. ter-on disable highlight plak.. =P

tukanggambar said... [Reply]

salam..bro aduka..saya tak boleh nak buat la, error bile lpas sy masukkan security check. kenapa ya?

Liyana Lunia. said... [Reply]

boleh tak nak buat dekat blog WP? wuwuw

.. i Nurqa_Maria .. said... [Reply]

terima kasih for tutorial .

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