Developing Facebook web-applications with. NET Facebook Toolkit 2.0

Facebook web applications with. NET Facebook Toolkit 2.0 - Part 1

Abstract

In this article we superficially touch on developing Facebook web-applications in. NET, using the Facebook Toolkit 2.0.

In connection with that we developed a Facebook FBML-based web application recently we saw that there were deficiencies in the documentation. When we ran into problems, there was not much help at Facebook's developer forum. In several situations, we were left to ourselves.

Therefore we would like to share our knowledge with other developers in order to help developers get started and at the same time raise awareness about the company SoftPilar.

In following articles we will go into more depth with Facebook.

FBML master pages approach

We recommend that you use a master page to define the layout of your application and create your content pages from the master page. The advantage of this is that you can define your layout and page structure in the master page. Thereby you don't have to repeat your html code. Additionally, you can place the validation of the user and the session management in the master page. Then you can right-click the master page in Visual Studio Solution Explorer and add content pages to your project as needed.

A Facebook web-application can be coded as FBML which is Facebook's own mark-up language or as an IFrame. Here we will focus on FBML approach.

The central class here is facebook.web.CanvasFBMLMasterPage. Let your master page inherit from this class. Content pages based on the master page can then access the master page's properties by adding an ASP.NET page directive in the content page

<% @ Master Type VirtualPath = "~ / MasterPage.Master" %>

Then you can refer to a public property in the master page from a content page so

C #: this.Master.PropertyName

VB: Me.Master.PropertyName

While the master page must be inherited from the facebook.web.CanvasFBMLMasterPage class, content pages do not inherit from facebook.web.CanvasFBMLBasePage. They must just be normal ASP.NET pages that inherit from the System.Web.UI.Page class.

C# Master.cs:

public partial class MasterPage : CanvasFBMLMasterPage

{

private facebook.Components.FacebookService mFacebookService;

public facebook.Components.FacebookService FacebookService

{

get

{

return this.mFacebookService;

}

set

{

this.mFacebookService = value;

}

// Overrides PreRender in the master page class

protected override void OnPreRender(EventArgs e)

{

}

protected void Page_PreInit(object sender, EventArgs e)

{

base.RequireLogin = true;

}

protected void Page_Load(object sender, EventArgs e)

{

string SessionKey;

string TokenAuthentication;

long UserId;

SessionKey = String.Empty;

TokenAuthentication = String.Empty;

UserId = 0;

this.mFacebookService = new FacebookService();

// Set API key and secret for the FacebookService

this.mFacebookService.ApplicationKey = Properties.Settings.Default.ApplicationKey;

this.mFacebookService.Secret = Properties.Settings.Default.Secret;

// Set up the IsDesktopApplication for the FacebookService

this.mFacebookService.IsDesktopApplication = false;

SessionKey = (string)Session[Properties.Settings.Default.FacebookSessionKey];

if (Session[Properties.Settings.Default.FacebookUserId] != null)

{

UserId = (long)Session[Properties.Settings.Default.FacebookUserId];

}

// When the user uses the Facebook login page, the redirect back here

// will have the auth_token in the query string

TokenAuthentication = (string)Request.QueryString[Properties.Settings.Default.AuthToken];

// We have already established a session on behalf of this user

if (!String.IsNullOrEmpty(SessionKey))

{

this.mFacebookService.SessionKey = SessionKey;

this.mFacebookService.uid = UserId;

}

// If not, check if we have auth_token in the query params.

// If we do, it means we just got called from the Facebook login page.

else if (!String.IsNullOrEmpty(TokenAuthentication))

{

this.mFacebookService.CreateSession(TokenAuthentication);

Session[Properties.Settings.Default.FacebookSessionKey] = this.mFacebookService.SessionKey;

Session[Properties.Settings.Default.FacebookUserId] = this.mFacebookService.uid;

Session[Properties.Settings.Default.FacebookSessionExpires] = this.mFacebookService.SessionExpires;

}

// If neither, we need to redirect the user to the Facebook hosted login page

else

{

Response.Write("<fb:if-is-app-user>");

Response.Write("<fb:else>");

Response.Write("<fb:redirect url=\"http://www.facebook.com/login.php?api_key=" + this.mFacebookService.ApplicationKey + "&v=1.0\"/>");

Response.Write("</fb:else>");

Response.Write("</fb:if-is-app-user>");

}

Master.aspx:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.Master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</style>

</head>

<div>

<asp:ContentPlaceHolder ID="ContentPlaceHolderMenu" runat="server">

<div>

<a href="#">Menupunkt1</a>

<a href="#">Menupunkt2</a>

<a href="#">Menupunkt3</a>

<a href="#">Menupunkt4</a>

</div>

</asp:ContentPlaceHolder>

</div>

<div>

<asp:ContentPlaceHolder ID="ContentPlaceHolderBody" runat="server">

</div>

</asp:ContentPlaceHolder>

</form>

</div>

<div>

<asp:ContentPlaceHolder ID="ContentPlaceHolderContent" runat="server">

</asp:ContentPlaceHolder>

</div>

</html>

Default.aspx:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="false" CodeBehind="Default.aspx.cs" Inherits="Lejebolig.Default" %>

<%@ MasterType VirtualPath="~/MasterPage.Master" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolderBody" runat="server">

<label>Velkommen</label>

</div>

</div>

</asp:Content>

Facebook application structure

A Facebook web application has a structure that Facebook calls integration points. An integration point corresponds to a content page in our Visual Studio Web project. We recommend that you name the content pages in accordance with the naming of the Facebook Developer application definition.

In addition to FBML content pages it can be useful to add non-FBML pages to your application. E.g. Facebook defines a Facebook page for applications, called Post authorize Call-back. This page is called the first time a Facebook user adds your application. It is therefore very natural to put some code on this page which registers the user if the application wishes to recognize the user at the next visit.

Data retention

We recommend that you store user-data in a database, e.g. a MYSQL or MS SQL database. Facebook offers a data warehouse, named data store admin. Here you can define data entities and their attributes. Afterwards you can use FQL (Facebook's SQL language) to insert and query the data in the tables. However, there is a restriction compared to normal data base systems. You must always specify a WHERE condition in a SELECT statement and the column in the WHERE condition must be indexed. Additionally, if you define your own data entity-type in the data store admin and want to query the data in it, you need to combine the query with a query on a Facebook table with a WHERE condition involving the indexed columns in the table.

Recognition of users

A Facebook user has added your application. You've saved user settings in a database. How do you recognize the user next time he or she uses the application? Facebook posts variables to the application when a user interacts with the application. One of these post variables can be used to get the user id of the user interacting with your application.

UserId = Convert.ToInt64(Request.Form.Get(Properties.Settings.Default.FbSigCanvasUser).ToString());

UserId = Convert.ToInt64(Request.Form.Get(Properties.Settings.Default.FBSigUser).ToString());

FbSigCanvasUser = fb_sig_canvas_user

FBSigUser = fb_sig_user