เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) (2) by heha

เขียนเดือนละอันฮาๆ มาต่อจากคราวที่แล้วกันครับกับหัวข้อครั้งก่อน “เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP)” (ตั้งชื่อง่ายโคตร) ครั้งนี้ผมจะอธิบายภาพรวมทั้งหมดของ Facebook ว่ามันมีอะไรให้เราบ้าง เราควรใช้งานตรงไหนบ้าง โดยก่อนอื่นผมจะอธิบายก่อนว่า facebook.php และ facebookapi_php5_restlib.php ต่างกันยังไง

PHP Client Library Structure

• facebook.php - มี class Facebook ให้ใช้งาน อันนี้เป็น file ที่เราจะเริ่มต้น new class object ตัวนี้ขึ้นมาครับ เป็นเหมือนตัวกลางที่คอยช่วยทำหน้าที่ authenticate การติดต่อ facebook กับเราให้ชีวิตเราง่ายขึ้นครับ โดย class Facebook นี้ใช้แค่ตอนสร้าง object ซึ่งจะช่วยเราด้านการติดต่อกับ server facebook เท่านั้น หลังจากเชื่อมต่อได้แล้วนั้นเราจะแทบไม่ยุ่งกับ class นี้เลย และใน class นี้จะมี property ชื่อ api_client ที่เก็บ object ของ class FacebookRestClient ในไฟล์ facebookapi_php5_restlib.php ไว้ให้
• facebookapi_php5_restlib.php - มี class FacebookRestClient ตัวนี้เป็นตัวเก็บ Facebook API ทั้งหมดจริงๆ เอาไว้ ซึ่งจะทำหน้าที่ call Webservice ของ facebook ให้เราแบบ REST ซึ่งเวลาเราเปิด wiki ใน facebook แล้วเจอฟังก์ชั่นไหนอยากใช้งานก็จะมาเรียกใช้จาก class นี้แหละ

และจาก code ที่เราใช้งานไปคราวก่อนนั้นมีความหมายดังนี้ครับ

require_once 'facebook.php';

$appapikey = '569694dad5f6f65235422ae7b7d47b15';
$appsecret = '10a3c7d4beccc5c26c0628681aff0ab7';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();

// Greet the currently logged-in user!
echo "<p>Hello, <fb:name uid=\"$user_id\" useyou=\"false\" />!</p>";

// Print out at most 25 of the logged-in user's friends,
// using the friends.get API method
echo "<p>Friends:";
$friends = $facebook->api_client->friends_get();

$facebook = new Facebook($appapikey, $appsecret);
ใส่ Application API Key กับ Application Secret ที่ได้มาเพื่อสร้าง Object class Facebook เพื่อเริ่มต้นการติดต่อกับ server facebook

$user_id = $facebook->require_login();
ตรวจสอบว่า user ได้ login เข้า facebook ไว้หรือยัง หากยังจะ redirect เข้าหน้า Login ของ facebook โดยอัตโนมัติ

$friends = $facebook->api_client->friends_get();
เรียกใช้ API Facebook friends.get

ปัญหามันอยู่ตรงนี้แหละครับ ตอน call API ถ้าคลิกไปอ่านในลิ้งค์จะพบว่ามันมี parameter ที่รับค่าเป็นดังนี้…

บร๊ะเจ้า!!! มันให้เราส่งอะไรไปมั่งเนี่ย!!! ไม่เห็นรู้เรื่องเลย ตอนเราใช้งานก็ส่ง parameter เปล่านี่หว่า ทีนี้ลองมาดูที่ class FacebookRestClient กันบ้าง method friends_get() จะพบว่ามันประกาศไว้แค่นี้

