Social Plugins-Blogger 1 - Permulaan Integrasi .

Seperti Yang Anda lihat didalam Laman Blog ini . Terdapat Beberapa Sistem Yang digunakan menggunakan Sistem Social Plugins dari Facebook.

Jika Anda lihat dibawah Muka Ini Terdapat Sistem Komen Yang Akan meletakan Halaman ini sebagai kiriman pautan di Wall Anda.

Jika anda tidak percaya , Anda Boleh Mulakan dengan Login menggunakan Akaun Facebook Anda, dan Kemudian, benarkan capaian Applikasi yang saya buat seterusnya terus pergi ke bahagian komen blog untuk memberikan komen .

Seterusnya, anda boleh menggunakan komen untuk memberikan testimoni mengenai mana mana halaman didalam blog saya didalam wall anda dan dikongsikan kepada rakan rakan yang lain .


Keselamatan Data kandungan anda berada pada tahap yang terjamin , Kerana Sistem data yang digunakan merupakan sistem yang disimpan (host) didalam pelayan( server) Facebook sendiri . Jadinya saya pun sendiri tidak akan dapat mengetahui siapakah anda dengan lebih detail .atau pun apa apa maklumat mengenai diri Anda. Cukup untuk membuktikan yang memberikan testimoni kepada Blog saya merupakan orang yang benar benar wujud identiti sibernya. Serta menambahkan interaksi kepada pengunjung pengunjung yang lain bersama sama saya dalam blog ini .

Sekiranya , Ada yang pernah menggunakan Like Button , Ataupun Mengunakan Activity widgets Ataupun menggunakan Recomendation Yang berada si sebelah Kanan Atas blog Ini , dengan mengunakan Kaedah IFrame, Saya mengucapkanSyabas dan  tahniah diucapkan kepada Anda ,

Tetapi, Untuk Pengunaan beberapa Applikasi lain Seperti "Live Stream" yang akan membantu untuk Update Status pada laman blog anda , Ataupun Menggunakan FB Comment Yang Akan Meletakan Pautan Kepada Blog Anda didalam Wall Facebook pemberi komentar anda, sebenarnya mash memerlukan sedikit lagi kerja yang perlu dilakukan untuk meletakkan fungsi tersebut didalam blog anda.

Cuba Klik Pada Friends, Live Update status Rakan Rakan Anda, Sudah Update ke belum untuk FB anda Pada Hari ini ? Kalau Belum , Dipersilakan Untuk Update Facebook anda, Kalau belum, Apa kata kita try dulu , Jangan Lupa Update.



Wah , Ramai yang teruja, memang best kalau masuk dalam template Blog ni.....

Baiklah , Kita Mulakan kerja kita . ianya memerlukan dalam lingkungan 30 Minit hingga 2 jam Untuk meletakan widgets Anda, Tak mengapa jika anda tidak membuat pilihan secara Awal cuma fikir fikirkan dahulu , Bagaimana Anda ingin meletakkan widgets ini kerana ianya memerlukan lebar (width) yang sepadan dengan lebar ruangan yang Anda ada.

Mendaftarkan Aplikasi Social Plugins Facebook Anda,

Baiklah , Bagaimana Anda memulakan Proses Ini ?

Layari Laman Pendaftaran Applikasi Facebook - http://developers.facebook.com/setup/


Baiklah , Sekarang Anda hanya Isikan Tempat Kosong sahaja , 

Site name : Isikan Nama Blog Anda - Nama seperti tajuk yang berada di laman blog anda , 

Site URL : Sila Isikan URL Penuh Seperti : "http://komenfb.blogspot.com/" 

Sila Pastikan anda meletakan protokol Http "http://" dan trailing slash "/" dibelakang Blog anda. 

Sekiranya Proses tersebut berjaya , Anda Akan Melihat Skrin berikut .



Dan Disini Terdapat Maklumat Mengenai Applikasi yang anda telah didaftarkan

Seperti,


App Name : Blogger Komen
App URL : http://komenfb.blogspot.com/
App ID : Register baru dapat.
App Secret: Dah dapat , jangan dibuang merata-rata.


Tetapi, Sekiranya Anda Melihat Baris dibawah terdapat Sample Code Yang diberikan


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Blogger Komen</title>
</head>
<body>
<h1>Blogger Komen</h1>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
<p><fb:like></fb:like></p>

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '131730903511307', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/ms_MY/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>


