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!

Akaun Facebook, Fan Page Sudah Dibubarkan

Salam Aidiladha.

Macam mana dengan perayaan Aidiladha korang pada tahun ini? Meriah? Banyak lembu dan kerbau tumbang? Diharap korang semua seronok dalam menyambut perayaan Aidiladha.

Read more/less..

Sudah beberapa hari aku tidak update blog. Begitu juga dengan aktiviti blogwalk. Beberapa jam yang lepas, aku telah mengambil keputusan yang drastik untuk membubarkan akaun Facebook aku. Terlalu banyak masalah yang berpunca dari Facebook. Terlalu banyak stalker, konflik, dan fitnah yang datang dari Facebook. Oleh itu, aku rasakan tindakan ini lebih sesuai setelah difikirkan semasak-masaknya.

Walaupun begitu, aplikasi Facebook yang berintegrasi di dalam blog ini masih berfungsi seperti sediakala, kecuali Fan Page, dan Like Button. Ia berintegrasi daripada akaun Facebook aku, bukannya dari akaun Facebook Developer. Facebook Comment Box yang ada di dalam blog ini masih berfungsi kerana ia berintegrasi dengan akaun Facebook Developer. Minta maaf aku ucapkan kepada sesiapa yang like Fan Page bagi blog aku sebelum ini. InsyaAllah, aku akan buka kembali Fan Page jika HANYA dirasakan perlu.

Oh ya. Terdapat blogger masih keliru bagaimana mahu komen di blog aku ini. Okey. Ada dua cara sebenarnya. Pertama, aku masih sediakan ruang komen blogger yang biasa. Kedua, komen dengan menggunakan Facebook Comment Box.


Gambar di atas adalah untuk komen blogger yang biasa.


Dan yang di atas ini pula adalah Facebook Comment Box. Untuk membolehkan korang komen di sini HANYA jika korang mempunyai akaun Facebook. Untuk pengetahuan, ia membenarkan korang auto-post setiap komen yang korang tulis terus ke Wall Facebook korang.

Senang dan mudah saja sebenarnya.

Ada apa-apa lagi pertanyaan, permintaan, atau sebagainya? Tinggalkan komen korang.

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.