บทที่ 1 - เริ่มต้นสร้าง App บน Facebook

[moohooooo]

ไม่เกริ่นอะไรมากนะครับ ว่า Facebook คืออะไร ถ้ายังไม่เข้าใจว่ามันคืออะไร แนะนำให้ไปสมัคร http://www.facebook.com  ครับ เป็น Social Network

สำหรับการสร้าง Application นั้น สิ่งที่เราต้องเข้าใจในบทเรียนก่อนที่จะสอนนี้คือ
1. คุณต้องเข้าใจในเรื่องของ การเขียน Web App ใช้ภาษาอะไรก็ได้ C#, VB , PHP อันนี้แล้วแต่คุณ แต่เราจะสอน Codeigniter ครับ ซึ่งเป็นชุด Framework ของ PHP ครับ ง่ายเร็ว คล่องตัว และเหมาะกับผู้ที่สนใจที่จะเรียนรู้อย่างรวดเร็ว และในเรื่องของ DB ด้วยครับ อ้อ ถ้ายังไม่รู้เรื่อง codeigniter หรือเป็น มือใหม่ php อยากหาอะไรทำง่าย ก็ ไปนี่เลยครับ http://www.jquerytips.com/category/codeigniter/ เวบตัวพ่อ ของผมเองด้วย ได้ ref มาเยอะ ช่วยโปรโมท ซักจึ๋ง

2. เข้าใจ พื้นฐานทั่วไปของ Facebook ไม่ว่าจะเป็น Function พื้นฐาน พวก Wall, Publish พวก ศัพท์เทคนิคทั่วๆไป ซึ่งถ้าคนใช้เป็นอยู่แล้วก็น่าจะเพียงพอแล้วครับ

เอาหละถ้าคุณผ่านจุดนี้ไปแล้วเรามาเริ่มกันเลยดีกว่าครับ

Facebook App คืออะไร?

ตอบง่ายๆ คือ โปรแกรม Third Party บน Facebook หรือ โปรแกรมเสริมบน Facebook ซึ่งทาง Facebook เองจะให้บริการด้าน API มาให้กับคุณเพื่อใช้ในการพัฒนา ต่อยอดใน Facebook ได้ครับ

เริ่มยังไง

1. คุณคิดก่อนเลยว่าคุณจะทำอะไร (เหมือนทำเวบข้างนอกแหละครับ)
2. วางโครงสร้างก่อนว่าอะไรเป็นไปได้หรือไม่ได้ เหมาะสมไหม ที่จะใช้ Facebook มาเป็น ตัวช่วย หรือขับเคลื่อนงานของคุณ ถ้าไม่แน่ใจเราแนะนำให้คุณอ่าน บทความใน http://www.facebookgoo.com ครับว่า เราจะเอา Facebook มาต่อยอดได้อย่างไร ในนั้นจะพูดถึงการใช้งาน Page ในเชิงธุรกิจครับ ซึ่งผมไม่ขออธิบาย
3. เตรียมตัวและใจให้พร้อม เพราะ ว่ามันค่อนข้างจุกจิกกับปัญหาเล็กๆน้อยๆหลายๆอย่างครับ

โอเคเรามาเริ่ม สร้าง APP กันเลย
1. ก่อนอื่นไปเริ่มการสร้าง APP ได้ที่ http://www.facebook.com/developers แล้วกด Set up new application
2. กรอกรายละเอียดให้เรียบร้อยทั้งชื่อ App ที่คุณจะตั้ง และ ยอมรับ Term ของเขา ดูรายละเอียดให้ดีนะครับ เพราะ ทาง Facebook ค่อนข้างเครียดกับ เรื่องของ Privacy เอามากเลยหละ
3. เมื่อคุณสร้างแล้วจะเข้ามาสู่หน้า Dash Board ของ App ของคุณครับ
4. ในจุดนี้ จะมีในเรื่องของ API Key, Secret ต่างๆ ครับ อย่าเปิดเผยให้คนอื่นรู้ครับโดยเฉพาะ Secret Key
5. ที่นี้เราจะเข้าไปเตรียมรายละเอียดข้างในกันนะครับผม โดยการกดที่ Edit Setting ครับ

