使用 FBML、FBJS、ASP.NET 和 C# 开发 Facebook 应用程序
使用 FBML、ASP.NET 构建简单而复杂的 Facebook 应用程序
Facebook 入门... 不太需要的介绍
有大量的资源展示了如何使用 ASP.NET/.NET 环境开始开发 Facebook 应用程序。例如，有 创建应用程序的分步指南 和 创建 Facebook 应用程序，以及许多其他资源。但是，如何将“Hello, World!”Facebook 示例提升到新的水平呢？你好啊，世界？“别让我悬着...”
在这篇文章中，我将展示（或者说尝试展示）如何构建一个更复杂的 Facebook 应用程序，该应用程序与 Facebook 用户和 SQL Server 数据库交互。
如你所知，一个 Facebook 应用程序 “托管”在 Facebook Canvas 页面中，而 Canvas 页面又在 Facebook 框架中（有点像俄罗斯套娃，对吧？）。一个 Facebook 应用程序 可以是 FBML 或者... 只需查看 Facebook 应用程序的解剖。
当你准备开发自己的 Facebook 应用程序 时，别忘了先在 Facebook 的 Facebook 开发者应用程序 中“创建”它并申请应用程序密钥和应用程序秘密。
在这个 Facebook 应用程序 中，我使用的是 Facebook 开发者工具包库 中找到的 Facebook .NET 工具包。要使用它，只需在你的项目中引用它，例如：
using Facebook;
using Facebook.WebControls;
public partial class _App : CanvasFBMLBasePage
{
...
...
}
* 注意我们正在使用 CanvasFBMLBasePage 基类
使用 .NET 开发 Facebook 应用程序
使用 ASP.NET 和 FBML 创建一个示例用户展示（使用 ASP.NET 和 FBML 构建 Facebook 画布页面）
所以，假设我在 SQL Server 数据库中拥有数据
...我希望在我的 Facebook 应用程序 中显示它，例如，使用 GridView 控件，如下所示：
我们如何开发这个？首先（或不那么首先）要做的事情：在 Facebook 开发者 中创建或添加一个新的应用程序。我的是这样设置的：
现在打开你最喜欢的 Visual Studio（我使用的是 Visual Studio 2005），然后开始/创建一个新的 ASP.NET 网站。本文中我使用的是 C#，但你可以将代码修改为 VB.NET。别忘了添加对 Facebook 开发者工具包库 的引用。
在 第一个（也是唯一一个）ASP.NET 表单中（很可能它被称为 Default.aspx），打开页面并向其中添加 GridView 控件。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="app.aspx.cs" Inherits="_App" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"> <title>Facebook Test Applicatioin:Traveling Babies</title></head>
<!-- <body> -->
<form id="formDataContent" runat="server">
<asp:GridView ID="gridSelectObjects" runat="server" AutoGenerateColumns="true"
style="width:80%">
<AlternatingRowStyle BackColor="#f7f7f7" />
</asp:GridView>
</form>
<!-- </body> -->
</html>
* 注意 body 元素被注释掉了。我们正在使用 FBML，它将托管在 Facebook 画布内部，所以没有 body。切换到“代码视图”，我们来添加一些代码。
using Facebook;
using Facebook.WebControls;
public partial class _App : CanvasFBMLBasePage
{
//keys for FBTestApplication:
private const string FACEBOOK_API_KEY =
"xfxfxdx7xbx7xbxfxaxdx<a href=
"http://www.siccolo.com" target="_blank">siccolo</a>";
private const string FACEBOOK_SECRET =
"dx8xfx9x8x1x<a href=
"http://www.siccolo.com" target="_blank">siccolo</a>2x4x1xfx2xdx";
//db interface:
private FacebookDB m_FacebookDB = null;
new protected void Page_Load(object sender, EventArgs e)
{
base.Api = FACEBOOK_API_KEY;
base.Secret = FACEBOOK_SECRET;
base.Page_Load(sender, e);
string facebookUserID = this.FBService.GetUserInfo().UserId;
try
{
bool result = false;
string connectInfo = Settings.ConnectInfo();
m_FacebookDB = new FacebookDB(facebookUserID, connectInfo);
string applicationUserID = String.Empty;
string applicationUserObjectID = String.Empty;
string objectType = String.Empty;
string objectDescription = String.Empty;
string errorInfo = String.Empty;
result = m_FacebookDB.GetApplicationUserID_withObjectInfo(out applicationUserID,
out applicationUserObjectID,
out objectType,
out objectDescription,
out errorInfo);
if (!result || applicationUserID == String.Empty)
{
this.labelFBDashboard.Text =
"Failed to retrieve Application User:" + errorInfo;
return;
}
//show object list in a grid
result = ShowObjectListGrid(applicationUserID, out errorInfo);
}
catch (Exception)
{
throw (new System.Exception "Your mama off the train");
}
}
private bool ShowObjectListGrid(string applicationUserID, out string errorInfo)
{
errorInfo = String.Empty;
try
{
bool result = false;
DataSet objectList = null;// new DataSet("ObjectList");
result = m_FacebookDB.GetObjectList(applicationUserID,
out objectList,
out errorInfo);
// bind the data
this.gridSelectObjects.DataSource = objectList;
this.gridSelectObjects.ShowHeader = false;
//bind
this.gridSelectObjects.DataBind();
return result;
}
catch(Exception ex_show_grid)
{
errorInfo = ex_show_grid.Message;
return false;
}
}
}
FacebookDB 是一个与 SQL Server 数据库交互的中间层。但是，我们也来探索 FBML 为你的 Facebook 应用程序 添加的选项，这样我们就可以创建一个类似 Facebook 的应用程序，像这样：
...其中
- (1) 是 Facebook 仪表板菜单，使用
fb:dashboardFBML 元素创建（更多信息请参阅 Facebook 开发者维基上的 fb:dashboard） - (2) 是在
fb:dashboardFBML 元素中使用fb:create-button的结果（更多信息请参阅 Facebook 开发者维基上的 fb:create-button） - (3) 是使用
fb:dashboardFBML 元素的结果 - (4) 是一个
GridView元素
使用 FBML “方法”，我们可以将 FBML 标签直接放入 ASPX 页面，或者让 Web 应用程序动态生成它们。为了添加“Facebook 仪表板”，我使用了以下代码：
new protected void Page_Load(object sender, EventArgs e)
{
...
...
//FMBL part:
FBMLMaker fbmlMaker = new FBMLMaker(this.FBService.GetUserInfo());
//set dashboard
this.labelFBDashboard.Text = fbmlMaker.Dashboard();
...
...
}
...其中 labelFBDashboard 是 <asp:Label ID="labelFBDashboard" runat="server" Text="... fb-dashboard ..." ></asp:Label>，而 Dashboard() 方法是：
public string Dashboard()
{
//for FBML generations can also be used StringBuilder();
//http://wiki.developers.facebook.com/index.php/Fb:dashboard
string fbDashboard = "<fb:dashboard>";
fbDashboard +=
"<fb:action href=\"http://www.siccolo.com/\">Developer Site</fb:action>";
//show greeting as a link..
fbDashboard += "<fb:action href=\"#\" >" + this.Greeting() + "</fb:action>";
//show application help link:
fbDashboard +=
"<fb:help href=\"http://www.siccolo.com/\">
What do I do with this?!</fb:help>";
fbDashboard +=
"<fb:create-button href=\"http://www.siccolo.com/\">
Take me away!</fb:create-button>";
fbDashboard += "</fb:dashboard>";
return fbDashboard;
}
或者，你可以简单地将 <fbml> 标签直接添加到你的 ASPX 页面中（请参阅下方使用 <fb:friend-selector/> 元素的示例）。
使用 .NET 开发 Facebook 应用程序
使用 FBML 和 FBJS 添加用户页面交互，允许选择好友
如你所知，你可以在 FBML 页面上使用 FBJS。所以，我们来修改网格，在每一行上添加一个链接。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="app.aspx.cs" Inherits="_App" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"> <title>Facebook Test Applicatioin:Traveling Babies</title></head>
<!-- <body> -->
<form id="formDataContent" runat="server">
<asp:GridView ID="gridSelectObjects" runat="server" AutoGenerateColumns="false"
style="width:80%">
<Columns>
<asp:TemplateField ItemStyle-Width='180px' ItemStyle-Wrap=false>
<ItemTemplate>
<a href="#" onclick="select_object(<%# Eval("object_id")%>,
'<%# Eval("type")%>', '<%# Eval("description")%>');
return false;"
style=
"color:Black;background-color:Transparent;
border-color:Transparent;border-style:None;">
<img src="
http://www.siccolo.com/fbtestappsiccolo/images/select.gif"
border="0"
align="center"
title="select <%# Eval("description")%>"/> select
<%# Eval("description")%></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="#f7f7f7" />
</asp:GridView>
</form>
<!-- </body> -->
</html>
注意每一行都调用了 select_object() JavaScript (FBJS)。因此，当用户点击网格行中的“选择...”链接时，页面将显示选定的行，并允许用户对选定的项目执行一些操作。
选定的信息显示在其自己的 DIV 元素中。
<div id="data_selected_content1" style="display:none">
<span class="detached_label">Baby
<span id="spanSelectedObject1"
style="font-weight: bold; font-style: italic; font-variant: normal;"></span>
needs:
<asp:DropDownList ID="listObjectAction1" runat="server" CssClass="listElement" >
</asp:DropDownList>
...and then off to
<fb:friend-selector idname="textSelectedFriend" />
<asp:Button ID="buttonSend" runat="server" Text="Send"
CssClass="inputsubmit" OnClick="buttonSend_Click" />
</span>
</div>
所以，我的 JavaScript (FBJS) 函数是：
<script>
function select_object(object_id , type, description)
{
Animation(document.getElementById(
'data_selected_content1')).to('height', 'auto').from(
'0px').to('width', 'auto').from('0px').to('opacity', 1
).from(0).blind().show().go();
document.getElementById("spanSelectedObject1").setTextValue ( description);
document.getElementById("buttonSend").setValue ( "Send " + description) ;
}
</script>
请注意，我正在使用 Animation() 来显示 DIV 元素；更多信息请参阅 FBJS/Animation。如你所见，为了更改 SPAN 的 innerText，我正在使用 setTextValue() 方法。对于按钮，我正在使用 setValue()。为了让用户能够选择朋友，我们可以添加 <fb:friend-selector idname="textSelectedFriend" /> FBML 元素（更多信息请参阅 Fb:friend-selector）。
* 请注意 <fb:friend-selector> 元素的 idname 属性。它是隐藏表单元素的名称，当表单提交时，它包含所选朋友的用户 ID，我们稍后会看到。同一部分可以使用 <fb:editor> 元素构建（更多信息请参阅 Fb:editor）
<div id="data_selected_content2" >
<fb:editor labelwidth="200">
<fb:editor-custom label="Baby">
<span id="spanSelectedObject2" style=
"font-weight: bold; font-style: italic; font-variant: normal;">
</span>
</fb:editor-custom>
<fb:editor-custom label="Needs">
<asp:DropDownList ID="listObjectAction2" runat="server"
CssClass="listElement" ></asp:DropDownList>
</fb:editor-custom>
<fb:editor-buttonset>
<fb:editor-button value="Send to Comrade"/>
</fb:editor-buttonset>
</fb:editor>
</div>
结果是：
使用 .NET 开发 Facebook 应用程序
提交表单信息，添加客户端验证并使用 FBJS 对话框
所以，到目前为止，我们有一个漂亮的表单，它显示了一个项目列表，并允许用户选择一个好友...但是如果应用程序能将这些信息传回给我们，那就更好了，对吧？你还记得我之前提到的服务器端按钮 buttonSend 吗？
<div id="data_selected_content1" style="display:none">
<span class="detached_label">Baby
<span id="spanSelectedObject1"
style="font-weight: bold; font-style: italic; font-variant: normal;"></span>
needs:
<asp:DropDownList ID="listObjectAction1" runat="server" CssClass="listElement" >
</asp:DropDownList>
...and then off to
<fb:friend-selector idname="textSelectedFriend" />
<asp:Button ID="buttonSend" runat="server" Text="Send" CssClass="inputsubmit"
OnClick="buttonSend_Click" />
</span>
</div>
当用户点击此按钮时，页面应该a)检查用户输入，即是否输入了好友，以及b)提交信息。 让我们在表单即将提交时检查用户输入。在 ASPX 页面上，我添加了 JavaScript (FBJS)
<script>
function displayError(title, message, context)
{
new Dialog(Dialog.DIALOG_CONTEXTUAL).setContext(
context).showMessage(title, message );
}
function check_form(form)
{
if ( form == null) { form = document.getElementById('formDataContent');}
var params=form.serialize();
if (params.textSelectedFriend==null || params.textSelectedFriend=='' )
{
displayError("Error", "Please select a Comrade!" ,
document.getElementById('data_selected_content1') );
return false;
}
else
{
return true;
}
}
</script>
...以及代码中
new protected void Page_Load(object sender, EventArgs e)
{
...
ClientScript.RegisterOnSubmitStatement(this.GetType(),
"sudmitformDataContent", "return check_form(this);");
...
}
这里，我使用了 FBJS 提供的对话框（更多信息请参阅 对话框），结果令人惊叹！
如果输入通过了验证检查（在本例中，我们只检查用户是否选择了/输入了朋友），那么页面就会被提交，我们就有机会将选定的数据保存到数据库中。万岁！
protected void buttonSend_Click(object sender, EventArgs e)
{
string selectedFriendID = String.Empty;
try
{
selectedFriendID = Page.Request.Form["textSelectedFriend"].ToString();
}
catch
{
//oh-ho, no friend is selected!!!
return;
}
//save selected action and friend to database:
bool result = false;
string errorInfo = String.Empty;
string connectInfo = Settings.ConnectInfo();
string facebookUserID = this.FBService.GetUserInfo().UserId;
m_FacebookDB = new FacebookDB(facebookUserID, connectInfo);
string applicationUserID = this.textApplicationUserID.Value;
if ( applicationUserID == String.Empty)
{
this.labelFBDashboard.Text = "Application User ID is missing!";
return;
}
string applicationUserObjectID = this.textSelectedObject.Value;
if (applicationUserObjectID == String.Empty)
{
this.labelFBDashboard.Text = "Application Object ID is missing!";
return;
}
string selectedActionID = this.listObjectAction1.SelectedValue.ToString();
string expandedUserObjectActionText = String.Empty;
string notificationTextToFriend = String.Empty;
result = m_FacebookDB.DoObjectAction_And_Do_SendToFriend(applicationUserID,
applicationUserObjectID,
selectedActionID,
selectedFriendID,
out notificationTextToFriend,
out errorInfo);
if (!result)
{
this.labelFBDashboard.Text = "Failed to perform selected action!" +
errorInfo;
return;
}
}
* 注意对 <fb:friend-selector> 元素的 Page.Request.Form["textSelectedFriend"] 表单字段的引用。不，我们没有在页面上创建这个元素。相反，Facebook 平台“动态地”添加了它。你也可以使用其他类型的对话框，例如 DIALOG_CONTEXTUAL
要显示这样的上下文对话框，我们可以使用“内联”JavaScript (FBJS)
<div id="data_selected_content1" style="display:none">
...
<a href="#" onclick=
"new Dialog(Dialog.DIALOG_CONTEXTUAL).setContext(
this).showMessage('Selected Object',
'This is the object you\'ve selected'); return false;">
<span id="spanSelectedObject1" style=
"font-weight: bold; font-style: italic; font-variant: normal;">
</span></a>
...
</div>
...或者，显示一个弹出窗口
使用 .NET 开发 Facebook 应用程序
在 FBML 中使用 iframe
如果你需要在你的应用程序 FBML 画布中“插入”一个页面，你可以使用 <fb:iframe> 元素（更多信息请参阅 Fb:iframe）。例如，我使用 <fb:iframe> 元素来引用一个 ASPX 页面，以便通过 Request.ServerVariables["REMOTE_ADDR"] 获取用户 IP 地址。请记住，FBML 应用程序在 Facebook 的画布内……所以你会得到类似 204.15.23.168 的 IP 地址，这是 Facebook 服务器的 IP 地址，而不是你的用户的。然后，根据给定的 IP 地址，我可以显示各种信息，例如天气预报。
在页面代码中，引用 <fb:iframe> 元素
...
<div style="text-align:right;position: relative;bottom:1%;width:99%">
<fb:iframe src="http://www.siccolo.com/fbtestappsiccolo/clientdata.aspx" style=
"width: 99%;height:135px" smartsize="false" frameborder="no">
</fb:iframe>
</div>
...
这与使用 <iframe> HTML 元素非常相似。
使用 .NET 开发 Facebook 应用程序
使用 FBJS AJAX 与 ASP.NET/C#，显示带动态内容的对话框，以及使用 FBJS POPUP 对话框与 ASP.NET/C#
FBML 和 FBJS 的一个特点是能够显示标准对话框（参见上文：使用 FBJS 对话框）。我们可以使用其中一个标准对话框来显示动态内容，例如，SQL Server 数据库中的记录列表。
为此，首先我需要在主 GridView 中添加一个链接（参见上文：在 FBML 中使用 <asp:GridView>）。
...
<asp:GridView ID="gridSelectObjects" runat="server" AutoGenerateColumns="false"
style="width:80%;text-align:center" align="center">
<Columns>
<asp:TemplateField ItemStyle-Width='180px' ItemStyle-Wrap=false>
<ItemTemplate>
<a href="#" onclick="select_object(<%# Eval("object_id")%>,
'<%# Eval("type")%>', '<%# Eval("description")%>');
return false;"
style=
"color:Black;background-color:Transparent;
border-color:Transparent;border-style:None;">
<img src="
http://www.siccolo.com/fbtestappsiccolo/images/select.gif"
border="0"
align="center"
title="select <%# Eval("description")%>"/>
select <%# Eval("description")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width='180px' ItemStyle-Wrap=false>
<ItemTemplate>
<a href="#" onclick="show_object_info(
<%# Eval("object_id")%>);return false;"
style="color:Black;background-color:Transparent;
border-color:Transparent;border-style:None;">
show <%# Eval("description")%>'s history</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="#f7f7f7" />
</asp:GridView>
...
因此，当用户点击主 Grid 中的“显示...历史记录”链接时，应用程序将显示数据库中的记录。为了从数据库或服务器端获取任何内容，应用程序需要“回发”。幸运的是，FBJS 内置了对 AJAX 的支持（更多信息请参阅 模拟 AJAX）。所以，我们可以回发到服务器并耐心等待回复。
<script>
function show_object_info(object_id)
{
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data)
{
var dlg = new Dialog();
dlg.showMessage('Object Action History', data );
}
ajax.post(
http://www.siccolo.com/fbtestappsiccolo/object_action_history.aspx?id=+
object_id);
}
</script>
...其中 object_action_history.aspx 是 ASP.NET 页面
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="object_action_history.aspx.cs" Inherits="_ObjectActionHistory" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Object Action History</title>
</head>
<form id="formDataContent" runat="server" >
<div style="text-align:center">
<asp:GridView ID="gridSelectObjects" runat="server" AutoGenerateColumns="false"
style="width:95%"> </asp:GridView>
</div>
</form>
</html>
基本上，object_action_history.aspx 从 ajax.post() 返回到 ajax.ondone() 时，只返回了一个“渲染好的” GridView。然后，在 ajax.ondone 上的 JavaScript (FBJS) 中，我们获取这些数据并将其“塞入” Dialog.showMessage() 中。
<script>
function show_object_info(object_id)
{
//var dlg = new Dialog().showMessage('.. Traveling Babies ..',
'Select a baby and send it to your comrade...');
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data)
{
var dlg = new Dialog();
dlg.showMessage('Object Action History', data );
}
ajax.post(
"http://www.siccolo.com/fbtestappsiccolo/object_action_history.aspx?id="+
object_id);
}
</script>
使用 .NET 开发 Facebook 应用程序
使用 Facebook 通知
到目前为止一切顺利。我们有一个类似 Facebook 的界面；用户选择数据；选定的数据正在保存到数据库中。然而，我忘记了 Facebook 实际上是一个社交网络：它关乎社交互动……让我们在我们的 Facebook 应用程序 中以用户通知的形式添加“社交互动”。感谢 Facebook 开发者工具包库，通知非常容易实现。
protected void buttonSend_Click(object sender, EventArgs e)
{
string selectedFriendID = String.Empty;
try
{
selectedFriendID = Page.Request.Form["textSelectedFriend"].ToString();
}
catch
{
//oh-ho, no friend is selected!!!
return;
}
...
result = m_FacebookDB.DoObjectAction_And_Do_SendToFriend(applicationUserID,
applicationUserObjectID,
selectedActionID,
selectedFriendID,
out notificationTextToFriend,
out errorInfo);
...
string notification_result = FBService.SendNotification(
notificationTextToFriend, selectedFriendID);
...
}
要发送通知，我们需要调用 SendNotification() 方法并传递通知文本和 Facebook 用户的 ID。在此代码中，ID 是所选好友的 ID。因为我太懒了，notificationTextToFriend 通知文本是内置在存储过程中的，而不是应用程序代码中。但是，你也可以在代码中“编写”通知。结果如下：
...在我的存储过程中，我可以做类似这样的事情：
declare @application_path varchar(255)
set @application_path = 'http://apps.facebook.com/fbtestappsiccolo'
declare @notification varchar(8000)
select @notification =
' on [' + convert(varchar(10), action_date, 101) + ' ' +
convert(varchar(8), action_date, 108) + '] ' +
' sent '+
'<a href="' + @application_path + '">' + o.description + '</a>' +
' to you!' +
' <fb:name uid="' + @facebook_user_id + '" /> already ' +
replace( oa.action_performed_text_ex, '<object_description>',o.description )
第一部分就到这里。
致谢
- Network Trotters - 感谢有趣的想法
- Facebook Developer Toolkit library - 适用于 Facebook 的 .NET 工具包
- Wiki Facebook Developer Library - Wiki Facebook Developer Library
你也可以在 Facebook 上查看此示例应用程序：Traveling Babies。
历史
- 2008 年 3 月 6 日 -- 原始版本发布
- 2008 年 3 月 13 日 -- 文章编辑并移至 Code Project 主文章库