<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId   : '<?php echo $facebook->getAppId(); ?>',
          session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
          status  : true, // check login status
          cookie  : true, // enable cookies to allow the server to access the session
          xfbml   : true // parse XFBML
        });

        // whenever the user logs in, we refresh the page
        FB.Event.subscribe('auth.login', function() {
          window.location.reload();
        });
		FB.Canvas.setAutoResize();
      };

      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
</script>

มีจุดที่น่าสนใจสองจุดดังนี้

• appId – Application ID ของ app ที่เราสมัครไว้
• session - Session ที่ตัว php set ไว้ก่อน หากมีการใช้ Facebook API เวอร์ชั่น PHP ควรจะใช้ session ตัวเดียวกันเพราะจะได้ไม่ต้องเสียเวลา Authenticate สองรอบ (รอบแรก php รอบสอง javascript)

หาก Authenticate สำเร็จจะสามารถใช้ XFBML (tag ที่มี fb: นำหน้า)ได้ ซึ่งเป็น component สำเร็จรูปเช่น

• ปุ่ม Login - <fb:login-button></fb:login-button>
• กล่อง comment – <fb:comments></fb:comments>
• แสดงชื่อเต็ม ของ facebook user id ที่ระบุใน uid – <fb:name uid=”550734390″ capitalize=”true”></fb:name>
• ปุ่ม share - <fb:share-button href=”http://www.levelup.in.th/” type=”box_count”></fb:share-button>
• และสุดท้าย กล่อง invite friend ครับ

FB.api('/me', function(response) {
  alert(response.name);
});

สุดท้ายคือ code publish ลง wall ของ Javascript API ตัวนี้ครับ

	FB.ui(
	   {
		 method: 'stream.publish',
		 message: 'getting educated about Facebook Connect',
		 attachment: {
		   name: 'Connect',
		   caption: 'The Facebook Connect JavaScript SDK',
		   description: (
			 'A small JavaScript library that allows you to harness ' +
			 'the power of Facebook, bringing the user\'s identity, ' +
			 'social graph and distribution power to your site.'
		   ),
		   'media': [{ 'type': 'image', 'src': 'http://www.blognone.com/themes/blognone4/images/logo.png', 'href' : 'http://apps.facebook.com/sipa_gamepro/'}],
		   href: 'http://apps.facebook.com/sipa_gamepro/'
		 },
		 action_links: [
		   { text: 'Code', href: 'http://apps.facebook.com/sipa_gamepro/' }
		 ],
		 user_message_prompt: 'Share your thoughts about Connect'
	},
   function(response) {
     if (response && response.post_id) {
       alert('Post was published.');
     } else {
       alert('Post was not published.');
     }
   }
 );

ส่วนที่ต้องแก้เพื่อใช้งานมีดังนี้ครับ

• message – ข้อความที่จะพิมพ์ให้ผู้ใช้นำก่อนเลย ส่วนมากแล้วมักใส่เป็น string เปล่าเว้นไว้ครับ
• name – ชื่อหัวข้อ publish (ส่วนที่ตัวหนา)
• caption – รายละเอียดข้อความที่จะแสดง
• media – มีสามตัวย่อยที่ต้องใส่คือ
  • type – สามารถใส่เป็น image, flash, sound ได้ โดยทั่วไปมักใส่เป็น image
  • src – URL รูปภาพ, flash, เสียง
  • href – URL ที่จะ link ไปหาเมื่อผู้ใช้คลิกภาพนี้
• href – URL ที่ผู้ใช้คลิกที่ตัวหนาแล้วจะไปหา
• action_links – มีสองตัวย่อยที่ต้องใส่คือ
  • text – ข้อความที่แสดงใต้ post ต่อจาก Comment และ Like
  • href – URL ที่จะ link ไปหาเมื่อผู้ใช้คลิกที่ข้อความนี้
• user_message_prompt – ข้อความที่แสดงบนกล่องข้อความที่ให้ผู้ใช้พิมพ์

เอาล่ะ ขอให้ทุกคนโชคดีกับการทำ app facebook นะครับ

Update ล่าสุดตามได้ที่บทความใหม่อันนี้ครับ บทความนี้ใช้ได้แค่ตั้งแต่ข้อ 7 ลงไปนะครับ ส่วนข้อ 1-6 มันเก่าเกินไปแล้ว ใช้ไม่ได้แล้วครับ

องค์ประกอบการทำเกม 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 นะครับ

for( var y in x)

y คือ ค่า key ใน array/object

x คือ ตัวแปร object หรือ array ที่ต้องการมารันในคำสั่งนี้นะครับ

