เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) ฉบับปรับปรุง Graph API

เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) ฉบับปรับปรุง Graph API by heha

30
Aug44

เนื่องจาก Facebook ได้ประกาศ API ใหม่มาตั้งแต่เดือนเมษายน ชื่อว่า Graph API ตอนนี้ก็ควรแก่เวลา(ตั้งนานแล้ว) ที่จะ update บทความใหม่เสียที

Update ล่าสุดตามได้ที่บทความใหม่อันนี้ครับ บทความนี้ใช้ได้แค่ตั้งแต่ข้อ 7 ลงไปนะครับ ส่วนข้อ 1-6 มันเก่าเกินไปแล้ว ใช้ไม่ได้แล้วครับ

องค์ประกอบการทำเกม 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 จริงๆก็ไม่ต้องยุ่งครับ จะมีอะไรให้เซ็ตเยอะมาก)
1. 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 จะมีอีเมล์ยิงเข้าอีเมล์ที่ระบุในช่องนี้
2. 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 เช่นกัน
3. 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 จริงๆ ของเราโดยอัตโนมัติ
4. Tab Mobile – tab นี้ใช้เมื่อ application ของเราเขียนโดยใช้ Android SDK หรือ iPhone SDK โดยตรงเท่านั้นครับ
5. 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 เลยเช่นกัน
คลิก 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!

Tagged as: beginner, facebook, facebook api, php, tutorial

44 ความเห็น

สถานที่ท่องเที่ยว
17:17 on November 2nd, 2010
โอ้ เยี่ยมมาก ได้ประโยชน์จริงๆ ครับ ขอบคุณจากใจ
sonata
09:34 on November 13th, 2010
อยากให้อัพเดท กับเวอร์ชั่นล่าสุดหน่อยครับ เพราะดูข้อมูลบางฟิลด์ไม่ตรงกัน พอศึกษาตามก็จะเริ่มงง
heha
09:23 on November 18th, 2010
นี่เป็นเวอร์ชั่นล่าสุดอยู่แล้วครับ
naokikun
19:15 on December 5th, 2010
ถ้ายังไม่มีโฮสเป็นของตัวเองจะมีวิธีเทสในเครื่องตัวเองก่อนรึเปล่าครับ
heha
22:20 on December 7th, 2010
ต้องลง Curl ในเครื่องถึงจะใช้ได้ครับ
นายอบ
16:42 on December 14th, 2010
ไฟล์ตัวอย่างของคุณ ตรงนี้ $appId = 128403880531271; มันต้องใส่ ‘ ‘ คร่อมไว้ด้วยน่ะครับไม่งั้นมันแจ้งว่า api error
แล้วก็ผมลองแล้วมันอ่านข้อความภาษาไทยไม่ได้ต้องแก้ไขยังไงครับ มันใช้ encode อะไรบ้าง
heha
23:30 on January 14th, 2011
ข้อความภาษาไทยใช้ UTF-8 ครับ
dao
17:17 on January 21st, 2011
การลง Curl ในเครื่องต้องทำยังไงค่ะ ขอบคุณสำหรับข้อมูลค่ะ
heha
19:12 on January 21st, 2011
ตามนี้ครับ
http://www.tonyspencer.com/2003/10/22/curl-with-php-and-apache-on-windows/
BG
12:48 on March 1st, 2011
ทำไมพอกด “Go to App” มันไม่มีอะไรแสดงขึ้นมาเลยครับ ผิดพลาดตรงไหนเหรอ
Best Buy TV
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 จริงๆ ของเราโดยอัตโนมัติ
คือตอนนี้มันสั้นๆไม่เป็นไปตามขนาดจริงของเว็บจริงๆครับ แก้ต้องค่ายังไงในเว็บ
heha
10:53 on April 4th, 2011
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/
Mm
10:17 on June 3rd, 2011
ขอบคุณนะค๊ะ จะลองพยายามทำดู น่าสนุกดีค่ะ
nan
22:27 on June 13th, 2011
ทำไมกด save แล้วไม่มีคำว่า Download the Client Library ให้คลิกเลยอ่าค่ะ อยุ่ที่หน้า My Apps ใช่มั๊ยคะ ไม่รุ้ทำอะไรผิดไปป่าว ><
shopping previews
13:25 on June 27th, 2011
ขอบคุณหลายๆคับ กำลัง งม fb อยู่เลย
Papada
22:46 on July 16th, 2011
ทำไม่เห็นได้เลยนะ ไม่มีภาพให้ดูหรอค่ะ งง
yawz
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 ในนู้นเลยหงะ – -
Rin
00:30 on October 11th, 2011
อย่างที่คุณ nan ว่า Client Library กับ PHP SDK เป็นตัวเดียวกันหรือเปล่าผมบังเอิญไปเจอในหน้านี้
http://developers.facebook.com/docs/reference/php/
ตอนนี้ก็กำลังงมเหมือนกันครับ
heha
08:08 on October 11th, 2011
ตอนนี้หน้า facebook เปลี่ยนไปมากแล้ว download ได้ที่หน้านั้นแหละครับ ส่วนของคุณ yawz คงเรียกใช้ api โดยที่ยังไม่ได้ allow app ขอ access token จาก facebook ครับ
hotsale
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 จากที่ไหนครับ…แล้วเอาไปทำยังไงละครับ..มือใหม่หัดทำครับ..
heha
09:48 on December 17th, 2011
facebook ยกเลิกคำสั่งนั้นไปแล้วครับ ใช้ $facebook->getUser() แทนอย่างเดียวจะได้เป็น user_id มาเลยครับ
Thai IT-Update Center
22:50 on January 9th, 2012
เป็นประโยชน์มากเลยทีเดียวครับ ขอบคุณมากๆๆครับ
ขอสารไอทีอัพเดรตทุกวันๆครับ
Thai IT-Update Center
Gatib
22:20 on May 24th, 2012
อยากทราบว่า Javascript SDK สามารถทำงานร่วมกับ PHP SDK ได้หรือป่าว คะ
heha
22:28 on May 24th, 2012
ใช้ร่วมกันได้ ไม่มีปัญหาอะไรครับ
Gatib
16:29 on May 25th, 2012
อยากสอบถามอะไรสักหน่อยอ่าค่ะ พอดีจะทำแอพให้ลบแท็กรูปของผู้ใช้ที่ใช้แอพของเราอ่าคะ
http://stackoverflow.com/questions/2855288/programmatically-untag-fb-photos-with-javascript/2856097#2856097
ไปเจออันนี้ ไม่ทราบว่าพอจะทราบมั้ยคะว่า มันทำได้หรือเปล่า??