5.1 Tab Basic จะมีในเรื่องของข้อมูลทั่วไป ของ Application ไม่ว่าจะเป็นชื่อ App ต่างๆ เราสามารถเปลี่ยนได้ครับ, Logo App, fav icon ของ app , ภาษาหลักของ App , Developer (นักพัฒนาใน App นั้น) สามารถเพิ่มได้ เอาไว้ใช้สำหรับเวลา อยู่ใน mode sandbox คน ที่เป็น developer จะเข้าได้ครับ, email ที่ใช้ติดต่อ แล้วก็ Bookmark page หรือ Policy ต่างๆ มีให้หมดแล้ว ใส่ url หลักของคุณ (server ของคุณลงไปครับ ถ้าไม่มีก็ยังไม่ต้องใส่)

5.2 หน้า Canvas - มันคืออะไร? ง่ายๆเลยครับ Canvas คือ พื้นที่ ที่จะให้ Page หน้าเวบของคุณที่พัฒนา มา Land ครับ หรือ เป็น ช่อง เจาะไว้สำหรับ เวบของคุณ ในหน้านี้ให้คุณ ใส่ url ของ canvas page หมายความว่า ถ้าคุณต้องการให้คน เข้าผ่านทาง facebook สมมติว่าืชื่อ mhapp คุณก็ใส่ไป ในช่อง canvas url ครับ ทีนี้ เวลาจะ test app คุณก็ test ที่ http://apps.facebook.com/mhapp  ครับ

Canvas Setting ด้านล่างจะมี ให้ปรับโหมดของ Canvas หรือ slot ของ facebook app มาดูตัวแรก Render method มี 2 ตัว คือ Iframe , FBML อธิบายดังนี้ครับ ถ้าเป็น iframe mode ตัว Canvas จะสร้าง iframe และเรียก webpage ของคุณที่ต้องการมา Landing ส่วน FBML นั้น คุณจะต้องเขียน webpage ของคุณให้ใช้ภาษา FBML ครับ สำหรับผมแนะนำ iframe ครับ เพราะคุณสามารถใช้ jquery , css , เครื่องมือต่างๆที่คุณเคยชื่นชอบ ได้เลยครับ แต่ถ้าเป็น fbml จะค่อนข้าง strict กับ หน้า html ของคุณครับ อย่างน้อย ก็ใช้ jquery ไม่ได้ละกัน แต่ไม่ต้องห่วงครับ เดี๋ยวต่อไป ถ้าเราใช้ iframe mode เราก็ได้ใช้ fbml อยู่ดีแต่ เขาเรียกว่า xfbml นั่นเองเช่นพวก Share button , Bookmark button ครับ ได้ใช้แน่

5.3 หน้า Connect - อันนี้สำคัญมาก มันเป็น เป็นส่วนที่ใช้กำหนด ว่า ให้ map webpage ไหนที่จะมา Landing บน canvas ครับ ให้เราใส่ url ที่คุณพัฒนา ลงไปครับ ในช่อง connect url มี / ด้วยเน้อปิดท้าย เช่น http://www.xxx.com/facebook/ ที่นี้ ก็จะถือว่า ถ้าเราเรียก หน้าเวบ http://apps.facebook.com/mhapp  มันก็จะไปเรียก
http://www.xxx.com/facebook/ มาโชว์ใน Canvas แล้วครับ ทีนี้ก็ลุย Code ได้เลย

5.4 หน้า Advance - อันนี้ผมพูดเฉพาะ Application type กับ Sandbox ครับ type นั้นให้เลือก web ครับ เพราะเราทำบนเวบ ส่วน sandbox mode คือ mode การพัฒนาครับ ผู้ที่เป็น developer เท่านั้นถึงจะเข้า app ได้ครับ เพื่อมา test ก่อน Production ครับผม

