Blog Aduka: informasi

Showing posts with label informasi. Show all posts

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!

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.

Thursday, October 28, 2010

Tutorial: Facebook Shoutbox!

Salam.

Semalam, aku menemui salah satu widget yang cukup menarik daripada Facebook Developer. Biasanya, shoutbox kita lihat seperti di bawah.

Monday, October 25, 2010

Selepas 30 Tahun, Selamat Tinggal Walkman!

Setelah berita pemberhentian pengeluaran cakera liut (floppy disk) pada bulan Mac 2011 diuar-uarkan, syarikat elektronik terbesar Jepun iaitu Sony telah menghentikan pembuatan dan pengedaran teknologi pemain kaset Walkman, pemain muzik mudah alih pertama berkos rendah.

Read more/less..

Menurut IT Media, batch pengeluaran terakhir akan dihantar ke peruncit Jepun pada bulan April 2011. Setelah unit-unit tersebut dijual, Walkman baru tidak akan dikilangkan lagi, mahupun didapati di kedai-kedai elektronik di seluruh dunia.

Walkman generasi pertama (yang disebut Soundabout di AS, dan Stowaway di UK) telah dikeluarkan pada 1 Julai 1979 di Jepun. Walaupun kemudiannya menjadi kejayaan besar, ia hanya dijual 3000 unit pada bulan pertama. Sony berhasil menjual sekitar 200 juta iterasi dari kaset Walkman sahaja.

Ironinya, pengumuman itu disampaikan hanya satu hari sebelum menjelang ulang tahun yang kesembilan iPod iaitu pada 23 Oktober, walaupun punca penurunan penjualan kaset Walkman adalah disebabkan oleh letupan populariti pemain CD dalam tahun 90-an, bukannya iPod!

Berita AP melaporkan bahawa walaupun penjualan Walkman telah berhenti di Jepun, peranti tersebut masih akan dibuat oleh pengilang China dan akan dijual di Amerika Syarikat dan UK.

Aduka: Sempat juga memiliki Walkman Sony dan mengumpul puluhan keping kaset untuk koleksi peribadi.

Saturday, October 09, 2010

Facebook Plugin Yang Berguna

Salam semua.

Artikel ini adalah artikel perkongsian semata-mata. Tiada cara programming. Tiada tutorial. Cuma sekelumit informasi kepada sesiapa (blogger khasnya) yang ingin mempelajari mahupun memasang Facebook plugins ke blog mereka. Cuma yang beza, ia plugins yang biasa-biasa bagi aku. Jika mahu letak di blog, mungkin Like Button sahaja yang menarik.

Read more/less..

Pada awalnya, aku rujuk di link Facebook Developer iaitu Facebook Plugins ini. Segala yang ada di blog aku, seperti Like Button dan Activity Feed adalah merujuk di laman web tersebut. Tutorial pun begitu juga. Mungkin berlainan sedikit bagi Facebook Comment Box dan Share Button. Itu memerlukan coding dan pengetahuan yang lain, seperti JavaScript, FBML, dan sebagainya.

Ramai yang bertanya di chatbox bagaimana mahu memasang Facebook Comment Box. Ada juga yang bertanya bagaimana mahu buat layout ala-ala Facebook ini.

Yang comment box, susah mahu jawab sebenarnya. Aku ada menerima komen di tutorial Facebook comment box yang pernah aku buat dahulu. Aku minta maaf banyak-banyak. Itu tutorial lama. Jika ada kelapangan, aku akan buat artikel tutorial yang baru. InsyaAllah. Bagi layout ala-ala Facebook ini pula (aku panggil Faceblog), sebenarnya ia percuma di internet! Korang hanya perlu rajin membuat carian di Google sahaja. Hehe. Untuk transformasinya, korang perlu rajin meluangkan masa yang agak panjang.

Gambar di atas adalah koleksi plugins yang ada di laman Developer Facebook. Klik gambar untuk terus laman tersebut.

Aku sebenarnya tiada tips sangat perihal programming. yang boleh aku cakap, korang perlu research dan belajar. Banyakkan bertanya juga. Bak kata pepatah, malu bertanya sesat jalan.

Last but not least, ingin aku tekankan sekali di sini bahawa aku suka berkongsi. Aku tidak mahu berlagak yang aku pandai dan hebat. Ilmu ini tiada batasan. Kadang-kadang sehebat mana pun kita, hebat lagi yang Maha Berkuasa. Jika aku ini seorang yang hebat, blog aku bukan di PageRank 3. Blog aku bukan 'klon' sama dengan Facebook. InsyaAllah, mana yang baik untuk semua, aku kongsi di sini. Cuma apa yang terbatas adalah masa. Untuk seketika ini, aku agak sibuk. Hanya kelapangan di waktu malamnya.

Oh ya! Sebelum terlupa, ingin juga aku mengajak korang semua klik button Like untuk status Facebook aku ini. Klik link ini. Kalau anda belum add aku sebagai as friend, add aku dulu. Sebagus-bagusnya, tinggalkan mesej ketika add as friend tu. At least aku tahu korang adalah blogger.

Lagi, silakan meramaikan Facebook Fan Page blog aku ini, ya. Klik sahaja Like Aduka's Blog di sudut kanan atas blog ini. Terima kasih.

Blog Aduka

Friday, December 10, 2010

Facebook Like Button With Open Graph (For Regular Sites)

Thursday, November 11, 2010

Facebook Like / Recommend Button For Blogger (Part 2)

Thursday, October 28, 2010

Tutorial: Facebook Shoutbox!

Monday, October 25, 2010

Selepas 30 Tahun, Selamat Tinggal Walkman!

Saturday, October 09, 2010

Facebook Plugin Yang Berguna

Pengarang Blog

Hakcipta Terpelihara

Penaja Syarikat

Bilik Meeting

Post Popular Kalah Artis

Artis Dan Selebriti Blog

Ruang Bacaan Babab.net

Khazanah Blog

Tag / Label


	Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.