Nota : bagi memudahkan kerja Anda, Sila Jangan Matikan Halaman Pendaftaran anda selagi tidak habis kerja, Sukar untuk Anda mendaftarkan domain yang baru sekiranya anda tersilap register, ( Bagi penguna blog yang lama)

Bagaimana pula Kalau tidak boleh langsung digunakan ? 

Sekiranya tidak boleh juga , Ada Cara lain yang saya akan kupas pada posting akan datang.

Disini, Ada sedikit cerita lagi mengenai XFBML, Sebenarnya Facebook Merupakan Platform web yang tersendiri. dan facebook sendiri dibangunkan secara Open Source (sumber terbuka). Jadinya, Untuk intergrasi diantara Facebook dan juga Laman Blogger, Memang Sedikit kerja pada HTML diperlukan untuk memastikan applikasi yang Anda buat benar benar berfungsi.

Bagaimana hendak gunakan Kod Ini didalam Laman Blog Anda ?

Anda perlu meletakkan Kod HTML Ini pada Blog anda Untuk membolehkan Applikasi anda berfungsi.

Sila Login ke Blogger Anda, http://www.blogger.com/


Kemudian pergi ke bahagian Design > Edit HTML


Sebelum Anda Melakukan Integrasi , Anda dinasihatkan agar Menyimpan Backup data Template Blog Anda . Dengan Klik Download full template > Save As

Sekiranya Blog Anda terjejas dalam proses integrasi ini ,  Data Templates Anda boleh di muatnaik kembali untuk mengembalikan blog anda kepada sediakala, Choose File > Pilih Kembali File .xml backup anda > Klik Upload

Proses Integrasi.Pada Blogger

Langkah Pertama - Menambah Protokol XFBML dalam Protokol HTTP

Pada Laman edit HTML Blogger Anda Akan Berjumpa baris program pada Baris Ke-3


<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>


Sila Gantikan Baris program diatas dengan baris Program


<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>

Dengan Menggantikan Baris Program ini , Anda menambah Bahasa Program XFBML didalam Laman Blog Anda .

Penambahan Meta-tag

Bagi Pengesahan Meta-tag UTF-8 Bagi Memudahkan Meta Crawler Untuk mencapai Kandungan Anda.

Sekarang , cuba cari <head> dan kemudian Setelah itu Anda tambah dibawah Baris <head> tersebut dengan Baris program dibawah.


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


Dan Ianya Akan Menjadi Begini


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Sila simpan (save) Hasil kerja anda sebelum meneruskan ke proses yang selanjutnya.

Memasukkan Baris Program Javascript SDK Facebook Connect.

Rileks , Jangan takut, dengar tajuk je gempak.

Kita masih lagi berada di Ruangan Edit HTML, pada tab design.

Javascript ini bertujuan untuk memanggil Aplikasi facebook anda untuk berinteraksi dengan applikasi XFBML yang Anda ingin pasang dalam Laman blog anda pada sistem ini, Anda boleh meletakkan kod ini di mana mana tempat dialam bahagian body HTML dari <body> sehingga </body>

Disini, saya cadangkan supaya memasukkan Baris Kod Ini sebelum </body> agar tidak menganggu kepada fungsi kepada mana-mana javascript yang lain didalam blog anda .

Dan ianya juga tidak akan mengganggu proses paparan kandungan blog anda sekiranya anda capaian internet anda sangat perlahan.

Mencarinya pun sangat mudah, Hanya skroll kebawah ruangan HTML editor untuk design blog anda, Anda Akan berjumpa dengan Baris Program </body>

Sila Salin Kod dibawah dan tampalkan ia sebelum </body>


<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'MASUKKAN-APP-ID-YANG-DIBERIKAN', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/ms_MY/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Pastikan apabila anda masukan nilai app id anda bentuknya 'xxxxxxxxxxxxx' tanpa sebarang jarak . dan tanda koma(,) berada rapat sebelah ('xxxxxxxxxxxx',)

Sekarang Kalau Belum Save, sila save hasil kerja anda.

Jika ianya boleh diterima, maknanya dah selesai separuh kerja.

Tahniah, kerana perkara yang paling penting didalam integrasi telah pun selesai. Sekiranya tidak dapat, Maka kenalah lihat balik mengikut balik langkah diatas satu persatu. Kalau ada masih ada Masalah, Komen sahaja disini. insya Allah kalau perlu dijawab saya cuba jawab .

Tetapi Kita Masih belum lagi memasukkan elemen widget didalam blog kita. Jadinya, Jom kita pergi kepada tajuk seterusnya.

Memasukkan Kod XFBML Didalam Blog Anda Menggunakan Widget HTML/Javascript.

