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

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


เนื่องจาก Facebook ได้ประกาศ API ใหม่มาตั้งแต่เดือนเมษายน ชื่อว่า Graph API ตอนนี้ก็ควรแก่เวลา(ตั้งนานแล้ว) ที่จะ update บทความใหม่เสียทีองค์ประกอบการทำเกม 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 นะครับ

ที่มา http://blog.levelup.in.th/

 

ผู้เขียน Admin| 13 ตค. 2554 เวลา 14:44 น.| 2| 17989| Application Facebook, Graph API, api, SDK, PHP SDK, , Javascript SDK, Web Application
usericon

คำตอบที่#1

หรือลองทำตามขั้นตอนนี้ดูครับ http://www.idesignboom.com/index.php?module=blog&id=94
Admin 16 มค. 2554 เวลา 01:52 น. 124.120.xxx.xx
usericon

คำตอบที่#2

เพราะในไฟล์ facebook.php
โหลดมาจาก https://github.com/facebook/php-sdk/tree/master/src โดยไม่ได้แก้ไขอะไรเลย
แต่ไม่แน่ใจว่า run ใน iis เป็นยังไงเพราะลองแต่ appserv

ดูในไฟล์ connect_facebook.php

$facebook = new facebook(array(
  'appId'  => 'appid ที่ได้จาก facebook',
  'secret' => 'app secret ที่ได้จาก facebook', 
  'cookie' => true, 
  'session' => true, 
));
Admin 28 มค. 2554 เวลา 01:45 น. 115.87.xx.xx
 
     

Talk X

6 4 5 8 2 3 7 9 10 1 11