รบกวนด้วยนะคะ
อุปกรณ์กอล์ฟ
10:27 on July 9th, 2012
ขอบคุณครับ กำลัง งมๆ อยู่เลย
...^-^...
15:45 on July 13th, 2012
สมัครเสียตังมั๊ยคะ
wuttt
00:41 on October 7th, 2012
http://www.facebook.com/developers/ เข้าหน้านี้แล้วกด Allow Access จะเป็นการอนุญาตการใช้ App เหมือน App บน facebook ทั่วไป

แค่ข้อ 1 ก็หา Allow Access ไม่เจอแล้ว
ຂ່າວ
17:51 on February 24th, 2013
เปันปะโหยดมากๆๆเลยครับ ผมกำลังเลี่มทำเหมือนกันครับ ต้องทำให้ได้
Deklao.com ສາລະບັນເທີງເພື່ອສັງຄົມລາວ
...T_T...
02:25 on November 7th, 2013
ผมมีปัญหา ตรงที่ ตัวผู้ใช้ หรือ admin ที่สร้าง app จะสามารถใช้งาน app ของเราได้แต่ หาก เป็นคนอื่น หรือ เอา id facebookอื่น เข้ามาลอง test ปรากฏ ว่า app ไม่ขึ้น หน้าให้ใช้ หรือ มองไม่เห็น อะครับ ไม่สามารถว่ามีวิธีแก้ไม
heha
08:32 on November 7th, 2013
ไปปรับ mode sandbox เป็น disable ก็จะเห็นเองครับ
...T_T...
14:06 on November 9th, 2013
ปรับ แล้ว ครับ เรา จะเห็น แค่ เรา คนเดียว แต่พอ ผม เอา user อื่น loginเพื่อใช้ appที่เราสร้าง กลับมองไม่เห็น ครับ
heha
14:07 on November 9th, 2013
ถ้าเป็นอย่างที่บอกแสดงว่ามัน enable อยู่นะครับ ไม่ใช่ disable
...T_T...
14:17 on November 9th, 2013
งงจัง หน้า setting ที่ผม ตั้งค่า sandbox mode ก็ติ๊กว่า ถูกปิดใช้งาน แล้วทำ save ทดสอบแล้วนะครับ แต่คนอื่นก็ ไม่เห็นT_T เกิด จากอะไร ละ เนีย
...T_T...
15:25 on November 10th, 2013
พอมีวิธีแก้ ไม อะครับ
heha
15:27 on November 10th, 2013
ไม่ทราบครับ คงต้องสร้าง app ใหม่ดู
...T_T...
18:04 on November 10th, 2013
สอบถามหน่อยครับ
ลองทำใหม่ ดูแล้ว พอดีติดปัญหา ตรง Canvas URL: และ Canvas URL แบบปลอดภัย:
อย่างเช่นผมเก็บ ไฟล์ตัว appของผมไว้ ใน http://www.myserver.com/facebook_app/
ผมต้องใส่ Canvas URL: และ Canvas URL แบบปลอดภัย: เป็นลิ้งค์ที่ผมเก็บไฟล์ไว้ใช้ปะครับ

แล้วพอตอน upload file ขึ้น server ก็จะมีไฟล์sdk ของfacebook คือ facebook.php และก็ base_facebook.php และ fb_ca_chain_bundle.crt

ต่อไปก็มีไฟล์ index ที่copyมาลองทำ แล้วก็ ไฟล์ app ของเราใช้ไมครับ
ในส่วนของ file index ก็แก้ เฉพาะ app id และ app secret ส่วน page start ก็ เป็น url ของ app เราใช้ไม ครับ

ผมเข้าใจถูกไมครับ รบกวนช่วย หน่อยน๊ะ ^^
heha
19:16 on November 10th, 2013
จะทำ app บน facebook ต้องจดทะเบียน https (จ่ายรายปีคล้ายค่าโดเมน) เท่านั้นครับ ถ้าจะแค่เทส app โดยยังไม่จด https ก็จะดูได้คนเดียวโดยการเปิด sandbox mode ครับ (คือใช้ได้แค่ทดสอบเท่านั้นจริงๆ)
...T_T...
23:14 on November 10th, 2013
ขอบคุณที่ แนะนำ และ ให้คำปรึกษามากครับ
iQgun
13:17 on November 25th, 2014
เยี่ยมมากครับ
ลองใช้
10:07 on July 13th, 2016
ลองเอาไปใช้แล้ว work

Recent Comments

Recent Posts