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

30
Jun
47

ก่อนอื่นต้องขอบ่นก่อนเลยว่าผมงงมากๆ กับการเริ่มเขียน 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/ (ต้องมี / ปิดท้าย ไม่งั้นจะไม่ได้)
      • Render Method – อันนี้ให้เลือกเป็น Iframe ซึ่งผมจะอธิบายความแตกต่างระหว่าง เลือกแบบ FBML กับแบบ Iframe ให้อีกทีครับ (ใน Tutorial อันต่อๆ ไปจะสร้าง app ใน iframe ครับเลยต้องเลือกอันนี้)
      • IFrame Size – อันนี้เลือกเป็น Resizable ซึ่ง Smart size คือการกำหนดให้ Auto Resize กรอบของ iframe ตามขนาดหน้าจอ Browser ครับ แต่ให้เลือกเป็น Resizable เพราะเราจะมีวิธีแก้ที่ดีกว่าภายหลังครับ หึหึ :P
    3. Tab Connect
      • Connect URL – กรอก URL host เราเข้าไปเหมือนเดิมครับ แต่ให้ใส่ ROOT URL นะครับ เช่นเราเก็บ code facebook app จริงๆ ไว้ที่ www.mydomain.com/myfacebookapp ก็ใส่เป็น www.mydomain.com ไม่งั้นจะมี bug cookie ในภายหลัง
      • 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 ก็จะแก้ไขค่าต่างๆ ได้ครับ

เสร็จแล้ว โอ… เหมือนจะไม่ยากเลยใช่ไหมครับ แต่ความยุ่งยากที่แท้จริงมันหลังจากนี้ครับ 555 อ่านต่อภาคนิดยามความหมายต่างๆ ว่าไอ้ที่เราทำอะไรไปเนี่ยมันยังไงบ้างได้ที่บทความต่อไปครับ…

ปล. สำหรับใครที่ใช้ Framework Codeigniter สามารถดูตัวอย่างการสร้าง Facebook Application บน Codeigniter ได้ที่นี่ โดยอันนี้ต้องเลือก Render Method เป็นแบบ FBML นะครับ

ปล2. ขี้เกียจ Capture รูป ไม่ว่ากันนะ :P

Enjoy this article?

Consider subscribing to our RSS feed!

