Ada Sesuatu Mahu Tunjuk Pada Anda!

Salam Ramadhan.

Sebenarnya aku ada something yang menarik mahu dikongsi kepada korang. Hah? Apa dia? Jom jom.

READ MORE / LESS >>

KLIK GAMBAR NI!

KLIK GAMBAR NI PLAK!

Hahahaha!

Aku nak tunjuk yang dua gambar kat atas ni adalah anak saudara aku yang baru. Khairunnisa Najwa nama dia. Comel kan?

Satu lagi aku just nak tunjuk efek imej tu. Cantik gak kan? Hahaha. Berlagaknyee akuuu.. Menunjuk-nunjuk sehhhh! Pasni mesti ada yang tanya, "Eh, Aduka! Camne buat ek?" "Wow! Ajar la, Aduka! Plssssss..!" Hahaha.

Teguran Itu Membina

Salam.

Kihkihkih. Takde apa benda aku nak tulis. Benda remeh macam ni pun buat entry. "Hek elleehhhhh.. kecoh la lu!" Apa nak buat. Dah orang tegur, kita ikut aje ler. Kadang-kadang teguran orang membuat kita dari tak elok, jadi elok. Dari buruk, jadi cantik. Dari gemuk, jadi kuruihhh. Hehe.

Apekebende aku nak cerita sebenarnya ni?

Untuk pengetahuan korang, dua hari yang lepas (dari tarikh entry ni ditulis) aku dah melakukan transformasi kepada aku punya layout blog. Biasa la aku ni. Tema blog selalu je berubah-ubah. Selepas siap proses transformasi, ada la sikit slack tang situ tang sini. Tang komen tab la, script la, font la. Macam-macam ada. Biasa la. Tak semua layout tu perfect. Alaa free je pun dalam internet.

So semalam aku dapat teguran di chatbox oleh cik aida kite. Perasan plak layout blog aku ni bertukar ye. Baguih baguih baguuuiiihhh. Nampak dah beliau ni salah sorang follower kat blog aku yang kerdil ni. Hehe. Teguran yang baik sebenarnya. Yalah. Selepas tukar layout baru ni, aku dah dapat agak yang tang font dia macam susah dan sakit mata sikit nak baca. Bila tengok teguran cik aida kita, nah. Memang betul la sangkaan aku yang font asal memang teruk!

Jadi, aku apa lagi.. Bertukar!!!!


PLINGGGG!!!!


Errr.. alamak! Silap upload gambar jadi kecik la plak. Korang klik je ler gambar untuk view penuh. Auto open new window. Don wori.

Kali ni harap-harapnya font jenis selesa sikit korang nak baca. Ni idak. Font entah apa-apa.

Macam biasa, tema putih sebagai background masih tetap menjadi pilihan. Putih itu suci bersih. Ecececeeee..

Ada apa-apa lagi nak komen pasal blog aku ni? Layout ke ape ke.. Teguran yang membuatkan aku mengubah sesuatu kepada blog, aku bagi 3 link free ke blog korang! Hah! Sila sila sila. Drop aje komen korang kat salah satu jenis kekotak komen di bawah. Facebook ke.. Blogger ke.. Pilih pilih pilih.

Teguran itu membina! Yeah!

Free link ke blog cik (cik ke puan? ) aida kita [LINK]. Trimassssss sebab teguran anda. *wink! wink!*

Real Faceblog : Kini Blog Aduka Dilengkapi Dengan Sistem Notifications!

Salam.

Alhamdulillah, setelah lebih enam bulan Blog Aduka bertransformasi ke template ala-ala Facebook, kini blog ini maju setapak lagi dengan menyediakan sistem Notifications! Sistem ini lebih kurang Notifications di Facebook, cuma tidak sehebat di Facebook. Ia hanya memaparkan komen-komen yang telah dibuat oleh pembaca blog ini pada ruang Facebook Comment Box.

READ MORE / LESS..

Sebenarnya, sistem ini sudah dipasang lebih kurang pada awal bulan Januari yang lalu. Cuma masih terdapat pengubahsuaian sedikit sebanyak.