ในการ y จะเปลี่ยนเป็นค่า key ต่่างๆตามลำดับในตัวแปร x นะครับ ตรงนี้จะไม่เหมือนกับ foreach ครับ คำสั่งจะไม่มี value ให้ แต่สามารถหาค่าได้จาก x[y] ครับ

for( var y in x )
{
   var value = x[y];
   ...
}

แต่คำสั่งนี้ยังมีปัญาอยู่อย่างนึงครับ คือ คำสั่งจะรัน property ทั้งหมดภายในตัวแปร ไม่ว่า property นั้นจะเป็นคำสั่งหรือตัวแปร

ทีนี้เลยมีวิธีป้องกันคือ ต้องตรวจสอบ ประเภทของ property แล้วให้ข้าม property นั้นไปครับ

ตัวอย่างโค้ด :

for( var y in x )
{
   if( typeof x[y] == "function" )
      continue ;
   ...
}

1. ฝังลงไปใน Movie Clip เลย โดยแก้ไขงานจากฝั่ง Flash โดยการเอา เสียงที่ต้องการให้เล่นใน Time line ของ Movie Clip นั้นๆ วิธีนี้เป็นวิธีที่ง่ายที่สุดแล้วมั้ง แต่ไม่ค่อยไดนามิกเท่าไหร่

2. โหลดไฟล์เพลงผ่าน url ให้ FLEX โหลดเพลงมาจาก url ที่ระบุเอาไว้

ตัวอย่างโค้ด

var sound:Sound = new Sound( new URLRequest("www.example.com/click.mp3") );
sound.play();

3. ฝังไฟล์เสียงลงตัวแปร Classแล้วเรียกใช้ผ่าน Class นั้น

ตัวอย่างโค้ด

[Embed(source="C:/sound/click.mp3")]
var soundClick:Class;
var sound:Sound = new soundClick();
sound.play();

function streamPublish มี parameter ที่ต้องส่งไปดังนี้

