Kali ini saya akan berkongsikan satu tutor berkaitan dengan facebook comment. Tutor ni kalau diikutkan memang kelihatan leceh sedikit. Sebab pengguna perlu membuat aplikasi facebook terlebih dahulu.
Apa-apa pun terpulanglah pada masing-masing sama ada nak ikut ataupun tidak tutor ni. Tutor ni dah seringkas dan sedetail yang boleh. Kalau diikutkan dah ada tutor di blog support Thesis For Blogspot. Tapi disebabkan apa pun saya tak pastilah kenapa dan mengapa tutor berkenaan tidak menjadi bila diaplikasikan pada Thesis Blogger Template Versi 2.
Tutor ini saya merujuk pada tutor yang dihasilkan di "doc fb" by saudara Khairol Asrol. Tapi bukan sepenuhnyalah. Saya cuma merujuk bahagian code facebook sahaja. Lain-lain tu saya buat sendiri.
Tutor Mendapatkan iD Aplikasi Facebook.
Sebelum memulakan untuk meninstall facebook comment ke dalam TFB ver.2. Anda dinasihatkan untuk membuat aplikasi fb untuk mendapatkan ID Aplikasi FB.
- Sila pergi ke alamat web ini --> FACEBOOK APPLICATION DEVELOPER.
- Kemudian anda dikehendaki membuat aplikasi facebook dengan mengklik button + Create New App. Seperti gambar dibawah ini.
Selepas anda klik + Create New App, akan muncul satu pop up dialog box seperti gambar dibawah ini. Masukkan "App Name" mengikut kesesuaian. Dalam erti kata lain. Apa-apa nama sahaja yang anda mahukan.
Kemudian "App Namespace" anda boleh masukkan sama seperti "App Name" tapi tak boleh ada space. Maknanya anda kena letak underscore ( _ ) dan minimum 7 karakter, kurang jangan ya.
- Bahagian "Web Hosting" tu tak perlu di-tick ya. Sebab kita takkan gunakan hosting. Cuma klik "Continue" sahaja.
Lepas tu kliklah "Continue". Akan ada muncul lagi satu pop up dialog box. Tapi kali ini ianya berkaitan "Security", di mana anda hanya perlu taipkan saja word yang muncul pada dialog box tu. Lepas tu klik saja "Submit".
Selepas dah siap dengan Security Check tadi. Akan siaplah aplikasi yang dibuat tadi. Carilah id aplikasi yang dibuat tadi seperti digambar ini.
Tutor Memasukkan Code Facebook Comment.
Sila log in ke dashboard blog > template > edit HTML > Proceed > Tick pada kotak Expand Widget Templates.
Tekan "Ctrl + F" button pada keyboard komputer/laptop anda. Kemudian cari code <body>. Bila dah jumpa. Sila copy and paste code dibawah selepas code berkenaan. Contoh seperti dibawah.
<body>
<!-- Facebook SDK script Code --><div id='fb-root'/><script> window.fbAsyncInit = function() { FB.init({ appId : 'CODE FACEBOOK APPS', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); FB.Event.subscribe('comments.create', function(response) { // do something with comments.create like notify me when new comment}); FB.Event.subscribe('edge.create', function(response) { //do something with edge.create like notify me when someone likes something}); }; (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><!-- End SDK script Code -->
Sila gantikan CODE FACEBOOK APPS dengan id application yang anda cipta tadi. Selepas dah masukkan code di atas. Sila cari barisan code seperti di bawah ini.
<div style='float:right;margin-bottom:10px;'><span class='st_google_hcount' displayText='Google'/><span class='st_linkedin_hcount' displayText='LinkedIn'/><span class='st_facebook_hcount' displayText='Facebook'/><span class='st_sharethis_hcount' displayText='ShareThis'/></div></div>
Copy and paste kan code dibawah ini betul-betul selepas code berkenaan.
<fb:comments expr:href='data:post.url' num_posts='6' width='580'/>
Code Java Script Aplikasi FB.
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Okay, sila copy and paste code java script diatas. Sebelum code </body> ataupun </html>. Code diatas adalah merupakan code untuk mengaktifkan aplikasi facebook. Kalau code diatas tidak dimasukkan ke dalam template. U all buat/cubalah banyak mana pun tutorial. Ianya takkan berfungsi kalau code diatas tiada dalam template u all.Arahan Selanjutnya:
Sila klik "PREVIEW" terlebih dahulu. Ini bertujuan untuk mengesan sama ada terdapat kesilapan ataupun "ERROR" pada pengubahsuaian code. Jika tiada apa-apa masalah. Bolehlah teruskan dengan mengklik "SAVE".Note:
Tutor ini boleh digunapakai untuk Thesis Blogger Template Versi 1 & 2. Template lain pun boleh juga. Tapi kena cuba dululah ya.Tiada jaminan sama ada tutor ini akan menjadi di blog anda ataupun tidak. Maklumlah pihak facebook kerap menukar sistem aplikasi mereka dari hari ke hari. Kalau tak menjadi tu. Maksudnya facebook dah tukar sistem lain & anda kenalah cari alternatif lain.
Updated Tutorial: 4 December 2012
Post a Comment