Tujuan sistem ini dipasang di blog adalah untuk melihat senarai-senarai komen yang telah dibuat oleh pembaca. Sebelum kewujudan sistem ini, menjadi kesukaran bagi aku untuk melihat siapa yang telah komen di blog. Oleh itu, aku terpaksa mencari cara alternatif supaya aku dapat melihat, balas, delete, ban, dan sebagainya komen-komen yang telah dibuat oleh pembaca. Sistem Facebook Comment Box ini tidaklah seperti Blogger Comment biasa yang boleh di-monitor dengan klik pada tab 'Comments' pada Dashboard. Jadi, dengan adanya sistem ini, penulis blog dapat mengurus dan mengendali komen-komen dengan lebih mudah. Dan anda juga dapat melihat rekod komen-komen yang ada.

Jika anda masih juga kabur-kabur dengan penerangan aku di atas, sila lihat demontrasi di bawah. Gambar yang di sediakan akan 'auto open new tab' selepas di klik. Klik untuk besarkan.

Klik pada ikon 'Notifications' seperti gambar di atas.

Tetingkap lain akan terbuka pada tab yang baru secara automatik apabila ikon 'Notifications' ini di klik.

Inilah dia antaramuka senarai komen-komen yang telah dikomen pada ruang Facebook Comment Box yang telah dipasang di blog ini. Dapat lihat?

Wow! Rupa-rupanya sudah 900 komen telah dibuat oleh pembaca.

Untuk mudah dan tampak cantik, aku telah membuat hanya 7 komen dipapar untuk satu halaman. Bermakna, aku boleh klik 'Next', 'Previous', 'First', 'Last' serta hanya klik pada nombor-nombor halaman. Anda cubalah sendiri.

Tutorial?

Maaf. Buat masa ini, Facebook Comment Box dan sistem Notifications sepertimana ada terpasang di blog ini tidak akan dibuat tutorial. Setelah banyak pembaca copy-paste-edit (plagiat) tutorial Facebook Shoutbox yang pernah aku buat suatu ketika dahulu kemudian mengaku tutorial tersebut dicipta oleh mereka-mereka, aku jadi agak kecewa. Bukannya kedekut ilmu. Sekurang-kurangnya bagilah sedikit penghargaan (credit). Ini tidak. Tidak mengapalah. Bila hati sudah terbuka untuk berkongsi, tutorial ini akan menyusul juga. InsyaAllah. Cuma masih belum tahu bila. Agaknya, biarlah aku menggunakan ia puas-puas dulu. Hehe.

UPDATE!

Baru-baru ini, aku telah terjumpa satu blog yang menyerupai blog aku. Template sama dan diberi nama Faceblog juga, cuma warna template-nya saja berlainan. Logo pun lain kerana telah diubahsuai menjadi 'Faceblog'. Agak kreatif jika dibandingkan dengan aku yang tidak tahu design Photoshop ini. Hehe. Tapi tidak mengapalah. Template ini percuma, jadi tidak hairanlah ramai orang pakai. Lagipun sistem Faceblog dia jauh beza lagi dengan Faceblog aku. Ada sesiapa mahu volunteer untuk ubah logo Blog Aduka? Hehe.

Kepada semua yang menyokong Blog Aduka, aku sangat-sangat menghargai sokongan anda semua. Anda selalu jenguk-jenguk blog ini. Selalu blogwalk. Selalu komen. Bagus. Teruskan menyokong!

UPDATE!

Bagi pengendali website biasa (regular site), anda boleh memasang Facebook Like Button With Open Graph dengan mengikuti tutorial yang pernah aku buat dahulu. KLIK SINI.

Untuk blogger pula, aku pernah buat tutorial Facebook Comment Box dan Like Button. Cuma cara lama.

KLIK SINI UNTUK FACEBOOK COMMENT BOX.

KLIK SINI UNTUK FACEBOOK LIKE BUTTON.

Untuk tutorial Facebook Share Button pula, KLIK SINI.

Untuk tutorial Facebook Shoutbox, boleh KLIK SINI.

Aduka: Kalau rasa artikel ini menarik untuk dikongsi, sila klik butang 'Share' atau 'Like'. Terima kasih.

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!

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.