• user_message – คือข้อความที่จะ default ปรากฏให้ผู้ใช้กรอก แต่เนื่องจาก policy ของ facebook กำลังจะเปลี่ยนห้ามปรากฏข้อความ default ให้ผู้ใช้พิมพ์เองทั้งหมด ผมจึงแนะนำให้เว้นว่างไว้ครับ (จริงๆ มันก็ไม่ได้สำคัญมากอยู่แล้ว)
• attachment – ตรงนี้สำคัญมาก คือต้องการแทรกข้อความอะไร และจะแทรกอะไรแนบไปกับข้อความ (รายละเอียดเพิ่มเติมดูที่ wiki facebook หน้านี้) สามารถ attach หลายๆ อย่างพร้อมกันได้ แต่ไม่แนะนำเนื่องจากจะรก มีรายละเอียดดังนี้
  • name – หัวเรื่องที่ต้องการ publish (ส่วนที่เป็นตัวหนังสือหนา)
  • href – link ที่กดจากข้อความ name แล้วให้ไปที่ใด
  • caption – รายละเอียดของการ publish (ปรากฏใต้ตัวหนังสือหนา) สามารถแทรกข้อความ {*actor*} เข้าไปเพื่อให้ facebook แทนที่ข้อความด้วยชื่อของผู้ publish ได้ หากเกิด 300 ตัวอักษรจะถูกซ่อนใน link See More
  • media – ส่วนของการแนบไฟล์ต่างๆ ตัวไฟล์แนบนั้นสามารถแบ่งเป็น3 ประเภท มีดังนี้
  • image – ไม่ว่าจะแนบรูปขนาดเท่าไรไป facebook จะทำการย่อรูปให้เหลือขนาด 90×90 เสมอ และ 1 แถวสามารถแสดงรูปได้สูงสุด 4 รูป (หากใส่มากกว่านั้นจะถูกดันลงไปอีกบรรทัดหนึ่ง) แต่อย่างไรก็ตาม ขณะนี้หากมีการแนบรูปมากกว่า 1 รูป รูปที่ไม่ใช่รูปแรกจะถูกซ่อนภายใน link Read More ดังนั้นรูปแรกจะเป็นรูปที่สื่อความหมายมากที่สุด เนื่องจากผมเชื่อว่ามีคนกว่า 70% ที่จะไม่คลิกปุ่ม Read More นี้ มีโครงสร้างโค้ดดังนี้ (หากต้องการใส่หลายรูป ให้ใส่เป็น array ดังตัวอย่างโค้ดที่แสดง)
    var attachment = {‘media’:
    [{'type': 'image',
    'src':  'http://levelup.in.th/planet/wall/first.jpg',
    'href': 'http://apps.facebook.com/lvup_planet'},
    {'type': 'image',
    'src':  'http://levelup.in.th/planet/wall/second.jpg',
    'href': 'http://apps.facebook.com/lvup_planet'}]}
  • flash – มักจะเป็นวิดีโอจาก youtube โดยสามารถใส่ thumbnail เองได้ ต้องคลิกก่อนจึงจะเริ่มมีการใช้งาน มีโครงสร้างดังนี้
    var attachment = {‘media’:
    [{'type': 'flash',
    'swfsrc': 'http://www.mapsofwar.com/photos/EMPIRE17.swf',
    'imgsrc': 'http://icanhascheezburger.files.wordpress.com/2009/04/funny-pictures-hairless-cat-phones-home.jpg',
    'width': '100',
    'height': '80',
    'expanded_width': '160',
    'expanded_height': '120'}]}
    • type – ใส่ flash
    • swfsrc – URL ต้นฉบับ
    • imgsrc – thumbnail
    • width – ความยาว thumbnail
    • height – ความสูง thumbnail
    • expanded_width – ความยาววิดีโอเมื่อคลิกที่ thumbnail
    • expanded_height – ความสูงวิดีโอเมื่อคลิกที่ thumbnail
  • mp3 – ใส่ได้เพียงอันเดียวเช่นกัน facebook จะมีโปรแกรมเล่นเสียงให้ในตัว ใส่เพียง URL, title, artist, album มีโครงสร้างดังนี้
    var attachment = {‘media’:
    {‘media’:
    [{'type': 'mp3',
    'src': 'http://www.looptvandfilm.com/blog/Radiohead%20-%20In%20Rainbows/01%20-%20Radiohead%20-%2015%20Step.MP3',
    'title': '20 Step',
    'artist': 'Radiohead',
    'album': 'In Rainbows'}]}
    • type – ใส่ mp3
    • src – URL ต้นฉบับ
    • title – ชื่อเพลง
    • artist – ชื่อศิลปิน
    • album – อัลบั้ม
• actionLinks – คือ link ด้านล่างสุด ใต้ข้อความอธิบาย มักใส่ข้อความว่า “Play Now”, “Play Planet” (ใส่สัญลักษณ์แปลกๆ บางตัวเช่น [Play Planet] ไม่ได้ จะโดนลบให้เองโดยอัตโนมัติ) ใส่ได้สูงสุง 25 ตัวอักษร มีโครงสร้างโค้ดดังนี้
  var actionLinks = [{ "text": 'Play Planet', "href": 'http://apps.facebook.com/lvup_planet'}];
• targetId – ต้องการโพสต์ลง wall ของใคร อาจใส่เป็น user id ของเพื่อนของผู้ใช้ที่เล่นอยู่ก็ได้ แต่ทั่วไปแล้วแนะนำให้ใส่เป็น null เพื่อให้โพสต์ลง wall ของตัวผู้เล่นเองครับ จะได้ผลดีกว่ามาก (โพสต์ลง wall เพื่อนอาจเกิดความรำคาญได้)
• prompt – ข้อความด้านบนที่ชี้แจงว่าให้ผู้ใช้กรอกข้อความอะไร ทั่วไปแล้วมักจะนึกไม่ออกกัน (ฮา) และใส่ไปว่า “Write something…” อันนี้เรื่องจริงไม่ได้ล้อเล่นครับ เป็นกันหลาย app เลยทีเดียว
• callback – เมื่อ publish ข้อความเสร็จสิ้นหรือมีการปิดหน้าต่างทิ้ง หรือกด skip function นี้จะทำงานครับ มี parameter สองตัวที่ส่งมาคือ
  function defaultCallback (post_id, exception) {
  // script ตามต้องการ อาจมีการยิง AJAX เพิ่มเติมหากต้องการเก็บข้อมูลบางอย่าง
  }

และสำหรับ code ส่วน attachment เต็มๆ ที่ผมใช้มีดังนี้

และนี่คือรายละเอียดทั้งหมดของการ Publish ลง wall ครับ ส่วนนี้จำเป็นมากๆ ต่อ Viral Marketing เป็นช่องทางหนึ่งที่ได้ผลดีที่สุดมากกว่า invite friend กันตรงๆ หรือการส่ง notification เสียอีก หากออกแบบรูปที่ publish ลง wall ให้เด่นสะดุดตาแล้วจะมีผู้เล่นคลิกมาเล่น app มากมายผ่านทาง wall สิ่งที่จะตัดสินชะตา app เราก็คือรูปๆ แรกก่อนคลิก See More นี่แหละครับ ส่วนช่องทางโปรโมทที่ได้ผลอีกทางที่เหลืออยู่คือลง Ads นั่นเองแหละครับ ขอให้ทุกคนโชคดีกับการทำ app บน facebook นะครับ