concept ของการเขียน web app ใน facebook คือ

  1. สร้าง application ใน facebook เมื่อสร้างเสร็จจะได้ Application ID, API Key, Secret
  2. สร้าง web application อยู่ที่บน internet แล้ว เขียน config application id, api key ตามที่ได้ตอนแรกโดยใช้ javascript libary ของ facebook (graph api)
  3. กลับไป config ที่ facebook ให้ application ชี้ url ไปที่ web app ที่เราสร้างขึ้นมา (จากข้อ2)

การเชื่อมต่อ web-app ของเรากับ facebook

- เมื่อมี account ของ facebook แล้วให้เราไปที่ url : http://www.facebook.com/developers/

- เลือกไปที่ ปุ่ม [+set up new application]

- กรอกชื่อ application ของเราตรงช่อง Application Name :

- เลือก Agree แล้วกดปุ่ม create application

- จะเห็นหน้าจอ ขึ้นมาใหม่ ซึ่งเป็นรายละเอียดเกี่ยวกับ application ของเราที่สร้างขึ้น

  • tab Basic ข้อมูลทั่วไปเกี่ยวกับ application จะเห็นสิ่งที่ต้องใช้ในการทำขั้นตอนต่อไปก็คือ Application ID, API key, Secret
  • tab Authentication จะเป็นส่วนสำหรับบอกว่า web application ของเราอยู่ที่ ไหน
  • tab Profile เป็น tab เพิ่มใน profile ของเรา
  • Canvas ใช้กำหนด url ที่เรียกจาก facebook และ web-app ของเรา ขนาดของ web-app ที่เอามาติดไว้ที่ facebook
  • Connect เป็นส่วนบอกว่า จะต้องติดต่อกับ website ของเราผ่าน url อะไร
  • Widget ส่วนเพิ่มเติมพิเศษสำหรับทำ app ไว้ในหน้า profile ของเรา
  • Advance กำหนดรายละเอียดเกี่ยวกับ application ของเรา
  • Migration ใช้สำหรับ upgrade หากคุณมี application อยู่แล้ว

- จดบันทึกรายละเอียดเกี่ยวกับ Application ID, API key, Secret เพื่อใช้ในการทำ web-app ต่อไป

ทำ web-application

ทำ web application หรือ webpage ไว้แล้วเก็บไว้สักที่ เช่น http://lab.dogameok.com/demo/webapp_facebook/index.php

โดยที่เนื้อข้างมีดังนี้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>Test Login</title>
  </head>
  <body>
 
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js"></script>
 
  <script>
  window.fbAsyncInit = function() {
	//startup
	FB.init({ apiKey: 'YOUR_API_KEY', 
		status: true, 
		cookie: true, 
		xfbml: true });
 
	//check session 
	function handleSessionResponse(response) {
	if (!response.session) {
	  return;
	}
	FB.getLoginStatus(handleSessionResponse);
 
 
	//check login
	FB.login(function(response) {
		if (response.session){
			//access now 
		}else{
			//to dialog box accesss permission : http://www.facebook.com/connect/prompt_permissions.php?api_key=YOUR_API_KEY&ext_perm=PERMISSION,PERMISSION&next=URL_AFTER_APPROVAL&cancel=URL_IF_CANCEL&display=wap
			var urlPerm = 'http://m.facebook.com/tos.php?api_key=YOUR_API_KEY&v=1.0&next=http://apps.facebook.com/fbco_testcon/&cancel=http://www.facebook.com';
			window.location=urlPerm;
			window.location.reload();
		}
	});
  }
  </script>
 
	if you have this message, you acess my app now 
 
 
  </body>
</html>

กลับไป config ที่ facebook ให้ application ชี้ url

  • ให้กลับไปที่ http://www.facebook.com/developers/
  • จากนั้นเลือก see my applications ซึ่งจะเป็น ตัวหนังสือ ข้างใต้ปุ่ม [+ create application]
  • เมื่อเข้าไปแล้วจะเห็น tab ข้อมูลรายละเอียด application ต่าง ๆ ให้ เลือก Edit Settings (จะเห็นอยู่ list menu อยู่ด้านขวาประมาณ กลาง ๆจอ)
  • กรอกข้อมูลรายละเอียดเบื้องต้น ใน Tab Basic ให้เรียบร้อย ไม่ว่าจะเป็น ชื่อ application, icon ฯ แล้วทำการ save changes
  • มากรอก tab authentication ตรงส่วน Post-Authorise Callback URLให้เลือกเป็น url ที่เก็บไฟล์ของเรา เช่น http://lab.dogameok.com/demo/webapp_facebook/ แล้วทำการ save changes
  • กรอก tab profile : Tab Name คือ ชื่อ tab กรอกเหมือนชื่อ application name ก็ได้
  • *** ให้ไปที่ tab canvas ก่อน ในหน้านี้จะมีให้กรอก Canvas Page URL คือ ชื่อ link ใน facebook , Canvas URL Callback ให้กรอก ตาม url ที่เราเขียน web เอาไว้เช่น http://lab.dogameok.com/demo/webapp_facebook/ แล้วทำการ save changes

เท่านี้ก็เป็นการเสร็จสิ้นกระบวนการเขียน web-application ติดต่อกับ facebook เบื้องต้นได้แล้ว สามารถทดลอง ได้จากการเข้า ไปที่ Canvas Page URL

refer: http://lab.dogameok.com/?p=1