Line 979 : public function &friends_get($flid=null, $uid = null) {

ความจริงก็คือ class FacebookRestClient เนี่ยมันแอบ ใส่ api_key, call_id, sig, v, session_key, format ไว้ให้เราไปหมดแล้วครับ โดยที่เราไม่ต้องไปสนใจ parameter พวกนี้เลยแม้แต่น้อย ดังนั้นเวลาอ่าน API ใน wiki ของ facebook ถ้าเจอ parameter พวกนี้แทรกๆ อยู่ก็ไม่ต้องสนใจเลยครับ ข้ามไปเลย มันเป็นระดับ Low Level เกินไปครับ สำหรับ callback มันเป็น API ของ javascript ครับ php ไม่เกี่ยว – -” ในที่นี้ parameter ที่เราใช้ได้จริงๆมีแค่ flid กับ uid เท่านั้น เหอๆ ทำให้งงดีจริงๆ

Facebook Library Component

ต่อไปเป็นเรื่อง Component ใน facebook API ว่ามี library อะไรให้เราใช้กันมั่ง ดังนี้

• Facebook API – คือ function ต่างๆ ที่สามารถเรียกใช้ได้ผ่าน Web Service ของ Facebook ส่วนใหญ่เราจะเรียกใช้ผ่าน PHP Client Library ที่ลองใช้กันไปแล้วนั่นเอง
• FBML (Facebook Markup Language) – คือ tag พิเศษที่ทาง facebook ออกแบบขึ้นเอง เพื่อให้นำไปแทรกปนกับ HTML ตามที่เราต้องการได้เลย ช่วยให้เราสามารถแสดงผลข้อมูลได้โดยไม่ต้อง call Facebook API ด้านบนเลยในบางกรณี รวมทั้งพวก Component ที่เป็น template ของ Facebook อยู่แล้วก็จะปนๆ อยู่ในนี้ด้วย ซึ่งตรงนี้ทำให้ชีวิตการสร้าง App Facebook ง่ายขึ้นเป็นกอง (ตัวนี้ไม่จำกัดว่าเป็น Server Side Script ภาษาอะไร เพราะเราแทรกไปกับส่วน View ของ HTML ธรรมดาของเราเลย) แต่มีข้อจำกัดอยู่เล็กน้อยคือ ไม่สามารถใช้กับประเภท App ที่เลือกแบบ IFrame ได้ ต้องเลือกเป็น FBML เท่านั้น แต่ไม่ต้องห่วงเรามี XFBML เข้ามาแก้ในส่วนนี้
• XFBML – คือวิธีใช้ FBML ใน Facebook App ที่เป็นประเภท IFrame โดยวิธีใช้นั้นสามารถแทรก tag FBML ลงไปได้เลยโดยตรงเหมือน FBML ทุกประการ เพียงแต่เราต้องฝัง javascript เข้าไปด้วย (เลขเวอร์ชั่นอาจเปลี่ยนแปลงภายหลัง คลิกไปดู code ที่ wiki ของ facebook โดยตรงดีกว่านะ) ซึ่งจะส่งผลให้หน้าเว็บของเราประมวลผล FBML ได้เช่นเดียวกับใช้งาน Application ประเภท FBML แต่จะติด Delay นิดหน่อยตรงที่ต้องรอโหลด javascript ให้เสร็จสมบูรณ์ก่อนหน้าเว็บจึงจะเปลี่ยนโดยสมบูรณ์ (ถ้าจะแก้ต้องสร้างระบบ Cache ด้วยตัวเอง) และจะมี tag ที่อนุญาตให้ใช้งานน้อยกว่า FBML แต่อย่างไรก็ตาม เราก็มีวิธีทำให้ใช้งานได้เทียบเท่า FBML อยู่ดีครับ สำหรับวิธีฝั่ง script ให้ใช้งาน XFBML ได้สามารถอ่านได้ที่หน้านี้
• FQL – คือการดึงข้อมูลจาก Facebook โดยใช้ภาษาคล้ายๆ SQL คือมี SELECT FROM WHERE คล้ายๆ กันเลย ใช้ IN ใช้ Subquery ได้ แต่ไม่แนะนำสำหรับมือใหม่ครับ ใช้เพียง FBML ธรรมดาทั่วไปส่วนใหญ่มักจะเพียงพอต่อการใช้งานทั่วไปอยู่แล้ว
• FBJS – คือ Javascript Library ที่ใช้สำหรับทำงานทั่วไปใน Facebook App ชนิด FBML ครับ (ความสามารถเทียบได้กับ Javascript Framework พวก Prototype, Jquery) ที่ต้องมีตรงส่วนนี้เพราะหากเราใช้งาน Application เป็นชนิด FBML เราจะไม่สามารถใช้ Javascript Framework ที่เราๆ ถนัดและเคยชินกันได้ครับ เลยถูกบังคับให้ใช้ FBJS ไปในตัว เป็นความเศร้าอย่างนึงของการสร้าง Application ชนิด FBML ครับ (หัวข้อก่อนผมจึงให้เลือกชนิด Application เป็น IFrame ครับ หุหุ)
• Facebook Connect – คือ Library javascript ที่เอาไว้ใช้งานติดต่อกับ Facebook จากเว็บอื่นๆโดยไม่ต้องผ่านเว็บเพจของ Facebook เลยซักหน้า (มันคือ Javascript Client Library นั่นเอง มี function ใน Facebook API เกือบจะครบเลยเช่นเดียวกับ PHP แต่มักถูกเรียกใช้เมื่อต้องให้ User คลิกอะไรบนหน้าเว็บเพจก่อนทำงาน เป็นต้น) ณ ตอนนี้ที่ผมเห็นใช้งานกันหลักๆ ก็คือการอาศัย Login ของ Facebook แทนการ Register ผ่านเว็บไซต์นั้นๆ โดยตรง ซึ่งสร้างความสะดวกให้กับผู้ใช้เป็นอย่างมาก เนื่องจากเพียงคลิกประมาณ 1-2 ครั้งก็สามารถใช้งานได้เสมือน login เข้าเว็บไซต์นั้นแล้วโดยไม่ต้อง register เลยแม้แต่น้อย (หน้าที่เดียวกับ OpenID ครับ) และยังดึง Friend List มาโชว์ที่เว็บนั้นๆ เองได้อีกต่างหาก ช่างสะดวกจริงๆ ซึ่งในความเป็นจริงแล้วจะมี Component ที่สร้างไว้สำเร็จรูปแล้วให้เราเลือกใช้มากมาย เช่น Popup Invite Friend ที่ใส่แค่ 1-2 บรรทัดก็สร้างได้ง่ายๆ หรือแม้แต่กรอบ Popup style Facebook แต่เนื้อหาข้างในเป็นของเราเองก็สามารถทำได้เช่นกัน และเนื่องจากความจริงแล้ว XFBML ถูก Design มาสำหรับการใช้งานนอก Facebook อยู่แล้ว พวก Application ประเภท IFrame ซึ่งจริงๆ มันต้องแอบ link ไปหาเว็บนอก Facebook อยู่แล้วเลยได้อานิสงค์จาก Library ตัวนี้ด้วยนั่นเองครับ

The Difference between FBML App and IFrame App

จะเห็นว่าผมมีการอ้างถึง Application แบบ FBML กับแบบ IFrame หลายครั้งมาก และมี มหากาพย์เปรียบเทียบข้อดีข้อเสียอย่างละเอียดระหว่าง FBML และ IFrame App อยู่ ผมได้สรุปเท่าที่จำเป็นมาแล้ว เรามาดูข้อดีข้อเสียของทั้งสองอย่างนี้กันดีกว่าครับ

FBML App

+ เหมาะสำหรับการทำ App แบบเล่นๆ ขำๆ เน้นเสร็จเร็ว ขนาดเล็ก ถ้าไม่มีความรู้เรื่องอะไรมาก่อนเลย
+ ทำงานได้รวดเร็วหากมีการใช้ FBML tag สำเร็จรูปจำนวนมาก เนื่องจาก FBML จะถูก parse เป็น HTML + Javascript ที่จำเป็นให้เลยตั้งแต่ประมวลผลฝั่ง Server Side
+ มีหลักการทำงานดูคล้ายกับเว็บทั่วไปมากกว่า
+ มี URL ที่สวยงาม และสมจริงกว่า IFrame App
+ มีระบบ Authenticate ที่ make sense มากกว่า IFrame App
- การจะย้ายระบบที่สร้างไว้ออกนอก Facebook ไปอยู่บนเว็บตัวเองหรือนำเข้า Social Network ค่ายอื่นๆ จะกระทำได้ยากมาก หรือต้องแก้ code เป็นจำนวนมาก
- ใช้ CSS, Javascript Framework ที่เราเคยชินอยู่แล้วไม่ได้ – -”

IFrame App

+ จะง่ายและเร็วมากหากเรามีระบบเว็บของเราอยู่นอก Facebook อยู่แล้ว แล้วต้องการนำมาแก้ให้อยู่ภายใต้ Facebook
+ ผู้ใช้จะสามารถใช้งานได้เร็วกว่าสำหรับการทำงานในระยะยาว <– อันนี้ผมยังไม่ confirm ครับ แต่เขาว่ามางั้น
+ ใช้ CSS, Javascript Framework ที่เราถนัดได้อย่างเต็มที่!!! (เย้!)
+ ถ้าเว็บมีการใช้ AJAX หนักๆ มันจะเร็วกว่าแบบ FBML อย่างแน่นอน เพราะไม่ต้องยิง Request ผ่าน Server Facebook ที่เป็นตัวกลางก่อน
+ Debug HTML, Javascript ได้ง่ายกว่า FBML App เพราะเราก็ใช้ Tools ทั่วๆ ไปอย่างที่เราเคยใช้กัน (เช่น Firebug) ที่สำคัญกว่าคือเราสามารถ test ระบบใน Localhost ได้เลยในส่วนของระบบที่ไม่ต้องติดต่อ Facebook API ถ้าเป็น FBML การจะ Debug Server Side Script ผ่าน Facebook จะยากลำบากกว่าพอสมควร
- ระบบ Authenticate ค่อนข้างมีปัญหาเมื่อใช้ร่วมกับ Facebook Connect API (อันนี้ยังไม่รู้ว่าผมโง่เองหรือเปล่า แต่พยายามแก้มาเป็นอาทิตย์ก็หาวิธีดีๆ ไม่ได้ มีแต่วิธีเกรียนๆ – -”)
- URL จะเมื่อใส่ javascript auto insert URL แล้ว(1 บรรทัดเท่านั้น) click link เป็นการต่อท้ายด้วย #page พูดง่ายๆ คือคล้าย Gmail ที่เปลี่ยน URL ตาม AJAX ที่ Request ไปนั่นเอง (แต่อันนี้ก็แค่ URL ไม่สวยเท่า FBML ฮาๆ)
- การใช้งาน XFBML ต้องรอให้ Javascript ในหน้าโหลดเสร็จก่อน จึงจะมีการ parse tag FBML ที่ใส่ไว้ให้ทำงานได้ถูกต้องจริงๆ สรุปง่ายๆ ว่าเป็นการ parse FBML เป็น HTML + Javascript ที่จำเป็นในฝั่ง Client Side จึงทำให้ทำงานได้ช้ากว่าแบบ FBML ต้องมีการทำระบบ Cache เองถ้าต้องการให้ทำงานได้เร็วสมใจ

โดยสรุปแล้วหากต้องการสร้างแค่ App ขำๆ ไม่จริงจัง ทำแล้วทิ้งแนะนำให้เลือกเป็น FBML ครับ ส่วนแบบ IFrame แนะนำสำหรับมือ Pro และทำ App แบบจริงจัง ใช้งานระยะยาว ซึ่งส่วนใหญ่แล้วข้อจำกัดใน Iframe App ที่ FBML เหนือกว่านั้นสามารถแก้ไขได้แทบทุกข้อ เพียงแต่เราต้องลงแรงในการทำเองไปมากหน่อยเท่านั้นเองครับ ซึ่งในระยะยาวแล้วผมมองว่า “คุ้ม” ครับ อันนี้ขึ้นอยู่กับว่า Application ของคุณสร้างขึ้นเพื่ออะไรแล้วละครับ (สำหรับผมผมเลือก IFrame App ครับ)

Tips

• วิธีหา User Id ของ User ที่เราต้องการให้คลิกที่เมนู Friend แล้วดู Friend List ของเราเลื่อนเม้าส์ไป Copy link ที่ friend ที่เราต้องการ แล้ว User Id จะแอบอยู่ใน URL อันนั้นแหละครับ – -” (เป็นวิธีที่ดีที่สุดแล้วครับ ฮาๆ)
• การใช้งาน XFBML, Facebook Connect จะมี Function FB_RequireFeatures() อยู่ในบางส่วนของ Code ส่วนนี้ทำหน้าที่คล้ายการ Include Library ที่เราต้องการจะใช้ครับ เพียงแต่เราใช้การ “คร่อม” คำสั่งที่ต้องการจะใช้งาน แทนการประกาศไว้บรรทัดเหมือนเหมือนอย่าง require_once ของ PHP เนื่องจาก Javascript ที่เราฝังไว้ ไม่ได้โหลด library javascript ตัวเต็มมาทั้งหมดครับ (ไม่งั้น User จะเสียเวลาโหลดหน้านานมากในการ load library ที่ไม่ได้ใช้มาทั้งหมด) แต่มันจะคอยแอบดึงข้อมูล Library ที่ต้องใช้งานจริงๆ ที่เหลือออกมาตาม FB_RequireFeatures ที่เราระบุไว้นั่นเองครับ
• วิธีทำให้ XFBML ใช้งาน Tag FBML ที่เหลือที่ไม่ได้ List อยู่ในหน้านี้ได้คือการใช้ tag <fb:serverfbml> มาครอบ tag FBML พิเศษที่เราต้องการจะใช้ครับ โดยมันจะแอบฝั่ง IFrame ที่ link ไปยัง Facebook ทำให้เราใช้งาน FBML แปลกๆ ได้ครบทุกอย่าง (เช่นฟอร์มการ Invite Friend ก็เป็นหนึ่งในนั้นครับ)
• คำสั่ง Sync URL Iframe ตาม link ที่ผู้ใช้คลิกๆ นั้นเพียงแค่ใส่ไปว่า
  FB.CanvasClient.syncUrl();
  บรรทัดเดียว แล้ว Facebook จะคอยเติม URL ต่อท้ายให้เราเอง ช่างสะดวกสบายจริงๆ

โอย เหนื่อย เนื้อหามันเยอะจริงๆ – -” คราวหน้ายังไม่แน่ใจว่าจะเขียนต่อหรือเขียนเรื่อง Testing ขอคิดดูก่อน~~