我写的这个例子是比较简单的，但是能解释Facebook API的基础用法。例子看起来是这样的：
这个flash显示出你的名字、头像；如果点击“Get Friends”，还能获取到你的朋友。本教程的源码在http://krasimirtsonev.com/files/facebookapplication/source.zip。
当开始做这个项目的时候，我试着搜索AS3类库。也找到了一个，Adobe自己的，http://code.google.com/p/facebook-actionscript-api/。一开始看起来不错，用了几个小时后，发现它有点小儿科。我查看了它的部分源码，我用的这个版本，实际上是通过ExternalInterface与Facebook交互的。过去几个月，我经常用Facebook's JavaScript SDK，老实说，很实用。为了不再修复接二连三的bug，果断放弃AS3的库。Facebook's JavaScript SDK的所有向Facebook的请求都由JavaScript完成，数据一准备好就发给flash程序。
另一个诡异的部分是开放进度。每个Facebook应用都链接到一个特定的网址和域名。比如说正式版的游戏发布在http://gamesite.com。本例中，设置网址为http://gamesite.com，设置域名为gamesite.com。这个应用就可以工作了，但是每次小的改动，都需要把文件上传到http://gamesite.com。这就是为什么最好要有两个版本了，一个正式版（链接到http://gamesite.com），一个开发版（链接到本地）。教程中只创建了第二个。
1. 创建Facebook应用
在新建应用之前，你的账户必须是认证过的。如果没有，你将看到如下信息：
1 Your account must be verified before you can take this action.
2 Please verify your account by adding your mobile phone or credit card.
我用手机认证的，建议你也这样做。
账户认证以后，访问http://developers.facebook.com，点击顶部的“Apps”。
选择下一屏的“+ Create New App”。
填上你的应用的名字，同意Facebook的条款，点击“Continue”。
此时唯一的设置就是设置你的网址和域名。也可以通过导航Web->Site URL & Domain来完成这些信息。如下图所见，我的应用的地址是http://localhost/KrasimirTestApplication，域名是localhost。初始化Facebook’s API用的应用ID，也显示在这一页。
2. JavaScript部分
我情愿选择面向对象的JavaScript。所以我新建了一个叫FacebookApp.js的类，用来管理所有的东西。这是初始化部分的HTML代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
... meta data here ...
<title>AS3: create Facebook application</title>
<script type="text/javascript" src="js/SWFObject.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/FacebookApp.js"></script>
</head>
<body>
<div id="fb-root"></div>
<div id="animation"></div>
<script type="text/javascript">
var F;
window.onload = function() {
F = new FacebookApp();
(function()
{
var e = document.createElement("script"); e.async = true;
e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js?xfbml=1";
document.getElementById("fb-root").appendChild(e);
}()
);
}
window.fbAsyncInit = function() {
F.init();
F.getLoginStatus();
}
</script>
</body>
</html>
在这页我添加了3个js文件：
a) SWFObject.js——嵌入flash
b) Json2.js——Facebook来的数据是JSON格式，需要转换成字符串，这个库就是干这个的。
c) FacebookApp.js——做管理Facebook工作
我写JavaScript总是从window.onload事件开始。这样做能保证所需资源都已经完全加载。在这里创建一个FacebookApp的实例，然后加载Facebook的库。到目前为止，对我来说，以上代码是完成这部分工作的最好的做法。All.js加载后，调用window.fbAsyncinit，触发用户的init方法以及FacebookApp类的getLoginStatus。
类的构造方法：
var FacebookApp = function() {
this.appID = "[YOUR APP ID HERE]"; // the application's ID (provided by Facebook)
this.currentUser = null; // a JSON object that will hold the current user's data
this.token = null; // the access token of the current Facebook session
};
不要忘了用你的实际ID替换[YOUR APP ID HERE]。
调用Facebook API的init方法。
init:function() {
log("init appID=" + this.appID);
FB.init({
appId : this.appID,
status: true,
cookie: true,
xfbml: true,
channelUrl: "channel.html"
});
}
检查是否存在Facebook会话，如果不存在，弹出登录弹框。
getLoginStatus:function() {
log("getLoginStatus");
FB.getLoginStatus(function(response) {
if (response.session) {
log("Logged in.");
F.token = response.session.access_token;
F.getCurrentUserInfo();
} else {
log("Not logged in.");
FB.login(function(response) {
if(response.session) {
log("Logging successful.");
F.token = response.session.access_token;
F.getCurrentUserInfo();
} else {
log("Logging failed.");
}
});
}
});
}
有些浏览器禁止了Facebook的登录弹框。测试的时候确保你的浏览器“安全卫士”已经关闭。
一旦我们拥有了会话，就可以使用Facebook Graph API。getCurrentUserInfo方法获取当前用户数据，像账户ID和名字。
getCurrentUserInfo:function() {
log("getCurrentUserInfo");
FB.api('/me', function(response) {
if(response) {
F.currentUser = response;
F.showFlash(response);
} else {
log("getCurrentUserInfo failed");
}
});
}
如果一切顺利，我们就具备了足够的信息，以嵌入flash。
showFlash:function(currentUser) {
log("showFlash");
var rand = Math.floor(Math.random()*1000000);
var swf = new FlashObject("facebook.swf?tmp=" + rand, "animationSwf", "550", "550", "9", "#FFFFFF");
swf.addVariable("userName", currentUser.name);
swf.addVariable("userID", currentUser.id);
swf.write("animation");
}
如你所见，我向flash应用发送了用户名和id。
我又新怎了一个由AS3调用的方法。
getFriends:function() {
log("getFriends");
FB.api('/me/friends', function(response) {
if(response) {
F.getFlash().onGetFriends(JSON.stringify(response));
} else {
log("getFriends failed");
}
});
}
getFriends用户当前用户的好友列表，转换成字符串，发送到flash应用。
FacebookApp.js的完整源码可以从这里获取
3. AS3部分
文档类的构造方法。
public function App() {
debug("App constructor");
_currentUserName = loaderInfo.parameters.userName || "Krasimir Stefanov Tsonev";
_currentUserID = loaderInfo.parameters.userID || "617578836";
loadCurrentUserAvatar();
showCurrentUserName();
addControls(); // adds the button and the text area on the stage
ExternalInterface.addCallback("onGetFriends", onGetFriends);
}
为了在flash环境中测试程序，我把我自个儿的Facebook用户名和id设置成默认值。大项目中，从外部的xml文件或脚本中读取数据，作为例子，是个不错的注意。我还添加了onGetFriends回调方法。当JavaScript得到好友列表后，将删除这个方法。
加载头像。
private function loadCurrentUserAvatar():void {
var url:String = "http://graph.facebook.com/" + _currentUserID + "/picture";
_avatar = new Loader();
_avatar.load(new URLRequest(url));
_avatar.x = _avatar.y = 20;
addChild(_avatar);
}
每个用户的头像都可以通过一个这样的简单的请求而得到，http://graph.facebook.com/[USER ID]/picture。
显示当前用户名，并添加控制。
private function showCurrentUserName():void {
var tf:TextFormat = new TextFormat();
tf.font = "Verdana";
tf.size = 12;
tf.color = 0x000000;
_nameField = new TextField();
_nameField.defaultTextFormat = tf;
_nameField.text = _currentUserName;
_nameField.x = 80;
_nameField.y = 20;
_nameField.width = 300;
_nameField.height = 30;
addChild(_nameField);
}
private function addControls():void {
_controls = new AppControls();
_controls.x = 20;
_controls.y = 83;
_controls.b1.addEventListener(MouseEvent.CLICK, getFriends);
addChild(_controls);
}
获取好友列表。
private function showCurrentUserName():void {
var tf:TextFormat = new TextFormat();
tf.font = "Verdana";
tf.size = 12;
tf.color = 0x000000;
_nameField = new TextField();
_nameField.defaultTextFormat = tf;
_nameField.text = _currentUserName;
_nameField.x = 80;
_nameField.y = 20;
_nameField.width = 300;
_nameField.height = 30;
addChild(_nameField);
}
private function addControls():void {
_controls = new AppControls();
_controls.x = 20;
_controls.y = 83;
_controls.b1.addEventListener(MouseEvent.CLICK, getFriends);
addChild(_controls);
}
当用户点击按钮，触发getFriends方法。当JavaScript部分有返回值了，我们把结果字符串转换成数组。我用的是json.js里类似JSON操作的库。可以在这里得到它。
要文档类的全部代码，可以访问这里。
例子代码
- http://krasimirtsonev.com/files/facebookapplication/source.zip
Facebook JavaScript SDK
- http://developers.facebook.com/docs/reference/javascript/
Facebook Graph API
- http://developers.facebook.com/docs/reference/api/
4679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
