Aj.Sarun's Computing Courses: การลิงก์เว็บแอพของเราให้เป็นเฟซบุ๊คแอพ

เริ่มบทความแรกของบล็อกนี้ ด้วยเรื่องที่หลายคนอาจจะอยากทำแต่ยังหาทางเริ่มต้นไม่ถูกนะครับ ก็คือการเชื่อมต่อเว็บแอพของเราให้เป็นเฟซบุ๊คแอพ สำหรับสิ่งที่จะต้องเตรียมตัวก่อนที่จะทำตามขั้นตอนในบทเรียนนี้ก็คือ 1. คุณต้องมีเฟซบุ๊คครับ ใครไม่มี (ล้อเล่นหรือเปล่า) ก็ไปสมัครซะนะครับ 2อันที่สองคุณต้องมี Web Hosting ครับ และถ้าคุณไม่มี Domain Name ของตัวเอง ก็ควรหา Web Hosting ที่ให้คุณสร้าง Sub domain ได้นะครับ ซึ่งผมขอแนะนำตัวฟรีตัวหนึ่งคือ http://www.awardspace.com/ ไปสมัครให้เรียบร้อยนะครับ อย่างไรก็ตามเนื่องจากตอนนี้เฟซบุ๊ค ระบุให้เว็บแอพที่จะลิงก์เข้ามาเป็นเฟซบุ๊คแอพต้องมีการเชื่อมต่อแบบปลอดภัยโดยใช้ SSL พูดง่าย ๆ ต้องใช้ https แทน http ธรรมดา และฟรีเว็บโฮสติงส่วนใหญ่มักไม่มีคุณสมบัตินี้ หรือถ้ามีก็ต้องจ่ายเงิน ดังนั้นเฟซบุ๊คแอพที่พัฒนาขึ้นตามบทความนี้ ก็จะใช้งานได้เฉพาะเราที่เป็นคนพัฒนามันขึ้นมาเท่านั้น ซึ่งถ้าใครอยากให้คนอื่นใช้ด้วยอาจต้องเสียเงินหาเว็บโฮสติงที่รองรับ SSL นะครับ ซึ่งผมจะอธิบายเรื่องนี้ต่อไปนะครับ

เรียบร้อยแล้วใช่ไหมครับ เอาล่ะมาเริ่มต้นกัน เราจะเริ่มจากการพัฒนาเว็บแอพง่าย ๆ ครับ หลายคนอาจคิดว่า Hello World ละซิ มันง่ายไปใช่ไหมครับ ถ้างั้นเอาโปรแกรมยากขึ้นมาหน่อย Hello Facebook แล้วกัน :) จริง ๆ ความยากง่ายของเว็บแอพของเราไม่เกี่ยวกับบทความนี้นะครับ ดังนั้นเพื่อให้สอดคล้องกับจุดมุ่งหมายของบล็อกนี้คือให้ทำตามได้ง่าย ๆ อย่างเข้าใจ ก็เอา Hello นี่ละนะครับ จะ Hello อะไรก็ตามสะดวก ผมเอา Hello Facebook แล้วกัน ดังนั้นเว็บแอพเราจะมีโค้ดตามนี้ครับ

<HTML>
<BODY>
<H1> Hello Facebook </H1>
</BODY>
</HTML>

เพื่อความง่ายให้จัดเก็บไฟล์นี้ในชื่อ index.html นะครับ โหลดขึ้น Web Hosting ของคุณครับ จากนั้นทดลองดูครับว่าเว็บแอพของเราทำงานได้โดยพิมพ์ชื่อ Sub domain ที่เราสร้างไว้ครับ อย่างของผมใช้ Award Space และผมสร้าง Sub Domain ชื่อ hellofb.atwebpages.com เมื่อป้อน URL แล้วเราควรได้ผลลัพธ์ตามรูปดังนี้ครับ

ถ้าทุกอย่างเรียบร้อยเรามาเริ่มลิงก์เว็บแอพของเรากันเลยครับ โดยทำตามขั้นตอนดังนี้ครับ

ให้ล็อกอินเข้าเฟซบุ๊คแล้วไปที่หน้านี้ครับ https://developers.facebook.com/apps ซึ่งถ้าใครยังไม่เคยลงทะเบียนเป็นนักพัฒนา (Developer) ก็ลงทะเบียนนะครับ จากนั้นควรจะได้จอภาพแบบนี้ครับและให้คลิกที่ปุ่ม Create New App

จากนั้นให้ป้อนApp Name และ App Namespace โดย App name ความยาวตั้งแต่สามตัวขึ้นไปแต่ไม่เกิน 32 ตัว และต้องไม่มีคำอะไรที่มีชื่อคล้าย ๆ หรือสื่อไปถึง Facebook ส่วน App Namespace ให้ตั้งชื่อ URL ของ App เราภายใต้ Facebook เช่นถ้าเราใส่ App NameSpace เป็น hellohellofb เราจะอ้างถึงโปรแกรมของเราได้จาก URL นี้ http://apps.facebook.com/hellohellofb จากนั้นคลิกปุ่ม Continue และป้อนรหัสตรวจสอบให้เรียบร้อย

ป้อนข้อมูลต่อไปนี้

Sandbox Mode: ให้เลือก Enable จุดประสงค์ของการเลือกโหมดนี้ก็คือเราต้องการจะทดลองแอพของเรา ยังไม่ต้องการให้คนอื่นใช้ และการเลือกข้อนี้ ทำให้เราไม่ต้องไปกำหนด URL ที่เป็น https ในหัวข้อถัดไป แต่ถ้าคุณต้องการให้คนอื่นใช้ App นี้ด้วยต้องเลือก Enable และคุณต้องมี URL แบบ https อีกด้วย

canvas URL: ตรงนี้ให้ป้อน URL ของเว็บแอพคุณครับ เช่นของผม hellofb.atwebpages.com/ ต้องใส่ / หลังสุดนะครับ ไม่งั้นเฟซบุ๊คไม่ยอม

secure canvas URL: ใส่ค่า URLแบบ https ของเว็บแอพ ค่านี้ต้องใส่ถ้าคุณเลือก Sandbox Mode เป็น disabled

จากนั้นกดปุ่ม save changes

ทดลองใช้งานโปรแกรมโดยป้อน URL ในรูปแบบ apps.facebook.com/AppNamespaces สำหรับค่า AppNamespaces ให้ใช้ค่าที่ป้อนไว้ในขั้นที่สอง ซึ่งถ้าไม่มีอะไรผิดพลาดก็ควรจะได้ผลลัพธ์ดังนี้