เมื่อวานผมได้เขียนนำเสนอวิธีการดักจับอีเว้นต์คลิกปุ่ม like ในกล่อง likebox ที่ได้มาจากเฟชบุกเอามาแปะที่เว็บของเรา ตอนนี้ผมก็ยังคิดเพิ่มเติมไม่ออกว่าจะเอามันไปประยุกต์ใช้อะไรดี แต่ก็รู้ว่ามันมีประโยชน์บ้างล่ะ
ผมเคยอ่าน document วิธีการใช้งาน facebook javascript SDK ที่ทางเฟชบุกเขียนเผยแพร่ไว้ ก็ไม่ค่อยเข้าใจ เฮียแกเล่นไม่มีตัวอย่างเอาเสียเลย ไปอ่านตามเว็บต่างๆก็ไม่ค่อยกระจ่างเท่าไร จนเมื่อได้ลองศึกษาอ่านมันจริงๆจังๆนี่แหละ จึงพอจะเข้าใจอยู่ได้บ้าง
เฟชบุกนั้นมันออกสคริปต์ javascript สำเร็จรูปไว้ให้เราใช้งาน ไว้ให้เราใช้ติดต่อกับเว็บของมันบ้างล่ะ เพื่อขอข้อมูลบางอย่างมาแสดงที่เว็บของเรา หรือใช้สำหรับเขียนโค้ดเพิ่มเติมเข้าไปในโค้ดที่มันทำไว้ให้เราใช้งาน จำพวก ปุ่ม like,กล่องคอมเม้นท์ ปุ่มล้อกอินด้วยเฟชบุก อะไรพวกนี้ ที่เอามาติดตามเว็บกันอย่างแพร่หลาย
กล่องคอมเม้นท์ของเฟชบุก ถ้าเราอยากรู้ว่ายูสเซอร์คลิกปุ่มส่งข้อความแล้วนะ เราก็สามารถรู้ได้เหมือนกัน ไว้วันหลังถ้าไม่ขี้เกียจและเห็นว่าเป็นประโยชน์ก็จะเขียนให้อ่าน
ดู Demo ก่อนมั้ย ก่อนจะดุโค้ด เข้าไปหน้า Demo แล้วลองคลิปปุ่ม like แล้วลองคลุก unlike ดู ผมเขียนให้มันแสดง dialogbox ขึ้นมาเพื่อบอกว่า ผมจับได้นะว่าคลิกปุ่ม like ผมจับได้นะว่าคลิกปุ่ม unlike
ดูโค้ดทั้งหมดที่ทำให้หน้านั้นทำงาน
<html xmlns:fb="http://ogp.me/ns/fb#"> <head> <meta charset="utf-8"> </head> <body> <fb:like-box href="http://www.facebook.com/select2webdotcom" width="292" show_faces="true" stream="true" header="true"></fb:like-box> <div id="fb-root"></div> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({ appId : '164430746956784', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse XFBML oauth : true //enables OAuth 2.0 }); FB.Event.subscribe('edge.create', function(href, widget) { // do something here alert('click like : +1'); }); FB.Event.subscribe('edge.remove', function(href, widget) { // do something here alert('click unlike : -1'); }); }; ( 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> </body> </html> |
เตือนสติกันไว้ว่า เน้นตรงนี้นะว่าห้ามอ่านผ่าน
ในโค้ดก้อปปี้ไปใช้งานได้ แต่ต้องเปลี่ยนอยู่ 3 จุด
1.เปลี่ยนไปเป็น appID ของตัวเอง
appId : '164430746956784', |
2. เปลี่ยนไปเป็นเว็บของตัวเอง
<fb:like-box href="http://www.facebook.com/select2webdotcom" width="292" show_faces="true" stream="true" header="true"></fb:like-box> |
3. ต้องเอาไปรันบนเว็บจริงๆที่ตรงกับที่ระบุไว้ตอนสร้าง app ในเฟชบุกเท่านั้น โค้ดจึงจะทำงาน เพราะเฟชบุกมันจะคอยเช็ก
อธิบายโค้ด
เริ่มแรก โครงสร้าง html 2 ตัว ตัวแรกเป็นกล่อง likebox กับอีกตัวมันไว้ fb-root มันไว้เป็นคอนเทนเนอร์สำหรับโหลดจาวาสคริปต์
เหตุที่มันไม่ใช้แท็ก ลงไปคอนเทนเนอร์ fb-root แล้วให้เริ่มทำการโหลดสคริปต์ขึ้นมา
( 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);
}()); |
ส่วนสุดท้ายก็กระตุ้นการทำงานโค้ดสำเร็จรูปของเฟชบุก ที่เพิ่งโหลดมาหยกๆให้ทำงานในเบราเซอร์ โค้ดของเราก็เขียนแทรกเข้าไปในนี้แหละ มันจะได้พลอยถูกกระตุ้นและใช้งานได้ไปด้วย (จะว่าโค้ดเราเต็มๆก็คงไม่เต็มปาก มันเป็นไวยากรณ์จากเฟชบุกนั่นแหละ เราเอามาวางเพื่อใช้งานตามวัตถุประสงค์)
window.fbAsyncInit = function() {
FB.init({
appId : '164430746956784',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true //enables OAuth 2.0
});
FB.Event.subscribe('edge.create', function(href, widget) {
// do something here
alert('click like : +1');
});
FB.Event.subscribe('edge.remove', function(href, widget) {
// do something here
alert('click unlike : -1');
});
}; |
บทความนี้ขออุทิศคุณงามความดีให้คุณเอฟ ที่ให้กำลังใจในการตื่นนอนแต่เช้า
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
Leave a Reply