เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) by heha
Jun47
ก่อนอื่นต้องขอบ่นก่อนเลยว่าผมงงมากๆ กับการเริ่มเขียน Facebook API เนื่องจาก Wiki ของ Facebook มีเนื้อหาต่างๆ มากมาย ทั้ง Low Level และ High Level ผสมกัน กว่าจะเข้าใจและพอเขียน App ที่ใช้ได้จริงๆ ก็เป็นอาทิตย์เพราะนั่งปวดเศียรเวียนเกล้ากับอยู่นานสองนาน ดังนั้นใครอยากเขียน Facebook Application ละก็ควรจะรู้สิ่งต่างๆ ข้างล่างไว้ก่อน เพื่อที่เวลาจะเริ่มหัดจะได้ไม่งงเหมือนกับผม
ก่อนอื่นสิ่งที่ต้องมีอันดับแรกคือ host ของตัวเองที่ไหนก็ได้ เพราะ Facebook จะไม่มีที่สำหรับ upload file ของเราเก็บให้ครับ ต้องมี host เป็นของตัวเอง แล้ว Facebook จะมาดึงข้อมูลจาก host ของเราไปแสดงบน facebook อีกทีหนึ่ง (ผ่าน Canvas Callback URL ใน Tab Convas ด้านล่าง) สิ่งที่ต้องทำมีดังนี้
- http://www.facebook.com/developers/ เข้าหน้านี้แล้วกด Allow Access จะเป็นการอนุญาตการใช้ App เหมือน App บน facebook ทั่วไป (อย่าลืม bookmark ด้วยล่ะ! เพราะมันก็เป็น app ที่สามารถ bookmark ได้ตามปกติ)
- คลิก Setup New Application ทางมุมขวาบน
- ช่อง Application Name ก็กรอกชื่อ App ที่เราจะสร้างตามสะดวก
- ติ๊ก Agree แล้ว Save Change
- จะเข้าสู่หน้า Application Setting ซึ่งส่วนที่เราต้องไปเซ็ตค่ามีดังนี้ (ส่วนอื่นนอกจากนี้ ถ้าไม่ต้องการใช้อะไรที่ Advance จริงๆก็ไม่ต้องยุ่งครับ จะมีอะไรให้เซ็ตเยอะมาก)
- Tab General ต้องเซ็ตดังนี้
- Application Name – อันเดียวกับที่ใส่ไปแล้ว
- Description – รายละเอียด Application ที่จะให้แสดงตอนขึ้น Allow Access ให้ดึง friend มาได้
- Icon – icon เวลา bookmark และ publish ลง wall
- Logo – แสดง logo ตอน Allow Access และอื่นๆ
- Developers – ถ้ามีเพื่อนหลายคนช่วยกัน จะแบ่ง permission ให้เข้ามาแก้ Application Setting ได้ด้วยก็ใส่เพิ่มตรงนี้
- 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 เพราะเราจะมีวิธีแก้ที่ดีกว่าภายหลังครับ หึหึ
- Tab Connect
- Connect URL – กรอก URL host เราเข้าไปเหมือนเดิมครับ แต่ให้ใส่ ROOT URL นะครับ เช่นเราเก็บ code facebook app จริงๆ ไว้ที่ www.mydomain.com/myfacebookapp ก็ใส่เป็น www.mydomain.com ไม่งั้นจะมี bug cookie ในภายหลัง
- Facebook Connect Logo – จะใส่หรือไม่ใส่ก็ได้ครับ ไม่มีผล
- Tab Advanced
- Sandbox Mode – ถ้าเลือกเป็น Enable จะอนุญาตให้เฉพาะ Developer ของ App นี้เท่านั้นที่สามารถใช้งานทดสอบ App นี้ได้ (ตามช่อง Developers ที่ได้กรอกไว้ใน Tab General) ซึ่งหากเป็น App ที่อยากให้เพื่อนช่วยทดสอบ แต่ไม่อยากให้เพื่อนเข้ามายุ่มย่ามกับ Application Setting ของเราก็ปล่อย Disable ไปเถอะครับ
- Tab General ต้องเซ็ตดังนี้
- คลิก Save Changes ก็จะแสดงหน้า Profile ของ Application เราขึ้นมา ให้จำค่า API Key และ Application Secret เอาไว้ให้ดี เพราะต้องเอาไปใช้ใน code ของเราตอนเชื่อมกับ Facebook ครับ
- ในหน้าเดียวกันกับข้อที่แล้วให้เลื่อนลงมาด้านล่าง คลิก Download the Client Library (จะกด link นี้เพื่อดาวน์โหลดเลยกได้ แต่ไม่ยืนยันว่าจะได้ library เวอร์ชั่นล่าสุดครับ) ส่วนใครที่ไม่ได้ใช้ php สามารถ Download library ต่างๆ ในภาษาที่ใช้ได้ที่ Unofficial Client Libraries
- Extract Client Library ออกมา จะมี folder footprints กับ php ซึ่ง folder footprint จะเป็น app ตัวอย่างซึ่งใช้ Setting แบบ FBML ในการรันใช้งาน (แต่เราเลือกเป็น Iframe ไว้) ดังนั้นจะใช้งานกับ Tutorial ฉบับนี้ไม่ได้ ใครอยากลองในนั้นก็ได้ครับ ตามสบาย
- ใน 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 ขึ้นไปจะสามารถใช้ฟังก์ชั่นนี้ได้อยู่แล้ว)
- กลับมาที่หน้าเดิมกับข้อ 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 ของเรา)
- ทดสอบพิมพ์ URL ตาม Canvas Page URL ที่กรอกไว้ใน Tab Convas ก็จะรัน app ได้ทันที โอ้!! มีรายเพื่อนของเราโผล่มาหมดเลย!! อะไรเนี่ย?? ยังไม่ต้อง code เลยซักแอะ แค่ Copy Paste เอง
- ถ้าต้องการ Edit Application Setting อีกครั้งก็เข้าหน้า Facebook Developer ที่ bookmark ไว้แล้วจะมีรายชื่อ App ที่เราสร้างไว้ทางขวาบน (ใต้ปุ่ม Setup New Application) แล้วจะกลับมาที่หน้าเดียวกับข้อ 7 คลิกที่ Edit Settings ก็จะแก้ไขค่าต่างๆ ได้ครับ
เสร็จแล้ว โอ… เหมือนจะไม่ยากเลยใช่ไหมครับ แต่ความยุ่งยากที่แท้จริงมันหลังจากนี้ครับ 555 อ่านต่อภาคนิดยามความหมายต่างๆ ว่าไอ้ที่เราทำอะไรไปเนี่ยมันยังไงบ้างได้ที่บทความต่อไปครับ…
ปล. สำหรับใครที่ใช้ Framework Codeigniter สามารถดูตัวอย่างการสร้าง Facebook Application บน Codeigniter ได้ที่นี่ โดยอันนี้ต้องเลือก Render Method เป็นแบบ FBML นะครับ
ปล2. ขี้เกียจ Capture รูป ไม่ว่ากันนะ
Enjoy this article?
Consider subscribing to our RSS feed!
10:28 on October 21st, 2009
กำลังงงกับเรือ่งนี้อยู่พอดีเลยครับ แถมคนก็เขียนอธิบายเรื่องนี้กันไว้น้อยมาก ขอบคุณมากมายครับผม
22:45 on October 21st, 2009
ขอบคุณมากค่ะ
อยากทราบว่า api secret ดูตรงไหนอ่ะคะ
21:34 on October 25th, 2009
อยู่ใน http://www.facebook.com/developers/ นั่นแหละครับ หน้ารายละเอียด app ที่สร้างแล้วจะมีแจ้งไว้อยู่ครับ
04:43 on November 11th, 2009
เอาโค้ด hi5 ไปใส่ได้ไหมครับ แล้วใส่ที่ไหน??
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).
งงอะคับ ช่วยทีนะ
23:37 on December 23rd, 2009
ช่อง Canvas Callback URL แก้จาก http://www.yourname.com เป็น http://www.yourname.com/ แค่นั้นแหละครับ ตัวอย่างก่อนผมใส่ Index.php มาด้วยเลยผิด จริงๆ ต้องไม่มีครับ ขออภัย
23:59 on December 23rd, 2009
พี่พอมีเมลให้ติดต่อปะคับ พอดีอ่านบางช่วงไม่เข้าใจอะ เลยอยากขอเมลพี่หน่อยได้มะคับ ขอบคุณมาก
00:04 on December 24th, 2009
ช่วงนี้ผมไม่ค่อยว่างเท่าไหร่ ไม่สะดวกจะให้คำปรึกษายาวๆ ยังไงลองทำเองพร้อมกับ google เพิ่มเติมดูก่อนนะครับ
01:21 on December 28th, 2009
พี่คับผมติดปัญหาอีกแล้ว ช่วยหน่อย ผมใส่ Url ใน Canvas Callback URL แล้วใช่ปะ แต่พอรันแล้วมันไม่แสดงapi ให้อะ หน้าแฟรชเป็นหน้าขาวๆเลย งงมากอะ เพราะอะไรคับ ผมใส่เข้าไปแบบนี้อะ http://www.alldemons.pr.in.th/game/api.php/ แต่ถ้าเอา / ออกจะรันได้ปกตินะ แต่เซพในfacebook ไม่ได้
00:08 on January 13th, 2010
ต้องใช้ web host ที่ลง facebook-platform.tar.gz และ memcached ด้วไหมครับ แล้วมีแนะนำ host ดีๆ ไหม
16:05 on January 29th, 2010
ลองสร้างตามข้างบนมา จะได้ appli อยู่บน facebook เราแล้ว แต่เวลาเราเรียกจาก http://apps.facebook.com/joker/ มันขึ้นว่า ไม่พบหน้าที่คุณต้องการ
ต้องไปสร้างอะไรเพิ่มอีกหรือเปล่าคะ แต่ถ้าเราเข้าด้วย login เราเอง หน้านี้จะขึ้นอ่ะคะ แต่คนอื่นเข้ามาไม่เห็น รบกวนแนะนำให้หน่อยนะคะ
16:16 on January 29th, 2010
คาดว่าคงไปตั้งใน setting เปิดเป็น sandbox ไว้ ไปเซ็ตออกก็จะได้ครับ
02:03 on March 3rd, 2010
ลองตามแล้ว แต่ชื่อเพื่อนที่ขึ้นมันเป็น id แทนชื่ออ่ะค่ะ
18:18 on March 16th, 2010
ลองทำตามบทความแล้ว มันขึ้นแค่
Hello, !
Friends:
แต่มันไม่ขึ้น ID หรือ ชื่อเพื่อนเลยอ่ะครับ
มันมีปัญหาที่อะไรหรอครับ
ผิดที่ code หรือมีปัญหากับ host(host free) ที่ฝากครับ
14:02 on March 23rd, 2010
พี่ครับแล้วทำยังไงให้appของเราไปอยู่ตรง กระดานข่าว/ข้อมูล/รุปภาำำำพ/ของเรานะครับ
ทำยังไงเหรอครัย
21:27 on March 28th, 2010
ข้อมูลไม่ขึ้นไม่เกี่ยวกับ Host หรอกครับ ผิดที่ code แน่นอน หรืออาจ setting บางขั้นตอนผิด ส่วน app ที่อยู่ตรง board, รูปภาพจริงๆ จะไม่มี มีลักษณะเป็น tab มากกว่า
22:18 on March 31st, 2010
พีเพิ่ม tab ผมไม่เหน appcation ของผมนะครับ ไม่ทราบต้องทำอย่างไรผม ทำ appcation เรียบร้อยแล้วนะครับ
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
เราต้องแก้ยังไงครับ
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
และยังมีอีกเพียบเลย
แต่ผลลัพท์ออกมาได้ อ่ะครับ
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 )
17:24 on April 13th, 2010
@Knothing upload facebookapi_php5_restlib.php และ jsonwrapper ทั้ง( โฟล์ดเดอร์และไฟล์ข้างใน ) ขึ้นไปด้วย
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 หัวข้อนี้จะมีการอัพเดทตัวเลขครับ
ข้อคำอภิบายหรือตัวอย่างหน่อยครับ
13:18 on April 22nd, 2010
ขอบคุณครับ เข้าใจแล้วครับ ^^
00:19 on May 1st, 2010
ตอบคุณ baanneka update ทุกวัน แต่หากช่วงไหนที่ facebook มี bug อาจจะ delay หน่อยครับ
12:40 on May 1st, 2010
ขนาดง่ายๆนะครับ ยังเล่นเอาซะงงตึ้บไปเลย แต่ยังไงจะพยายามลองทำดูครับ
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 ‘}’.
ไม่ทราบว่าจะแก้ตรงไหนค่ะ
12:31 on May 29th, 2010
เพิ่มเติมนิดค่ะ มัน error ชื่อไฟล์ facebook.php ค่ะ
15:54 on May 30th, 2010
facebook มันเข้าไม่ได้อ่ะค่ะ พอloginแล้วมันก้มีcodeให้ใส่ ต้องทำยังไงอ่ะค่ะ ในเมื่อไม่มีcodeอะไรใส่อ่ะ
08:36 on June 4th, 2010
@emptiness คาดว่าคงไปเผลอแก้ไฟล์ facebook.php นะครับ ลองดาวน์โหลดมาใหม่นะครับ
@taley ถ้าหมายถึงรหัส capcha ก็น่าจะขึ้นปกติดีนะครับ
09:54 on June 10th, 2010
กะลังจะทำรบกวนช่วยแนะนำ Host ดีๆหน่อยคับ
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
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 บัง เลยไม่รู้ว่าจะทำยังไงต่อไปดีอ่ะค่ะ ยังไง รบกวนช่วยตอบด้วยนะคะ
21:32 on July 26th, 2010
เข้าผ่าน fb เป็นแบบนี้ second test 100000695055889
เข้าผ่าน url page มันรีไดเรค ตลอดเลยครับ
14:29 on August 17th, 2010
ดาว์นโหลดแล้ว มี ไฟล์ facebook.php แต่ไม่เห็นมีไฟล์ facebookapi_php5_restlib.php เลยครับ
17:12 on September 15th, 2010
มีใครเขียน facebook connection บน desktop application ด้วย c# บ้างมั้ยครับ ผมอยากทราบว่า สามารถทำให้มันไม่ต้องกรอก username และ password ทุกครั้งได้มั้ย
ช่วยติดต่อมาที่ yui_jincee@hotmail.com ทีครับ
20:55 on November 20th, 2010
กำลังศึกษาครับ ได้ข้อมูลเยอะเลย ขอบคุณมากครับ
21:46 on February 18th, 2011
ขอบคุณนะครับ ไว้จะลองไปทำดูครับ ^^
21:13 on February 20th, 2011
ขอบคุณนะครับ สำหรับความรู้เบื้องต้น แล้วมีแบบ advance ไหมครับ
16:32 on March 8th, 2011
ขอรูปประกอบด้วยครับ ผมยังงงอยู่เลยครับ ตรงแคนวาส
16:34 on March 8th, 2011
Validation failed.
URL ของที่คั่นหน้า must be relative to your Canvas Page URL.
มันออเรอร์ตรงนี้ครับแก้ยังไงครับ
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/
09:25 on November 18th, 2011
มัน ขึ้น error
09:48 on November 18th, 2011
บทความนี้หมดอายุแล้ว กรุณาอ่านของใหม่ใน link ด้านบนครับ
12:55 on March 22nd, 2012
เยี่ยมมากๆ กำลังหาพอดีเลย
13:49 on April 4th, 2012
ขอบคุณครับ กำลังศึกษาอยู่พอดี