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!)