1. Getting Started with Facebook… Not So Needed Introduction
There are plenty of resources out there that show how to start developing a Facebook application using the ASP.NET/.NET environment. For example, there are Step-by-step Guide to Creating an Application and Creating a Facebook Application and many others. But, how do you take that “Hello, World” Facebook sample to the next level? Hellooooooo,world? “Don’t leave me hanging”….
In this article, I will show (or will try to show) how to build a more sophisticated Facebook application that interacts with Facebook users and with a SQL Server database.
As you may know, a Facebook application is “hosted” within a Facebook Canvas Page, and the canvas page is within a Facebook frame (kinda like a Russian doll house, eh?). Facebook application can be FBML or …. just take a look at Anatomy of a Facebook Application.
(When you’re ready to develop your own Facebook Application, don’t forget to “create” it first and request an Application Key and Application Secret in Facebook at Facebook Developers Application).
In this Facebook Application, I am using the Facebook .NET Toolkit, found at Facebook Developer Toolkit library. To use it, simply reference it in your project; for example:
using Facebook;
using Facebook.WebControls;
public partial class _App : CanvasFBMLBasePage
{
...
...
}
* notice using the CanvasFBMLBasePage base class
2. Developing Facebook Applications with .NET: Create a Sample User Presentation Using ASP.NET and FBML. Building a Facebook Canvas Page Using ASP.NET and FBML
Say I have data in a SQL Server database:
and I want to display it in my Facebook Application. For example, I want to use a GridView control, like this:
How do you go about developing this?
First (or not so first) things first: Create or add a new application in Facebook Developers. I have mine set up as this:
Now, open your favorite Visual Studio (I am using VS 2005), and start/create a new ASP.NET Web site. I am using C# in this article, but you can adapt the code for VB.NET. Don’t forget to add references to the Facebook Developer Toolkit library:
In the first (and only) ASP.NET form (chances are it’s called Default.aspx), open the page and add a GridView control to it.
<%@ 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 >
<head runat="server"><title>
Facebook Test Application: 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>
* Notice that the body element is commented. I’m using FBML, and it will be hosted inside Facebook canvas, so there is no body.
Switch to “code view” and add some code:
using Facebook;
using Facebook.WebControls;
public partial class _App : CanvasFBMLBasePage
{
//keys for FBTestApplication:
private const string FACEBOOK_API_KEY =
"xfxfxdx7xbx7xbxfxaxdxsiccolo";
private const string FACEBOOK_SECRET =
"dx8xfx9x8x1xsiccolo2x4x1xfx2xdx";
//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;
// new DataSet("ObjectList");
DataSet objectList = null;
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;
}
}
}
Where FacebookDB is a middle layer, to interface with SQL Server database.
where:
- is Facebook dashboard menu, created with the fb:dashboard FBML element (more at fb:dashboard at Facebook Developers Wiki)
- is a result of using fb:create-button within the fb:dashboard FBML element (more at fb:create-button at Facebook Developers Wiki)
- is a result of using the fb:dashboard FBML element
- is a GridView element
With the FBML “approach”, you can put FBML tags right into an ASPX page, or have the web application generate them dynamically. To add a “Facebook dashboard,” I use the following code:
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();
...
...
}
Where labelFBDashboard is <asp:Label ID="labelFBDashboard" runat="server" Text="... fb-dashboard ..." ></asp:Label>, and the Dashboard() method:
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;
}
Or, you simply can add <fbml > tags right into your ASPX page (see below using the <fb:friend-selector/> element).