5.5 หน้า Migration - ผมแนะนำเลยให้ปรับ Canvas Session Parameter เป็น enable และ OAuth 2.0 for Canvas (beta) เป็น enable ไว้ครับ ( ไว้กันปัญหา ต้องสร้าง Profile tab ครับ)

เมื่อเสร็จเรียบร้อยแล้ว ทีนี้ก็จะเข้าสู่ กระบวนการเขียน Webpage แล้วครับ คุณลองสร้างหน้า index.html ดูครับบน server ของคุณที่ คุณกำหนด connect url ไว้ แล้วลองดูว่า มัน Hello world ได้หรือเปล่านะครับผม ( ใช้ index.html ธรรมดา นี่แหละก่อนเลยครับ) ถ้าได้แสดงว่า คุณเริ่มต้นถูกทางแล้วครับ!!!

ในบทต่อไปจะพูดถึงในเรื่องของ Authentication นะครับ หรือการเอาประโยชน์จาก การเชื่อมต่ิอ กับ facebook มาใช้ครับ

ขอบคุณครับ ผมปัญหาอะไร คุยกันได้ครับ หรือ http://www.facebook.com/moohooooo ครับ

[Zigado]

ขอบคุณสำหรับความรู้ดีๆครับ 

[idee]

+1 ไปเลยครับไม่ต้องอะไรมาก
ยิ่งเห็นผลงานก่อนหน้านี้แล้ว ไม่ต้องลังเลสงสัยจัดไปครับบบบ
กำลังเรียนรู้เรื่อง App ของ Fb อยู่ครับ

อยากจัดเว้บในลายเซ็นไปไว้บน App FB
เก็บไว้ก่อนแล้วจะหาเวลามาอ่านเพิ่มนะครับ
วันนี้ง่วงแว้วววว

[jealous]

+1 ไปเลยจ้า

[Takashi3]

เยี่ยมเลยครับกะว่าจะทำเหมือนกันแต่ยังไม่ได้เริ่มซักทีกับ facbook ขอบคุณสำหรับบทความดี ๆ ครับ

[gobank01]

สนนะ

แต่ไม่กล้าเริ่ม กัวติด 55+

เดียวไม่เป็นอันทำ เสียว

[anivox]

รอติดตามชมครับ

[bigblog]

เยี่ยมมากครับ ติดตาม ครับ

[natty2010]

เข้ามาเก็บความรู้ค่ะ ขอบคุณค่ะ 

[KoLoRn]

ได้ความรู้เพิ่มเติมอีกแล้วคืนนี้

[tchsurasak]

รอติดตามต่อไป

[artitpoo]

+1 ขอบคุณ เก็บเข้าสมองก่อน

[ohmohm]

ขอบคุณครับ
ทำสารบัญให้ล่ะครับ
   
บทที่ 2 - ทำความเข้าใจกับ Facebook API
http://www.thaiseoboard.com/index.php/topic,132270.0.html

อันนี้โดยผมครับ มีภาพและโค้ดประกอบ   
วิธีการแสวงหา Facebook API Key
http://www.thaiseoboard.com/index.php/topic,131754.0.html

[jealous]

ขอบคุณครับ
ทำสารบัญให้ล่ะครับ
   
บทที่ 2 - ทำความเข้าใจกับ Facebook API
http://www.thaiseoboard.com/index.php/topic,132270.0.html

อันนี้โดยผมครับ มีภาพและโค้ดประกอบ   
วิธีการแสวงหา Facebook API Key
http://www.thaiseoboard.com/index.php/topic,131754.0.html

+1 เลยค่ะ

[PR10]

มาศึกษาหาความรู้เพิ่มเติมคับ   

[jealous]

มีบทที่ 3 หรือยังค่ะเนี่ย...  เฝ้ารอเลยค่ะ

[Nore]

อยากเขียนแต่ไม่มีไอเดีย 

[ardzmundee]

ขอเก็บกระทู้ก่อน อยากเล่นแต่เล่นไม่เป็น 

[WPDSign]

ขอบคุณครับ
thank

[Zero-G]

แจ่มคับ กำลัีงสนใจพอดี