47 ความเห็น

  1. sampo
    10:28 on October 21st, 2009

    กำลังงงกับเรือ่งนี้อยู่พอดีเลยครับ แถมคนก็เขียนอธิบายเรื่องนี้กันไว้น้อยมาก ขอบคุณมากมายครับผม

  2. keaws
    22:45 on October 21st, 2009

    ขอบคุณมากค่ะ
    อยากทราบว่า api secret ดูตรงไหนอ่ะคะ

  3. heha
    21:34 on October 25th, 2009

    อยู่ใน http://www.facebook.com/developers/ นั่นแหละครับ หน้ารายละเอียด app ที่สร้างแล้วจะมีแจ้งไว้อยู่ครับ

  4. osonteenzao
    04:43 on November 11th, 2009

    เอาโค้ด hi5 ไปใส่ได้ไหมครับ แล้วใส่ที่ไหน??

  5. tum
    23:09 on December 23rd, 2009

    พี่ผมกดเซพละเปลี่ยนแปลงแล้วอะ มันแจ้งว่า

    Canvas Callback URL must point to a directory (i.e., end with a “/”) or a dynamic page (i.e., have a “?” somewhere).

    งงอะคับ ช่วยทีนะ

  6. heha
    23:37 on December 23rd, 2009

    ช่อง Canvas Callback URL แก้จาก http://www.yourname.com เป็น http://www.yourname.com/ แค่นั้นแหละครับ ตัวอย่างก่อนผมใส่ Index.php มาด้วยเลยผิด จริงๆ ต้องไม่มีครับ ขออภัย

  7. tum
    23:59 on December 23rd, 2009

    พี่พอมีเมลให้ติดต่อปะคับ พอดีอ่านบางช่วงไม่เข้าใจอะ เลยอยากขอเมลพี่หน่อยได้มะคับ ขอบคุณมาก

  8. heha
    00:04 on December 24th, 2009

    ช่วงนี้ผมไม่ค่อยว่างเท่าไหร่ ไม่สะดวกจะให้คำปรึกษายาวๆ ยังไงลองทำเองพร้อมกับ google เพิ่มเติมดูก่อนนะครับ

  9. tum
    01:21 on December 28th, 2009

    พี่คับผมติดปัญหาอีกแล้ว ช่วยหน่อย ผมใส่ Url ใน Canvas Callback URL แล้วใช่ปะ แต่พอรันแล้วมันไม่แสดงapi ให้อะ หน้าแฟรชเป็นหน้าขาวๆเลย งงมากอะ เพราะอะไรคับ ผมใส่เข้าไปแบบนี้อะ http://www.alldemons.pr.in.th/game/api.php/ แต่ถ้าเอา / ออกจะรันได้ปกตินะ แต่เซพในfacebook ไม่ได้

  10. ohmohm
    00:08 on January 13th, 2010

    ต้องใช้ web host ที่ลง facebook-platform.tar.gz และ memcached ด้วไหมครับ แล้วมีแนะนำ host ดีๆ ไหม

  11. a
    16:05 on January 29th, 2010

    ลองสร้างตามข้างบนมา จะได้ appli อยู่บน facebook เราแล้ว แต่เวลาเราเรียกจาก http://apps.facebook.com/joker/ มันขึ้นว่า ไม่พบหน้าที่คุณต้องการ
    ต้องไปสร้างอะไรเพิ่มอีกหรือเปล่าคะ แต่ถ้าเราเข้าด้วย login เราเอง หน้านี้จะขึ้นอ่ะคะ แต่คนอื่นเข้ามาไม่เห็น รบกวนแนะนำให้หน่อยนะคะ

  12. heha
    16:16 on January 29th, 2010

    คาดว่าคงไปตั้งใน setting เปิดเป็น sandbox ไว้ ไปเซ็ตออกก็จะได้ครับ

  13. feye
    02:03 on March 3rd, 2010

    ลองตามแล้ว แต่ชื่อเพื่อนที่ขึ้นมันเป็น id แทนชื่ออ่ะค่ะ

  14. poper
    18:18 on March 16th, 2010

    ลองทำตามบทความแล้ว มันขึ้นแค่

    Hello, !

    Friends:

    แต่มันไม่ขึ้น ID หรือ ชื่อเพื่อนเลยอ่ะครับ
    มันมีปัญหาที่อะไรหรอครับ
    ผิดที่ code หรือมีปัญหากับ host(host free) ที่ฝากครับ

  15. offpoker
    14:02 on March 23rd, 2010

    พี่ครับแล้วทำยังไงให้appของเราไปอยู่ตรง กระดานข่าว/ข้อมูล/รุปภาำำำพ/ของเรานะครับ

    ทำยังไงเหรอครัย

  16. heha
    21:27 on March 28th, 2010

    ข้อมูลไม่ขึ้นไม่เกี่ยวกับ Host หรอกครับ ผิดที่ code แน่นอน หรืออาจ setting บางขั้นตอนผิด ส่วน app ที่อยู่ตรง board, รูปภาพจริงๆ จะไม่มี มีลักษณะเป็น tab มากกว่า

  17. offpoker
    22:18 on March 31st, 2010

    พีเพิ่ม tab ผมไม่เหน appcation ของผมนะครับ ไม่ทราบต้องทำอย่างไรผม ทำ appcation เรียบร้อยแล้วนะครับ

  18. champ
    14:20 on April 8th, 2010

    ผมลองพิมพ์ URL ตาม Canvas Page URL

    มันก็เข้าได้แต่มันมีข้อความ

    Hello, !

    Friends:
    Warning: array_slice() [function.array-slice]: The first argument should be an array in /home/mcpthailand/index.php on line 23

    Warning: Invalid argument supplied for foreach() in /home/mcpthailand/index.php on line 24

    เราต้องแก้ยังไงครับ

  19. Knothing
    01:56 on April 10th, 2010

    ของผมขึ้นทุกอย่างนะครับ แต่ว่ามี Warning ขึ้นมาเต็มเลยครับ

    Warning: include_once(jsonwrapper/jsonwrapper.php) [function.include-once]: failed to open stream: No such file or directory in /facebook/facebookapi_php5_restlib.php on line 35

    Warning: include_once() [function.include]: Failed opening ‘jsonwrapper/jsonwrapper.php’ for inclusion (include_path=’.:/usr/local/lib/php’) in facebook/facebookapi_php5_restlib.php on line 35

    Warning: Cannot modify header information – headers already sent by (output started at facebook/facebookapi_php5_restlib.php:35) in facebook/facebook.php on line 418

    และยังมีอีกเพียบเลย

    แต่ผลลัพท์ออกมาได้ อ่ะครับ

  20. ohmohm
    17:21 on April 13th, 2010

    @champ ( http://blog.levelup.in.th/2009/06/30/start-facebook-application-tutorial-for-beginner-phpเริ่มต้นกับการเข/#comment-397 ) ที่เจอบ่อยๆ ก็คือตัวแปรที่อยู่ใน array_slice() หรือ foreach() ไม่ใช่ Array ( ความจริงที่เจอบ่อยๆ เลยคือเป็น null )

  21. ohmohm
    17:24 on April 13th, 2010

    @Knothing upload facebookapi_php5_restlib.php และ jsonwrapper ทั้ง( โฟล์ดเดอร์และไฟล์ข้างใน ) ขึ้นไปด้วย

  22. baanneka
    18:53 on April 18th, 2010

    อ้างอิงจาก http://developers.facebook.com/get_started.php

    ใน รูปภาพจากเว็บนะครับ

    Monthly Active Users Application Fans Total Users
    5,531 176 62.7K

    ผมอยากทราบว่าตรง 3 หัวข้อนี้ จะมีการอัพเดทเมื่อใดครับ

    พอดีผมลองทำตาม example code แล้วลองรันโปรแกรมแล้ว
    listfriends ขึ้นปกติ
    แต่ไม่เข้าใจว่า เมื่อใดที่ 3 หัวข้อนี้จะมีการอัพเดทตัวเลขครับ

    ข้อคำอภิบายหรือตัวอย่างหน่อยครับ

  23. Knothing
    13:18 on April 22nd, 2010

    ขอบคุณครับ เข้าใจแล้วครับ ^^

  24. heha
    00:19 on May 1st, 2010

    ตอบคุณ baanneka update ทุกวัน แต่หากช่วงไหนที่ facebook มี bug อาจจะ delay หน่อยครับ

  25. magicpc
    12:40 on May 1st, 2010

    ขนาดง่ายๆนะครับ ยังเล่นเอาซะงงตึ้บไปเลย แต่ยังไงจะพยายามลองทำดูครับ

  26. emptiness
    12:30 on May 29th, 2010

    รบกวนผู้รู้หน่อยค่ะ คือว่ามันขึ้น error แบบนี้หน่ะค่ะ

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’.

    ไม่ทราบว่าจะแก้ตรงไหนค่ะ

  27. emptiness
    12:31 on May 29th, 2010

    เพิ่มเติมนิดค่ะ มัน error ชื่อไฟล์ facebook.php ค่ะ

  28. taley
    15:54 on May 30th, 2010

    facebook มันเข้าไม่ได้อ่ะค่ะ พอloginแล้วมันก้มีcodeให้ใส่ ต้องทำยังไงอ่ะค่ะ ในเมื่อไม่มีcodeอะไรใส่อ่ะ

  29. heha
    08:36 on June 4th, 2010

    @emptiness คาดว่าคงไปเผลอแก้ไฟล์ facebook.php นะครับ ลองดาวน์โหลดมาใหม่นะครับ
    @taley ถ้าหมายถึงรหัส capcha ก็น่าจะขึ้นปกติดีนะครับ

  30. ieie
    09:54 on June 10th, 2010

    กะลังจะทำรบกวนช่วยแนะนำ Host ดีๆหน่อยคับ

  31. poe
    03:11 on July 6th, 2010

    ผมพิม Canvas Page URL มัน error อะครับ ช่วยหน่อยครับ
    Warning: Missing argument 2 for Facebook::__construct(), called in /home/mydomain/domains/mydomain.com/public_html/facebook_app/index.php on line 13 and defined in /home/mydomain/domains/mydomain.com/public_html/facebook_app/facebook.php on line 63

    Warning: Illegal offset type in isset or empty in /home/mydomain/domains/mydomain.com/public_html/facebook_app/facebook.php on line 461

  32. chay
    18:49 on July 7th, 2010

    embed flash บนเว็บ(application เป็น iframe นะคะ) จากนั้นทำ post to wall ซึ่ง post to wall ก็ขึ้น แต่มีปัญหาว่า post to wall ขึ้นไม่เต็มอ่ะค่ะ ตรงหัวมันสีฟ้าๆ หายไปใน browser ของ ie chrome และsafari(อันนี้หนักหน่อย มะขึ้นเลย) ส่วน ff เเสดงผลได้ตามปกติ ซึ่งจากที่สังเกตดู post to wall ทำงานได้ตามปกติ เเต่ที่ผิดพลาดนี่ อาจจะเพราะว่าโดน flash บัง เลยไม่รู้ว่าจะทำยังไงต่อไปดีอ่ะค่ะ ยังไง รบกวนช่วยตอบด้วยนะคะ

  33. เต้ย
    21:32 on July 26th, 2010

    เข้าผ่าน fb เป็นแบบนี้ second test 100000695055889
    เข้าผ่าน url page มันรีไดเรค ตลอดเลยครับ

  34. fb
    14:29 on August 17th, 2010

    ดาว์นโหลดแล้ว มี ไฟล์ facebook.php แต่ไม่เห็นมีไฟล์ facebookapi_php5_restlib.php เลยครับ

  35. CreativeSoul
    17:12 on September 15th, 2010

    มีใครเขียน facebook connection บน desktop application ด้วย c# บ้างมั้ยครับ ผมอยากทราบว่า สามารถทำให้มันไม่ต้องกรอก username และ password ทุกครั้งได้มั้ย
    ช่วยติดต่อมาที่ yui_jincee@hotmail.com ทีครับ

  36. diysms
    20:55 on November 20th, 2010

    กำลังศึกษาครับ ได้ข้อมูลเยอะเลย ขอบคุณมากครับ

  37. Best Buy TV
    21:46 on February 18th, 2011

    ขอบคุณนะครับ ไว้จะลองไปทำดูครับ ^^

  38. mashi
    21:13 on February 20th, 2011

    ขอบคุณนะครับ สำหรับความรู้เบื้องต้น แล้วมีแบบ advance ไหมครับ

  39. แป๊ะ
    16:32 on March 8th, 2011

    ขอรูปประกอบด้วยครับ ผมยังงงอยู่เลยครับ ตรงแคนวาส

  40. แป๊ะ
    16:34 on March 8th, 2011

    Validation failed.
    URL ของที่คั่นหน้า must be relative to your Canvas Page URL.

    มันออเรอร์ตรงนี้ครับแก้ยังไงครับ

  41. heha
    19:16 on March 14th, 2011

    บทความนี้หมดอายุแล้วนะครับ facebook ได้เปลี่ยนไปใช้ api ชุดใหม่แล้ว ตามอ่านได้ที่นี่ครับ
    http://blog.levelup.in.th/2010/08/30/start-facebook-application-tutorial-for-beginner-php-updated-graph-api%e0%b9%80%e0%b8%a3%e0%b8%b4%e0%b9%88%e0%b8%a1%e0%b8%95%e0%b9%89%e0%b8%99%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3/

  42. mikeyx
    09:25 on November 18th, 2011

    มัน ขึ้น error

  43. heha
    09:48 on November 18th, 2011

    บทความนี้หมดอายุแล้ว กรุณาอ่านของใหม่ใน link ด้านบนครับ

  44. seo
    12:55 on March 22nd, 2012

    เยี่ยมมากๆ กำลังหาพอดีเลย

  45. รับออกแบบเว็บไซต์
    13:49 on April 4th, 2012

    ขอบคุณครับ กำลังศึกษาอยู่พอดี

ใส่ความเห็น

RSS feed for comments on this post