Layout: Bosan!

Aku rasa macam dah bosan guna layout Facebook ni. Sana sini Facebook. Haha.

Ada sesiapa yang boleh volunteer design balik layout blog aku? Eleh. Tak ada punye. "Baik ko buat sendiri!" Paling kurang ayat camni la diorang akan sound aku balik. Aku tiada masa sebenarnya. Online pun sekejap-sekejap. Ditambah pula dengan perasaan malas. Haha.

Okey. Selepas ini, aku akan post tutorial macam mana nak buat Facebook comment box macam aku buat di blog aku ni ok? Sorry la. Tutorial yang lama tu tak boleh apply macam aku. Sure ada orang tertunggu-tunggu kan? Sengaja aku melambat-lambatkan. Biar aku pakai puas-puas dulu. Baru share kat korang! Haha. Jahat tak aku?

Satu lagi sebab aku tak buat tutorial pasal tu; ramai sangat orang copy and paste. Takde langsung kredit. Senang cakap plagiat ler! Dah la copy, pastu cakap yang die punye plak yang buat. Haram jadah tak namanya tu?! Takpe, takpe. Sabar aje. Lantaklah. Lepas ni, copy la nak copy. Lagipun bukan aku pun yang buat applikasi Facebook tu. Aku just ajar daripada apa yang aku study. Spread the knowledge, kata omputih! Hehe.

Okey. Chiow!

Jom layan lagu ni! Evergreen lagu ni..

Facebook Comment Box Setiap Page: Baru Aku Berpuas Hati!

Salam.

Alhamdulillah, berjaya! Dari semalam lagi aku bertungkus lumus menaik taraf aku punya blog agar sama dengan Facebook. Bukannya senang. Mahu pening kepala juga bermain dengan kod XFBML. Aku namakan blog aku ini sebagai Faceblog. Sesuai tak? Hehe.

Read more/less..

Sebenarnya masih banyak mahu ubahsuai. Link-link di atas (menubar) belum lagi dibuat. Pelan-pelan kayuh. Hehe. Hari ini, hampir 1 jam setengah aku menghabiskan masa di depan komputer untuk mengubahsuai blog aku ini. Rekod paling laju aku tukar layout. Sebenarnya, banyak aku ubah. API kod bagi Facebook akaun juga aku tersilap delete. Maka, kena buat dari awal. Banyak komen-komen lama turut terhapus! Maaf ya, komen korang mungkin termasuk sama. Huhu.

Kali ini aku mengubah layout Faceblog. Yang lama aku buang. Mungkin anda yang pernah jenguk di blog aku ini akan perasan aku menggunakan layout yang sama. Oh, tidak sebenarnya. Aku buang yang lama, ganti yang baru. Lagi, pada setiap artikel aku letak Facebook Comment Box. Kalau dulunya, aku gagal aplikasikan Facebook Comment Box yang berbeza pada setiap artikel. Sekarang setelah bertungkus lumus, akhirnya berjaya!

Klik untuk tumbesaran.

Gambar-gambar di atas ini menunjukkan beza Facebook Comment Box di antara artikel-artikel yang berlainan. Korang mungkin tidak perasan akan bezanya. Cuba komen.

Walaupun aku letak Facebook Comment Box pada setiap artikel, namun Blogger Comment Box masih aku kekalkan sebab aku tahu tidak semua blogger mempunyai akaun Facebook. Jadi aku kekalkan Blogger Comment Box yang biasa kita guna tu. Oh ya. Blogger Comment Box aku buat moderate sebab banyak sangat spammer entah dari mana duk komen-komen artikel aku. Huhu.

Facebook Share Button dan Like Button juga aku masih kekalkan.

Jika sebelum ini, aku pernah buat artikel tutorial bagaimana mahu memasang Facebook Comment Box di blog anda. Maaf. Itu cara lama. Ini cara baru. InsyaAllah, aku akan buat artikel baru dan terkini tentang bagaimana mahu memasang Facebook Comment Box cara yang lebih terkini dan sesuai untuk setiap artikel yang berlainan.

Tungguuuuuu..