Pada acara f8 bulan September tahun lalu, Facebook telah memperkenalkan beberapa fungsi baharu antaranya termasuklah News Ticker. Fungsi ini membolehkan setiap pengguna mengikuti perkembangan rakan sosial mereka di Facebook dengan begitu mudah sekali. Pada masa yang sama, Facebook turut memperkenalkan kemaskini fungsi Facebook Open Graph dan Facebook Timeline secara rasmi.
Lebih menarik, Facebook Timeline ini turut membawakan kebolehan untuk digabungkan bersama-sama aplikasi pihak ketiga sekaligus menjadikan aplikasi yang menggunakannya kelihatan lebih interaktif dan sosial. Dalam tutorial ini, anda akan ditunjukkan bagaimana ingin menggabungkan aplikasi Facebook Open Graph pada laman blog WordPress.
Fasa Pembangunan
Langkah pertama, anda perlu mendaftarkan aplikasi anda untuk mendapatkan kod API Facebook. Kod ini digunakan sebagai pengenalan identiti aplikasi anda pada Facebook. Untuk memulakan proses pendaftaran, anda perlu melayari laman Facebook Developer.
Seterusnya, memasukkan maklumat mengenai aplikasi anda seperti nama domain dan alamat web blog. Sekiranya anda telah selesai, simpan dengan menekan Save Changes. Pada peringkat ini, anda telahpun berjaya mendaftarkan aplikasi Facebook anda.
Anda teruskan ke peringkat seterusnya dengan mendaftarkan fungsi Open Graph. Semasa mencipta fungsi Open Graph ini, anda perlu memahami dua entiti penting iaitu tindakan (action) dan objek. Dalam tutorial ini, anda akan menggunakan read sebagai action dan article sebagai objek. Klik Get Started untuk teruskan selepas memasukkan maklumat untuk action dan object.
Sekarang, anda perlu mengubahsuai bahagian action. Secara amnya, sekiranya anda menggunakan Bahasa Inggeris, tidak banyak yang perlu diubahsuai kerana Facebook akan mengubah tatabahasa objek mengikut kesesuaian. Memandangkan aplikasi Open Graph ini untuk blog, jadi anda bolehlah melangkau beberapa perubahan dan menekan Save Changes and Next.
Anda seterusnya akan dibawa ke bahagian objek. Pada bahagian ini, ianya akan memaparkan bagaimana pengguna akan berinteraksi dengan aplikasi anda dan bagaimana aplikasi anda dipaparkan. Anda juga boleh teruskan dengan menggunakan tetapan asal.
Seterusnya, anda dibawa ke bahagian Timeline Aggregation. Bahagian ini menentukan bagaimana aplikasi Open Graph anda meringkaskan tindakan yang dibawa oleh pengguna. Selain itu, anda juga boleh mengubahsuai paparan ringkasan samada secara bersenarai, lajur, ataupun peta. Klik pada Save and Finish untuk simpan dan paparan seperti dibawah akan keluar.
Dengan merujuk gambar diatas, pada ruangan Object Type, klik pada Get Code untuk mendapatkan meta-tag yang akan digunakan dalam fasa implementasi kelak. Salin dan tampal meta-tag tersebut ke dalam fail Notepad.
Aplikasi Open Graph anda sekarang telah tersedia dan sekarang anda perlulah mengintegrasikan aplikasi tersebut dengan laman blog anda. Pada tutorial ini, memandangkan kebanyakan pengguna menggunakan platform WordPress, jadi saya akan mengintegrasikan aplikasi tersebut dalam laman blog WordPress saya.
Fasa Implementasi
Bagi pengguna WordPress, terlebih dahulu, layari panel pengurusan blog anda. Pada menu Appearance, pilih Editor dan pilih fail header.php untuk diubahsuai. Kemudian, tampal meta-tag yang anda salin tadi. Pastikan anda menampal meta-tag tersebut dalam ruangan <head>. Dibawah ini adalah contoh meta-tag saya.
Sekarang, ubahsuai meta-tag tersebut agar bersamaan dengan fungsi sedia ada yang telah wujud dalam blog WordPress anda. Sebagai contoh, pada meta-tag og:title, anda boleh memaparkan tajuk entri anda dengan menggunakan fungsi PHP wp_title().
Seterusnya, anda perlu menambah fail SDK dari Facebook. Terdapat 2 versi yang boleh dipilih, samada Javascript atau PHP bergantung kepada bahasa pengaturcaraan yang digunakan. Untuk laman blog WordPress, anda boleh menggunakan PHP SDK tetapi untukk tutorial ini, saya hanya menggunakan Facebook Javascript SDK. Anda boleh mendapatkan SDK tersebut dari laman ini.
Masih lagi pada header.php, sekarang cari tag <body> dan tampal SDK tersebut. Perlu diingatkan bahawa anda perlu mengubah beberapa maklumat yang terdapat dalam Javascript SDK seperti sumber fail saluran dan ID aplikasi. Saya tidak akan menerangkan konfigurasi SDK secara lanjut disini kerana anda boleh ke laman SDK tersebut untuk mendapatkan contoh fail saluran dan ID aplikasi.
Baiklah, setelah memasukkan Javascript SDK tersebut kedalam header.php, sekarang anda perlu memasukkan kod butang Add to Timeline. Kod ini berfungsi untuk mengeluarkan butang dan membolehkan pengguna menggunakan aplikasi Open Graph anda. Salin dan tampal kod Add to Timeline ini pada ruangan yang anda inginkan butang tersebut dipaparkan. Contoh kod Add-to-Timeline adalah seperti berikut:
<div data-show-faces="true"></div>
Seterusnya, saya akan menunjukkan cara-cara untuk memanggil fungsi Open Graph dan Javascript SDK dari laman blog anda. Panggilan ini penting untuk menghantar data dari laman blog anda kepada Facebook. Dibawah ini adalah skrip contoh yang disediakan oleh pihak Facebook untuk digunakan semasa menghantar panggilan API. Anda juga boleh memasukkan skrip contoh ini dalam ruangan <head>
function socialise()
{
FB.api('/me/NAME_SPACE:action' +
'?object=URL_ENTRI_BLOG','POST',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
Dalam skrip diatas, anda terdapat beberapa perkara yang harus anda fahami; Pertama, skrip tersebut menjalan panggilan API secara asynchronous. Kedua, ianya bertindak berdasarkan namespace yang anda cipta pada fasa pembangunan tadi. Ketiga, ianya menggunakan action dan object yang anda reka dan yang terakhir, ianya hanya sah untuk menghantar URL entri laman blog anda mengikut nama domain yang didaftarkan. Semasa proses penghantaran URL ini, Open Graph akan mengesan maklumat URL mengikut meta-tag yang disiapkan pada awal fasa implementasi tadi.
Anda boleh mengubahsuai skrip diatas tadi untuk digunakan sebagai fungsi berasaskan tindakan seperti onclick atau onload. Untuk tutorial, saya akan menggunakan butang tindakan untuk menghantar panggilan API. Dibawah adalah kod yang saya gunakan.
<input type="button" value="Kongsi dengan Rakan" onClick="socialise()" />
Sebaik sahaja aplikasi berjaya disiapkan, anda boleh mengubahsuai skrip tindakan supaya ianya kelihat lebih automatik dan kemas. Sebagai contoh, panggilan API akan dihantar sebaik sahaja entri dipaparkan dan sebagainya.
Fasa Pengujian
Ini merupakan fasa terpenting yang anda perlu lakukan selepas membangunkan aplikasi Open Graph ini. Sekarang, masukkan URL entri blog anda dalam Facebook Debugger. Penggunaan Facebook Debugger ini amat penting kerana ianya dapat memastikan fasa implementasi telah dijalankan dengan betul dan meminumkan berlakunya ralat semasa aplikasi digunakan.
Pastikan kesemua Object Properties anda mengeluarkan maklumat yang betul sepertimana yang anda kehendaki. Sebagai contoh, untuk sebuah blog WordPress yang telah dikonfigurasikan dengan betul, paparan debugger adalah seperti yang berikut:
Sekiranya tidak terdapat sebarang masalah, anda boleh cuba mengujinya dengan melakukan log masuk sebagai pengguna aplikasi tersebut. Untuk mencuba sendiri aplikasi yang baru anda cipta, klik pada butang Add-to-Timeline. Paparan pada butang tersebut akan akan berubah sebaik sahaja anda selesai log masuk.
Seterusnya, anda perlu membuka mana-mana entri dalam blog anda. Kemudian, klik pada butang tersebut untuk membolehkan laman blog menghantar panggilan API dan memaparkan tindakan anda pada tersebut pada News Ticker.
Sekiranya anda membaca lebih dari satu artikel yang berlainan pada laman blog, News Ticker akan meringkaskan tindakan tersebut dan memaparkannya secara serentak pada profil Timeline anda. Paparan ringkasan pada Timeline adalah serupa dengan apa yang anda telah tetapkan dalam fasa pembangunan Open Graph di awal tadi.
Fasa Verifikasi
Sekarang, aplikasi Facebook Open Graph untuk blog anda telah pun siap. Akan tetapi, pengguna lain masih belum berpeluang menggunakan aplikasi anda. Untuk ini, anda perlu menghantar aplikasi anda untuk disemak oleh pihak pengurusan Facebook.
Sekiranya verifikasi oleh pihak Facebook berjaya, aplikasi anda boleh digunakan untuk semua pengguna setelah Facebook Timeline dilancarkan kelak. Memandangkan verifikasi ini dilakukan secara manual oleh pihak Facebook, anda perlu menunggu sehingga giliran anda tiba dan ini mungkin mengambil masa yang lama.
Bagi memastikan aplikasi anda diluluskan oleh Facebook, anda perlulah mengikut polisi privasi dan terma yang ditetapkan oleh Facebook. Selamat mencuba!