การเขียน Facebook Application

ก่อนอื่นต้องขอบ่นก่อนเลยว่าผมงงมากๆ กับการเริ่มเขียน Facebook API เนื่องจาก Wiki ของ Facebook มี เนื้อหาต่างๆ มากมาย ทั้ง Low Level และ High Level ผสมกัน กว่าจะเข้าใจและพอเขียน App ที่ใช้ได้จริงๆ ก็เป็นอาทิตย์เพราะนั่งปวดเศียรเวียนเกล้ากับอยู่นานสองนาน ดังนั้นใครอยากเขียน Facebook Application ละก็ควรจะรู้สิ่งต่างๆ ข้างล่างไว้ก่อน เพื่อที่เวลาจะเริ่มหัดจะได้ไม่งงเหมือนกับผม

ก่อนอื่นสิ่งที่ต้องมีอันดับแรกคือ host ของตัวเองที่ไหนก็ได้ เพราะ Facebook จะไม่มีที่สำหรับ upload file ของเราเก็บให้ครับ ต้องมี host เป็นของตัวเอง แล้ว Facebook จะมาดึงข้อมูลจาก host ของเราไปแสดงบน facebook อีกทีหนึ่ง (ผ่าน Canvas Callback URL ใน Tab Convas ด้านล่าง) สิ่งที่ต้องทำมีดังนี้

1. http://www.facebook.com/developers/ เข้าหน้านี้แล้วกด Allow Access จะเป็นการอนุญาตการใช้ App เหมือน App บน facebook ทั่วไป (อย่าลืม bookmark ด้วยล่ะ! เพราะมันก็เป็น app ที่สามารถ bookmark ได้ตามปกติ)
2. คลิก Setup New Application ทางมุมขวาบน
3. ช่อง Application Name ก็กรอกชื่อ App ที่เราจะสร้างตามสะดวก
4. ติ๊ก Agree แล้ว Save Change
5. จะเข้าสู่หน้า Application Setting ซึ่งส่วนที่เราต้องไปเซ็ตค่ามีดังนี้ (ส่วนอื่นนอกจากนี้ ถ้าไม่ต้องการใช้อะไรที่ Advance จริงๆก็ไม่ต้องยุ่งครับ จะมีอะไรให้เซ็ตเยอะมาก)
1. Tab General ต้องเซ็ตดังนี้
* Application Name - อันเดียวกับที่ใส่ไปแล้ว
* Description - รายละเอียด Application ที่จะให้แสดงตอนขึ้น Allow Access ให้ดึง friend มาได้
* Icon - icon เวลา bookmark และ publish ลง wall
* Logo - แสดง logo ตอน Allow Access และอื่นๆ
* Developers - ถ้ามีเพื่อนหลายคนช่วยกัน จะแบ่ง permission ให้เข้ามาแก้ Application Setting ได้ด้วยก็ใส่เพิ่มตรงนี้
2. Tab Convas
* Canvas Page URL - URL ที่จะให้ผู้ใช้ App ของเราจำ หรือใส่ link ต่างๆ (จะเปลี่ยน URL เมื่อไหร่ก็ได้ตามต้องการ และไม่กระทบกับผู้ใช้ที่ bookmark app เราไว้)
* Canvas Callback URL - URL ที่เชื่อมโยงกับเว็บจริงของเราที่ทำการประมวลผลต่างๆ ใน app และส่งมาให้ผู้ใช้ได้ใช้ (host ของเรานั่นเองแหละ) เช่น http://www.myserver.com/facebook_app/index.php
* Render Method - อันนี้ให้เลือกเป็น Iframe ซึ่งผมจะอธิบายความแตกต่างระหว่าง เลือกแบบ FBML กับแบบ Iframe ให้อีกทีครับ (ใน Tutorial อันต่อๆ ไปจะสร้าง app ใน iframe ครับเลยต้องเลือกอันนี้)
* IFrame Size - อันนี้เลือกเป็น Resizable ซึ่ง Smart size คือการกำหนดให้ Auto Resize กรอบของ iframe ตามขนาดหน้าจอ Browser ครับ แต่ให้เลือกเป็น Resizable เพราะเราจะมีวิธีแก้ที่ดีกว่าภายหลังครับ หึหึ :P
3. Tab Convas
* Connect URL - กรอก URL host เราเข้าไปเหมือนเดิมครับ (อันนี้จริงๆ จะใส่อะไรก็ได้ เหมือนกับว่ามันแค่เอาไปเซ็ต path cookie domain เวลาเราจะใช้งาน Facebook Connect เท่านั้นเอง)
* Facebook Connect Logo - จะใส่หรือไม่ใส่ก็ได้ครับ ไม่มีผล
4. Tab Advanced
* Sandbox Mode - ถ้าเลือกเป็น Enable จะอนุญาตให้เฉพาะ Developer ของ App นี้เท่านั้นที่สามารถใช้งานทดสอบ App นี้ได้ (ตามช่อง Developers ที่ได้กรอกไว้ใน Tab General) ซึ่งหากเป็น App ที่อยากให้เพื่อนช่วยทดสอบ แต่ไม่อยากให้เพื่อนเข้ามายุ่มย่ามกับ Application Setting ของเราก็ปล่อย Disable ไปเถอะครับ
6. คลิก Save Changes ก็จะแสดงหน้า Profile ของ Application เราขึ้นมา ให้จำค่า API Key และ Application Secret เอาไว้ให้ดี เพราะต้องเอาไปใช้ใน code ของเราตอนเชื่อมกับ Facebook ครับ