Mengunakan widget "Html/Javascript" pada ruangan "Page element" Ini Akan memudahkan Proses Untuk Anda memasukkan Kod XFBML yang lain.

Masih lagi dibawah tab design, Disebelah kiri Edit HTML Ada pautan Page Element.

Dan Untuk Ini Mungkin Ramai yang telah bagaimana cara untuk meletakkan widget . Kalau keperluan mendesak mungkin saya akan membuat posting mengenai perkara ini .

Sekarang Kta lihat Showcase bagaimana rupanya widgets yang lain. dan kod penggunaan pantas . 
Nota:Nilai Lebar (width="xxx") Dan tinggi(Height="xxx")

Anda Boleh Mengantikan Nilai Lebar (width="xxx") dan nilai tinggi Kepada Nilai Pixel lebar Yang sebenar blog anda. Disini kalau anda tidak mengetahui Nilai sebenar, Anda boleh buat kaedah cuba-jaya.

Log Masuk dan Log Keluar




<p><fb:login-button autologoutlink="true"></fb:login-button></p>


Butang Kesukaan (like)




<p><fb:like></fb:like></p>


Ruangan Komen




<fb:comments numposts="10" width="550"></fb:comments>


numposts="10" > Bilangan Komen yang dipaparkan

Live Stream




<fb:live-stream event_app_id="APP-ID-APPLIKASI-ANDA" height="500" width="400"></fb:live-stream>




Untuk Maklumat Lanjut mengenai semua Social Plugins, Anda Boleh layari Laman Rasmi Social Plugins

Bagi mana-mana Laman Blog yang mempunyai design yang standard, Proses ini boleh dijalankan dengan mudah.

Nota Tambahan,
Mungkin Anda Akan menghadapi masalah untuk Copy-paste Kod-Kod yang diberikan ( lain yang disalin lain dengan yang ditampal) .

Sila gunakan Dekoder yang berada di Laman Web Centricle.
http://centricle.com/tools/html-entities/

Salin (Copy) Mana Mana Kod yang tidak dapat digunakan,

Gantikan kepada ruangan dibawah CONVERT TEXT TO HTML ENTITIES (VICE-VERSA)













Kemudian tekan Decode.

Kod Gantian Akan dikeluarkan.

Setelah itu Anda boleh gunakan ia pada laman web anda.

Penutup

Mungkin Penerangan saya ini agak teknikal sedikit bagi anda, Saya menggalakan kepada anda semua untuk mencuba sesuatu yang baru, Sebenarnya Integrasi seperti ini telah pun menyamai kerja website designer. Apa yang saya rasakan penting dan perlu telah pun saya beri dalam bentuk penerangan yang mudah, jadinya anda boleh mulakan untuk Menggunakan Social Plugin sebagai salah satu elemen interaktif di laman blogspot anda.

Mungkin Pada hari ini kita tidak nampak sebagai keperluan kepada blogger untuk melakukan integrasi seperti ini, Cuba manalah tahu kalau Social Plugins Facebook ini akan menjadi Trend untuk masa akan datang. Komen kepada Blog bukan lagi tertinggal hanya di laman blog.

Selepas ini Akan Ada Update yang lebih lanjut mengenai Aplikasi Facebook Social Plugins. Masih didalam usaha untuk update . Nantikan selepas ini , Kemaskini tetapan Applikasi didalam Application Dashboard.

Saya cuba dalam Minggu ini Untuk Update dan sementara itu , dijemput kepada rakan rakan semua untuk ke Laman Facebok saya.

http://www.facebook.com/Mahadi.Bin.Mahbol

Tak salah Rasanya nak letakkan Connection widgets disini.



Selamat Mencuba saya ucapkan kepada Anda.

Dan Jangan lupa Komen sikit mengenai Post Ini difacebook Tak Jauh pun cuma skrol sikit je kebawah. ... Rasanya ada dah nampak Widget Facebok Comment.

Peringatan: kepada penulis ebook curi.  
Sebab Tahap Kandungan ini posting sudah berada ditahap Profesional , Harap jangan di curi ye, Kembung perut makan duit Haram . terutamanya penulis e-book curi . Kalau nak mengajar orang pun , Janganlah makan hasil Haram .

Kalau untuk kegunaan bukan komersil dan Peribadi dialu - alukan untuk disampaikan. Tanpa mengira mana mana pihak . Musuh saya nak guna benda ni pun dialu alukan Alhamdulillah.

Kawan - kawan nak guna pun lagi bagus.

Ulasan