เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) ฉบับปรับปรุง Graph API by heha
30
Aug24
Aug24
เนื่องจาก Facebook ได้ประกาศ API ใหม่มาตั้งแต่เดือนเมษายน ชื่อว่า Graph API ตอนนี้ก็ควรแก่เวลา(ตั้งนานแล้ว) ที่จะ update บทความใหม่เสียทีองค์ประกอบการทำเกม Facebook เกมหนึ่งมีดังนี้
- Hosting สำหรับเก็บไฟล์ รองรับ load การใช้งานทั่วไป และรองรับ php5.2 ขึ้นไป (หากต่ำกว่านี้ต้องหา library json_encode, json_decode เพิ่มเอง)
- ประสบการณ์การพัฒนา Web Application ด้วย php และ mysql ใช้สร้างตัว Core เกมทั้งหมด (จริงๆ แล้วภาษาอื่นก็ได้แทบทุกภาษา แต่ในบทความนี้ผมจะกล่าวแต่ php)
- Facebook SDK สำหรับติดต่อกับ Facebook ในที่นี้จะแบ่งออกเป็นสองส่วนใหญ่ๆ คือ PHP SDK และ Javascript SDK
- ทำการสร้าง Application ใน Developer ของทาง Facebook (ฟรี และสามารถใช้งานได้ทันที)
ในบทความนี้จะกล่าวถึงข้อ 4 นะครับ สิ่งที่ต้องทำมีดังนี้
- http://www.facebook.com/developers/ เข้าหน้านี้แล้วกด Allow Access จะเป็นการอนุญาตการใช้ App เหมือน App บน facebook ทั่วไป
- คลิก SetUp New Application ทางมุมขวาบน
- ช่อง Application Name ก็กรอกชื่อ App ที่เราจะสร้างตามสะดวก
- ติ๊ก Agree แล้ว Save Change
- จะเข้าสู่หน้า Application Setting ซึ่งส่วนที่เราต้องไปเซ็ตค่ามีดังนี้ (ส่วนอื่นนอกจากนี้ ถ้าไม่ต้องการใช้อะไรที่ Advance จริงๆก็ไม่ต้องยุ่งครับ จะมีอะไรให้เซ็ตเยอะมาก)
- Tab About ต้องเซ็ตดังนี้
- Application Name - อันเดียวกับที่ใส่ไปแล้ว
- Description - รายละเอียด Application ที่จะให้แสดงตอนขึ้น Allow Access ให้ดึง friend มาได้
- Icon - icon เวลา bookmark และ publish ลง wall
- Logo - แสดง logo ตอน Allow Access และอื่นๆ
- Developers - ถ้ามีเพื่อนหลายคนช่วยกัน จะแบ่ง permission ให้เข้ามาแก้ Application Setting ได้ด้วยก็ใส่เพิ่มตรงนี้
- Contact Email - หากผู้ใช้ Application ของเราติดปัญหาใดๆ แจ้ง Report ผ่าน Facebook จะมีอีเมล์ยิงเข้าอีเมล์ที่ระบุในช่องนี้
- Tab Website
- Site URL - กรอก URL host เราเข้าไปเหมือนเดิมครับ แต่ให้ใส่ ROOT URL นะครับ เช่นเราเก็บ code facebook app จริงๆ ไว้ที่ http://www.mydomain.com/myfacebookapp ก็ใส่เป็น http://www.mydomain.com ไม่งั้นจะมี bug cookie ในภายหลัง
- Site Domain - ใส่เป็น mydomain.com (ไม่มี www และ http://) เพื่อป้องกัน bug cookie เช่นกัน
- Tab Facebook Integration
- Application ID - หมายเลข application ของเรา ให้ copy เก็บไว้อ้างอิงตอนใช้ SDK ภายหลัง
- Application Secret - รหัสลับของ application ของเรา ให้ copy ไว้อ้างอิงตอนใช้ SDK ภายหลังเช่นกัน
- Canvas Page URL - URL ที่ใช้เข้าถึง Application ของเรา (จะเปลี่ยน URL เมื่อไหร่ก็ได้ตามต้องการ และไม่กระทบกับผู้ใช้ที่ bookmark app เราไว้)
- Canvas Callback URL - URL ที่เชื่อมโยงกับเว็บจริงของเราที่ทำการประมวลผลต่างๆ ใน app และส่งมาให้ผู้ใช้ได้ใช้ (host ของเรานั่นเองแหละ) เช่น http://www.myserver.com/facebook_app/ (ต้องมี / ปิดท้าย ไม่งั้นจะไม่ได้)
- Render Method - อันนี้ให้เลือกเป็น Iframe อีกไม่นาน Facebook จะยกเลิกการใช้งาน FBML แล้ว ดังนั้นไม่ต้องไปสนใจมันแล้วครับ
- IFrame Size - อันนี้เลือกเป็น Auto-resize เพื่อให้เราสามารถใช้ script สั่งให้ขนาด iframe สูงตาม application จริงๆ ของเราโดยอัตโนมัติ
- Tab Mobile - tab นี้ใช้เมื่อ application ของเราเขียนโดยใช้ Android SDK หรือ iPhone SDK โดยตรงเท่านั้นครับ
- Tab Advanced
- Sandbox Mode - ถ้าเลือกเป็น Enable จะอนุญาตให้เฉพาะ Developer ของ App นี้เท่านั้นที่สามารถใช้งานทดสอบ App นี้ได้ (ตามช่อง Developers ที่ได้กรอกไว้ใน Tab About) ซึ่งหากเป็น App ที่อยากให้เพื่อนช่วยทดสอบก็ปล่อย Disable ไปเถอะครับ
- Migrations - จะมีส่วนย่อยๆ 4 ส่วนได้แก่
- JSON Encoding Empty Arrays - Enabled เลยครับ ตรงนี้
- Stream post URL security - หากต้องการให้ wall ที่โพสต์โดย app นี้ link ไปเว็บอื่นๆ นอกเหนือจากเว็บที่เก็บ app นี้เองได้ให้คง Disabled ไว้ แต่หากใช้แค่เว็บเดียวก็ Enabled เลยครับ
- Canvas Session Parameter - Enabled เลยครับ
- OAuth 2.0 for Canvas (beta) - Enabled เลยเช่นกัน
- Tab About ต้องเซ็ตดังนี้
- คลิก Save Changes ก็จะแสดงหน้า Profile ของ Application เราขึ้นมา อย่าลืมจำค่า Application ID และ Application Secret เอาไว้ให้ดี เพราะต้องเอาไปใช้ใน code ของเราตอนเชื่อมกับ Facebook ครับ
- ในหน้าเดียวกันกับข้อที่แล้วให้เลื่อนลงมาด้านล่าง คลิก Download the Client Library แล้วจะเข้าสู่เว็บไซต์ Git-hub ให้คลิก Download Source ที่ขวาบน
- Extract Client Library ออกมาจะพบ folder src ให้เข้าไป upload ไฟล์ facebook.php ขึ้น server
- เข้าไป Copy File ตัวอย่างของผม แล้วสร้างเป็นไฟล์ index.php upload ขึ้นไปไว้ที่เดียวกับ facebook.php
- แก้ไข $appId และ $secret โดยกรอก Application ID และ Application Secret ที่เราจำมาเมื่อกี้ สำหรับ $start_page คือ URL ที่จะย้อนกลับมาหลังจากผ่านหน้า allow access ไปแล้ว
- upload ขึ้น server ตาม Canvas URL ที่กรอกไว้ และทดสอบลองเข้า http://apps.facebook.com/facebook_app (Canvas Page ที่ตั้งไว้)
จบแล้วครับ ไฟล์ตัวอย่างของผมนี้แก้ไขจาก example.php ให้ใช้ง่ายขึ้นแล้ว โดยไฟล์นี้จะมีตัวอย่างการใช้งาน code ง่ายๆ ด้วยเรียบร้อยครับ สำหรับใครต้องการดูข้อมูล Graph API เพิ่มเติมสามารถดูได้จาก Documentation ของ Facebook ที่นี่ ครับ (เข้าไปแล้วคลิก Graph API เพื่อดูตัวอย่างคำสั่งอื่นๆ ที่เหลือครับ) ขอให้สนุกกับการสร้าง Application บน Facebook นะครับ 
Enjoy this article?
Consider subscribing to our RSS feed!
17:17 on November 2nd, 2010
โอ้ เยี่ยมมาก ได้ประโยชน์จริงๆ ครับ ขอบคุณจากใจ
09:34 on November 13th, 2010
อยากให้อัพเดท กับเวอร์ชั่นล่าสุดหน่อยครับ เพราะดูข้อมูลบางฟิลด์ไม่ตรงกัน พอศึกษาตามก็จะเริ่มงง
09:23 on November 18th, 2010
นี่เป็นเวอร์ชั่นล่าสุดอยู่แล้วครับ
19:15 on December 5th, 2010
ถ้ายังไม่มีโฮสเป็นของตัวเองจะมีวิธีเทสในเครื่องตัวเองก่อนรึเปล่าครับ
22:20 on December 7th, 2010
ต้องลง Curl ในเครื่องถึงจะใช้ได้ครับ
16:42 on December 14th, 2010
ไฟล์ตัวอย่างของคุณ ตรงนี้ $appId = 128403880531271; มันต้องใส่ ‘ ‘ คร่อมไว้ด้วยน่ะครับไม่งั้นมันแจ้งว่า api error
แล้วก็ผมลองแล้วมันอ่านข้อความภาษาไทยไม่ได้ต้องแก้ไขยังไงครับ มันใช้ encode อะไรบ้าง
23:30 on January 14th, 2011
ข้อความภาษาไทยใช้ UTF-8 ครับ
17:17 on January 21st, 2011
การลง Curl ในเครื่องต้องทำยังไงค่ะ ขอบคุณสำหรับข้อมูลค่ะ
19:12 on January 21st, 2011
ตามนี้ครับ
http://www.tonyspencer.com/2003/10/22/curl-with-php-and-apache-on-windows/
12:48 on March 1st, 2011
ทำไมพอกด “Go to App” มันไม่มีอะไรแสดงขึ้นมาเลยครับ ผิดพลาดตรงไหนเหรอ
21:45 on March 1st, 2011
ขอบคุณนะครับ แล้วมีสอน post ข้อมูลจาก app ไปที่ wall ไหมหรือครับ
00:57 on April 4th, 2011
ขอบคุณมากครับ
ผมสงสัยเพิ่มตรงนี้ครับ
IFrame Size - อันนี้เลือกเป็น Auto-resize เพื่อให้เราสามารถใช้ script สั่งให้ขนาด iframe สูงตาม application จริงๆ ของเราโดยอัตโนมัติ
กำหนดตรงใหนครับ
10:49 on April 4th, 2011
ผมหมายถึง สั่งให้ขนาด iframe สูงตาม application จริงๆ ของเราโดยอัตโนมัติ
คือตอนนี้มันสั้นๆไม่เป็นไปตามขนาดจริงของเว็บจริงๆครับ แก้ต้องค่ายังไงในเว็บ
10:53 on April 4th, 2011
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/
10:17 on June 3rd, 2011
ขอบคุณนะค๊ะ จะลองพยายามทำดู น่าสนุกดีค่ะ
22:27 on June 13th, 2011
ทำไมกด save แล้วไม่มีคำว่า Download the Client Library ให้คลิกเลยอ่าค่ะ อยุ่ที่หน้า My Apps ใช่มั๊ยคะ ไม่รุ้ทำอะไรผิดไปป่าว ><
13:25 on June 27th, 2011
ขอบคุณหลายๆคับ กำลัง งม fb อยู่เลย
22:46 on July 16th, 2011
ทำไม่เห็นได้เลยนะ ไม่มีภาพให้ดูหรอค่ะ งง
23:47 on October 7th, 2011
Fatal error: Uncaught OAuthException: An active access token must be used to query information about the current user. thrown in /home/zp3694/domains/zp3694.tld/public_html/examples/base_facebook.php on line 1038
ไป error ในนู้นเลยหงะ - -
00:30 on October 11th, 2011
อย่างที่คุณ nan ว่า Client Library กับ PHP SDK เป็นตัวเดียวกันหรือเปล่าผมบังเอิญไปเจอในหน้านี้
http://developers.facebook.com/docs/reference/php/
ตอนนี้ก็กำลังงมเหมือนกันครับ
08:08 on October 11th, 2011
ตอนนี้หน้า facebook เปลี่ยนไปมากแล้ว download ได้ที่หน้านั้นแหละครับ ส่วนของคุณ yawz คงเรียกใช้ api โดยที่ยังไม่ได้ allow app ขอ access token จาก facebook ครับ
03:01 on December 17th, 2011
ลองเาไปทำตามแล้วมันขึ้นอย่างนีครับ
Fatal error: Call to undefined method Facebook::getSession() in C:\AppServ\www\writenote\index.php on line 33
ไม่เข้าใจเหมือนกันครับ..
ปล. ไปขอ access token จาก facebook จากที่ไหนครับ…แล้วเอาไปทำยังไงละครับ..มือใหม่หัดทำครับ..
09:48 on December 17th, 2011
facebook ยกเลิกคำสั่งนั้นไปแล้วครับ ใช้ $facebook->getUser() แทนอย่างเดียวจะได้เป็น user_id มาเลยครับ
22:50 on January 9th, 2012
เป็นประโยชน์มากเลยทีเดียวครับ ขอบคุณมากๆๆครับ
ขอสารไอทีอัพเดรตทุกวันๆครับ
Thai IT-Update Center