7. ในหน้าเดียวกันกับข้อที่แล้วให้เลื่อนลงมาด้านล่าง คลิก Download the Client Library (จะ กด link นี้เพื่อดาวน์โหลดเลยกได้ แต่ไม่ยืนยันว่าจะได้ library เวอร์ชั่นล่าสุดครับ) ส่วนใครที่ไม่ได้ใช้ php สามารถ Download library ต่างๆ ในภาษาที่ใช้ได้ที่ Unofficial Client Libraries

8. Extract Client Library ออกมา จะมี folder footprints กับ php ซึ่ง folder footprint จะเป็น app ตัวอย่างซึ่งใช้ Setting แบบ FBML ในการรันใช้งาน (แต่เราเลือกเป็น Iframe ไว้) ดังนั้นจะใช้งานกับ Tutorial ฉบับนี้ไม่ได้ ใครอยากลองในนั้นก็ได้ครับ ตามสบาย

9. ใน Folder php ไฟล์ที่เราต้องใช้มีเพียงสองไฟล์คือ facebook.php และ facebookapi_php5_restlib.php ส่วนไฟล์ facebook_desktop.php ก็ตามชื่อครับ ไว้ใช้ถ้าเราสร้าง App ที่อยู่บน Desktop แต่เราสร้างบนเว็บอยู่แล้วก็ไม่ต้องยุ่ง และสุดท้ายคือ folder jsonwrapper ใช้สำหรับถ้า host ที่เราใช้อยู่ ไม่สามารถใช้ function json_encode และ json_decode ได้ก็จะต้อง include ใช้ library ในส่วนนี้ด้วย (ปกติแล้วถ้า host เป็น php5 ตั้งแต่ 5.2 ขึ้นไปจะสามารถใช้ฟังก์ชั่นนี้ได้อยู่แล้ว)

10. กลับมาที่หน้าเดิมกับข้อ 7 (อีกแล้ว) จะมีช่องนึงเขียนว่า Sample Code “Get started quickly with some example code!” นั่นแหละคลิกคำว่า example code เอาเลย แล้วจะมี popup เด้งขึ้นมาพร้อม code ตัวอย่างที่ป้อน API Key, กับ Application Secret ของ App เราไว้ให้แล้วเสร็จสรรพ!! เพียงแค่ copy paste ไปสร้างไฟล์ใหม่ชื่อ index.php แล้ว upload เข้า host เราให้ path ตรงกับ Canvas Callback URL ที่กรอกไว้ใน Tab Convas (อย่าลืม upload facebook.php และ facebookapi_php5_restlib.php ขึ้นไปด้วยให้อยู่ directory เดียวกันกับ index.php ของเรา)

11. ทดสอบพิมพ์ URL ตาม Canvas Page URL ที่กรอกไว้ใน Tab Convas ก็จะรัน app ได้ทันที โอ้!! มีรายเพื่อนของเราโผล่มาหมดเลย!! :P อะไรเนี่ย?? ยังไม่ต้อง code เลยซักแอะ แค่ Copy Paste เอง :P

12. ถ้าต้องการ Edit Application Setting อีกครั้งก็เข้าหน้า Facebook Developer ที่ bookmark ไว้แล้วจะมีรายชื่อ App ที่เราสร้างไว้ทางขวาบน (ใต้ปุ่ม Setup New Application) แล้วจะกลับมาที่หน้าเดียวกับข้อ 7 คลิกที่ Edit Settings ก็จะแก้ไขค่าต่างๆ ได้ครับ