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

30
Aug
44

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

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

องค์ประกอบการทำเกม Facebook เกมหนึ่งมีดังนี้

  1. Hosting สำหรับเก็บไฟล์ รองรับ load การใช้งานทั่วไป และรองรับ php5.2 ขึ้นไป (หากต่ำกว่านี้ต้องหา library json_encode, json_decode เพิ่มเอง)
  2. ประสบการณ์การพัฒนา Web Application ด้วย php และ mysql ใช้สร้างตัว Core เกมทั้งหมด (จริงๆ แล้วภาษาอื่นก็ได้แทบทุกภาษา แต่ในบทความนี้ผมจะกล่าวแต่ php)
  3. Facebook SDK สำหรับติดต่อกับ Facebook ในที่นี้จะแบ่งออกเป็นสองส่วนใหญ่ๆ คือ PHP SDK และ Javascript SDK
  4. ทำการสร้าง Application ใน Developer ของทาง Facebook (ฟรี และสามารถใช้งานได้ทันที)

ในบทความนี้จะกล่าวถึงข้อ 4 นะครับ สิ่งที่ต้องทำมีดังนี้

  1. http://www.facebook.com/developers/ เข้าหน้านี้แล้วกด Allow Access จะเป็นการอนุญาตการใช้ App เหมือน App บน facebook ทั่วไป
  2. คลิก SetUp New Application ทางมุมขวาบน
  3. ช่อง Application Name ก็กรอกชื่อ App ที่เราจะสร้างตามสะดวก
  4. ติ๊ก Agree แล้ว Save Change
  5. จะเข้าสู่หน้า 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 เลยเช่นกัน
  6. คลิก Save Changes ก็จะแสดงหน้า Profile ของ Application เราขึ้นมา อย่าลืมจำค่า Application ID และ Application Secret เอาไว้ให้ดี เพราะต้องเอาไปใช้ใน code ของเราตอนเชื่อมกับ Facebook ครับ
  7. ในหน้าเดียวกันกับข้อที่แล้วให้เลื่อนลงมาด้านล่าง คลิก Download the Client Library แล้วจะเข้าสู่เว็บไซต์ Git-hub ให้คลิก Download Source ที่ขวาบน
  8. Extract Client Library ออกมาจะพบ folder src ให้เข้าไป upload ไฟล์ facebook.php ขึ้น server
  9. เข้าไป Copy File ตัวอย่างของผม แล้วสร้างเป็นไฟล์ index.php upload ขึ้นไปไว้ที่เดียวกับ facebook.php
  10. แก้ไข $appId และ $secret โดยกรอก Application ID และ Application Secret ที่เราจำมาเมื่อกี้ สำหรับ $start_page คือ URL ที่จะย้อนกลับมาหลังจากผ่านหน้า allow access ไปแล้ว
  11. 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!

