Ads: (Please Click!)

Friday, December 10, 2010

Facebook Like Button With Open Graph (For Regular Sites)


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


Salam.

Mungkin ramai yang tertanya-tanya dan tercari-cari bagaimana mahu meletakkan aplikasi Facebook Like Button pada laman web (website) biasa yang bukan menggunakan platform berasaskan blog (blogger/wordpress).

Read more/less..

Di sini aku ingin berkongsi ilmu kepada pembangun-pembangun website tentang bagaimana mengaplikasikan Facebook Like Button dengan Open Graph. Kenapa Open Graph? Banyak kepentingannya. Klik DI SINI untuk membaca dengan lebih lanjut mengenai Open Graph.

Sebelum memulakan tutorial, ingin aku menerangkan secara kasar mengapa pada platform blogger aku TIDAK menggunakan Open Graph sepertimana di artikel yang pernah diterbitkan sebelum ini. Sudah sedia maklum, blogger adalah satu platform khas untuk blog. Ia agak terhad kepada pengguna platform ini untuk edit satu laman. Aku pernah mencuba Open Graph pada platform blogger. Namun, hasilnya tetap sama. Untuk tutorial kali ini, penggunaan Open Graph amatlah sesuai, lebih-lebih lagi kepada pengguna yang mempunyai domain sendiri.

Okey. Cukuplah membebel. Terus sahaja kepada tutorial. Seperti biasa, aku akan buatkan tutorial ini secara ringkas mengikut turutan.

1 - Sila ikuti langkah 1 hingga 7 di ARTIKEL INI. Perhatian: Pada langkah yang ke 4 lain sedikit berbanding blogger. Sila isi URL website anda tanpa http://www. pada ruang 'Site Domain'. Manakala pada ruang 'Site URL', isi penuh URL website anda dengan akhiran / (slash).

2 - Jika anda pernah mengaplikasikan Facebook Like Button dengan cara lama, sila buang beberapa kod seperti yang dinyatakan di bawah.

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

<script type="text/javascript">
FB.init("123456789000000000","/xd_receiver.htm");
</script>

3 - Tambah kod xmlns:fb="http://www.facebook.com/2008/fbml" dan xmlns:og="http://opengraphprotocol.org/schema/" pada tag <html> anda. Sebagai contoh:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xml:lang="en" lang="en">

4 - Letakkan kod ini selepas tag <body> (baris di bawah).

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APPLICATION-ID-ANDA',
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>

Gantikan APPLICATION-ID-ANDA dengan Application ID yang telah anda copy pada langkah 6 di ARTIKEL INI.

5 - Letakkan kod <fb:like> anda di tempat yang anda mahukan di laman anda. Cuma, seharusnya kod ini perlulah 'selepas' kod langkah 4. Bukan 'sebelum'. Kod <fb:like> boleh anda cipta dengan gaya sendiri di LAMAN INI.

Meta Tag Open Graph

Untuk membuat Like Button yang dapat memaparkan kandungan laman anda (salah satu yang pengunjung suka dengan menekan butang Like), anda perlu menambah beberapa Facebook Meta Tag baru yang disebut Open Graph.

Aku cuba-cuba membuat seperti contoh di laman utama Open Graph tersebut. Ia di ambil dari filem The Rock (1996) sebagai sampel eksperimentasi. Aku cipta satu artikel mengenai filem tersebut, dan letakkan satu butang Like di bawah artikelnya. Setting Meta Tag adalah seperti berikut:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
...
</head>
...
</html>

Bukannya suatu kemestian, anda juga boleh menambah 2 tag untuk membenarkan anda menjadi admin, iaitu:

<meta property="fb:app_id" content="APPLICATION-ID-ANDA"/>
<meta property="fb:admins" content="FACEBOOK-PROFILE-ID-ANDA"/>

Untuk lebih memahami bagaimana Open Graph dan Like Button berfungsi bagi satu-satu laman website, anda perlu membuat beberapa artikel lain selain dari contoh yang aku buat di atas. Anda boleh mencuba bagaimana Open Graph dan Like Button bertindak pada hanya satu keratan artikel di dalam satu perenggan. Cuma ia memerlukan satu konsentrasi yang lebih.

Selamat mencuba. Semoga berjaya!
Aduka: Tutorial ni sesuai kot kepada peminat Joomla!


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

Ads: (Please Click!)
Tukang Karut : Aduka
Tag: , , , , , , , , , , , ,
Comments
1 Comments


1 Orang Kentut Madu:

dayah said... [Reply]

susah je tutorial kao tu aduka T_T

December 11, 2010 at 2:32 AM

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.

Subscribe to: Post Comments (Atom)
 

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