44 ความเห็น

  1. สถานที่ท่องเที่ยว
    17:17 on November 2nd, 2010

    โอ้ เยี่ยมมาก ได้ประโยชน์จริงๆ ครับ ขอบคุณจากใจ

  2. sonata
    09:34 on November 13th, 2010

    อยากให้อัพเดท กับเวอร์ชั่นล่าสุดหน่อยครับ เพราะดูข้อมูลบางฟิลด์ไม่ตรงกัน พอศึกษาตามก็จะเริ่มงง

  3. heha
    09:23 on November 18th, 2010

    นี่เป็นเวอร์ชั่นล่าสุดอยู่แล้วครับ

  4. naokikun
    19:15 on December 5th, 2010

    ถ้ายังไม่มีโฮสเป็นของตัวเองจะมีวิธีเทสในเครื่องตัวเองก่อนรึเปล่าครับ

  5. heha
    22:20 on December 7th, 2010

    ต้องลง Curl ในเครื่องถึงจะใช้ได้ครับ

  6. นายอบ
    16:42 on December 14th, 2010

    ไฟล์ตัวอย่างของคุณ ตรงนี้ $appId = 128403880531271; มันต้องใส่ ‘ ‘ คร่อมไว้ด้วยน่ะครับไม่งั้นมันแจ้งว่า api error
    แล้วก็ผมลองแล้วมันอ่านข้อความภาษาไทยไม่ได้ต้องแก้ไขยังไงครับ มันใช้ encode อะไรบ้าง

  7. heha
    23:30 on January 14th, 2011

    ข้อความภาษาไทยใช้ UTF-8 ครับ

  8. dao
    17:17 on January 21st, 2011

    การลง Curl ในเครื่องต้องทำยังไงค่ะ ขอบคุณสำหรับข้อมูลค่ะ

  9. heha
    19:12 on January 21st, 2011
  10. BG
    12:48 on March 1st, 2011

    ทำไมพอกด “Go to App” มันไม่มีอะไรแสดงขึ้นมาเลยครับ ผิดพลาดตรงไหนเหรอ

  11. Best Buy TV
    21:45 on March 1st, 2011

    ขอบคุณนะครับ แล้วมีสอน post ข้อมูลจาก app ไปที่ wall ไหมหรือครับ

  12. แป๊ะ
    00:57 on April 4th, 2011

    ขอบคุณมากครับ

    ผมสงสัยเพิ่มตรงนี้ครับ
    IFrame Size – อันนี้เลือกเป็น Auto-resize เพื่อให้เราสามารถใช้ script สั่งให้ขนาด iframe สูงตาม application จริงๆ ของเราโดยอัตโนมัติ

    กำหนดตรงใหนครับ

  13. แป๊ะ
    10:49 on April 4th, 2011

    ผมหมายถึง สั่งให้ขนาด iframe สูงตาม application จริงๆ ของเราโดยอัตโนมัติ
    คือตอนนี้มันสั้นๆไม่เป็นไปตามขนาดจริงของเว็บจริงๆครับ แก้ต้องค่ายังไงในเว็บ

  14. heha
    10:53 on April 4th, 2011
  15. Mm
    10:17 on June 3rd, 2011

    ขอบคุณนะค๊ะ จะลองพยายามทำดู น่าสนุกดีค่ะ

  16. nan
    22:27 on June 13th, 2011

    ทำไมกด save แล้วไม่มีคำว่า Download the Client Library ให้คลิกเลยอ่าค่ะ อยุ่ที่หน้า My Apps ใช่มั๊ยคะ ไม่รุ้ทำอะไรผิดไปป่าว ><

  17. shopping previews
    13:25 on June 27th, 2011

    ขอบคุณหลายๆคับ กำลัง งม fb อยู่เลย

  18. Papada
    22:46 on July 16th, 2011

    ทำไม่เห็นได้เลยนะ ไม่มีภาพให้ดูหรอค่ะ งง

  19. 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 ในนู้นเลยหงะ – -

  20. Rin
    00:30 on October 11th, 2011

    อย่างที่คุณ nan ว่า Client Library กับ PHP SDK เป็นตัวเดียวกันหรือเปล่าผมบังเอิญไปเจอในหน้านี้
    http://developers.facebook.com/docs/reference/php/
    ตอนนี้ก็กำลังงมเหมือนกันครับ

  21. heha
    08:08 on October 11th, 2011

    ตอนนี้หน้า facebook เปลี่ยนไปมากแล้ว download ได้ที่หน้านั้นแหละครับ ส่วนของคุณ yawz คงเรียกใช้ api โดยที่ยังไม่ได้ allow app ขอ access token จาก facebook ครับ

  22. 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 จากที่ไหนครับ…แล้วเอาไปทำยังไงละครับ..มือใหม่หัดทำครับ..

  23. heha
    09:48 on December 17th, 2011

    facebook ยกเลิกคำสั่งนั้นไปแล้วครับ ใช้ $facebook->getUser() แทนอย่างเดียวจะได้เป็น user_id มาเลยครับ

  24. Thai IT-Update Center
    22:50 on January 9th, 2012

    เป็นประโยชน์มากเลยทีเดียวครับ ขอบคุณมากๆๆครับ
    ขอสารไอทีอัพเดรตทุกวันๆครับ
    Thai IT-Update Center

  25. Gatib
    22:20 on May 24th, 2012

    อยากทราบว่า Javascript SDK สามารถทำงานร่วมกับ PHP SDK ได้หรือป่าว คะ

  26. heha
    22:28 on May 24th, 2012

    ใช้ร่วมกันได้ ไม่มีปัญหาอะไรครับ

  27. Gatib
    16:29 on May 25th, 2012

    อยากสอบถามอะไรสักหน่อยอ่าค่ะ พอดีจะทำแอพให้ลบแท็กรูปของผู้ใช้ที่ใช้แอพของเราอ่าคะ
    http://stackoverflow.com/questions/2855288/programmatically-untag-fb-photos-with-javascript/2856097#2856097
    ไปเจออันนี้ ไม่ทราบว่าพอจะทราบมั้ยคะว่า มันทำได้หรือเปล่า??

    รบกวนด้วยนะคะ

  28. อุปกรณ์กอล์ฟ
    10:27 on July 9th, 2012

    ขอบคุณครับ กำลัง งมๆ อยู่เลย

  29. ...^-^...
    15:45 on July 13th, 2012

    สมัครเสียตังมั๊ยคะ

  30. wuttt
    00:41 on October 7th, 2012

    http://www.facebook.com/developers/ เข้าหน้านี้แล้วกด Allow Access จะเป็นการอนุญาตการใช้ App เหมือน App บน facebook ทั่วไป

    แค่ข้อ 1 ก็หา Allow Access ไม่เจอแล้ว

  31. ຂ່າວ
    17:51 on February 24th, 2013

    เปันปะโหยดมากๆๆเลยครับ ผมกำลังเลี่มทำเหมือนกันครับ ต้องทำให้ได้
    Deklao.com ສາລະບັນເທີງເພື່ອສັງຄົມລາວ

  32. ...T_T...
    02:25 on November 7th, 2013

    ผมมีปัญหา ตรงที่ ตัวผู้ใช้ หรือ admin ที่สร้าง app จะสามารถใช้งาน app ของเราได้แต่ หาก เป็นคนอื่น หรือ เอา id facebookอื่น เข้ามาลอง test ปรากฏ ว่า app ไม่ขึ้น หน้าให้ใช้ หรือ มองไม่เห็น อะครับ ไม่สามารถว่ามีวิธีแก้ไม

  33. heha
    08:32 on November 7th, 2013

    ไปปรับ mode sandbox เป็น disable ก็จะเห็นเองครับ

  34. ...T_T...
    14:06 on November 9th, 2013

    ปรับ แล้ว ครับ เรา จะเห็น แค่ เรา คนเดียว แต่พอ ผม เอา user อื่น loginเพื่อใช้ appที่เราสร้าง กลับมองไม่เห็น ครับ

  35. heha
    14:07 on November 9th, 2013

    ถ้าเป็นอย่างที่บอกแสดงว่ามัน enable อยู่นะครับ ไม่ใช่ disable

  36. ...T_T...
    14:17 on November 9th, 2013

    งงจัง หน้า setting ที่ผม ตั้งค่า sandbox mode ก็ติ๊กว่า ถูกปิดใช้งาน แล้วทำ save ทดสอบแล้วนะครับ แต่คนอื่นก็ ไม่เห็นT_T เกิด จากอะไร ละ เนีย

  37. ...T_T...
    15:25 on November 10th, 2013

    พอมีวิธีแก้ ไม อะครับ

  38. heha
    15:27 on November 10th, 2013

    ไม่ทราบครับ คงต้องสร้าง app ใหม่ดู

  39. ...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 เราใช้ไม ครับ

    ผมเข้าใจถูกไมครับ รบกวนช่วย หน่อยน๊ะ ^^

  40. heha
    19:16 on November 10th, 2013

    จะทำ app บน facebook ต้องจดทะเบียน https (จ่ายรายปีคล้ายค่าโดเมน) เท่านั้นครับ ถ้าจะแค่เทส app โดยยังไม่จด https ก็จะดูได้คนเดียวโดยการเปิด sandbox mode ครับ (คือใช้ได้แค่ทดสอบเท่านั้นจริงๆ)

  41. ...T_T...
    23:14 on November 10th, 2013

    ขอบคุณที่ แนะนำ และ ให้คำปรึกษามากครับ

  42. iQgun
    13:17 on November 25th, 2014

    เยี่ยมมากครับ

  43. ลองใช้
    10:07 on July 13th, 2016

    ลองเอาไปใช้แล้ว work

ใส่ความเห็น

RSS feed for comments on this post

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน