Skip Navigation LinksHome > Categories > Code from a Category

Getting started with Facebook application development with ASP.NET C#

User Name: tippu
Name: King SheZ
Contact Me:
Home Page:
7 years of enterprise application development, so far in my career i have worked on enterprise web applications with millions of users,i have also worked on many integrations between applications, i h... [More]
Viewed Times: 3557
Add Date: 07/17/2011
There are two main types of application in Facebook, which are 1) widget applications 2) canvas applcations. Widget applications are added as a widget in Facebook and canvas applications are displayed in full Facebook page canvas.

FBML(Facebook Markup Language) is used with other language and technologies to build canvas applications. There are plenty of resources out there that show how to start developing a Face book application using the ASP.NET/.NET environment. For example, there's the Step-by-step Guide to Creating an Application and Creating a Facebook Application, as well as many others. But how do you take that "Hello, World!" Facebook sample to the next level? Hello, 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 an SQL Server database.

As you may know, a Facebook application is "hosted" within a Facebook Canvas Page, and the canvas page is within the Facebook frame (kinda like a Russian doll house, eh?). A Facebook application can be FBML or... just take a look at the 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 the Facebook Developers Application.

In this Facebook Application, I am using the Facebook .NET Toolkit found at the Facebook Developer Toolkit library. To use it, simply reference it in your project, for example:

* Notice we're using the CanvasFBMLBasePage base class Developing Facebook Application with .NET Create a Sample User Presentation using ASP.NET and FBML (Building a Facebook Canvas Page Using ASP.NET and FBML) So, let's say I have data in an SQL Server database:

and I want to display it in my Facebook Application, for example, using the GridView control like this:

How do we go about developing this? First (or not so first) thing first: create or add a new application in Facebook Developers. I have mine set up as:

Now open your favorite Visual Studio (I am using Visual Studio 2005) and start/create a new ASP.NET website. 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 the GridView control to it.

* Notice that the body element is commented. We're using FBML and it will be hosted inside the Facebook canvas, so there's no body. Switch to "code view" and let's add some code:

FacebookDB is a middle layer to interface with the SQL Server database. However, let's also explore the options that FBML adds to your Facebook Application, so we can create a Facebook-like application, something like this:

where: (1) is the Facebook dashboard menu, created with the fb:dashboard FBML element (more at fb:dashboard at Facebook Developers Wiki) (2) is a result of using fb:create-button within the fb:dashboard FBML element (more at fb:create-button at Facebook Developers Wiki) (3) is a result of using the fb:dashboard FBML element (4) is a GridView element With the FBML "approach," we can put FBML tags right into the ASPX page or have a web application generate them dynamically. To add the "Facebook dashboard," I am using the following code:

Alternatively, you can simply add tags right into your ASPX page. Thats it for this part and in the later parts i will explain in more detail about the Facbook application development with ASP.NET.

Post a Comment

Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Enter Text
as Below:
(case insensitive, if hard to read, click the "get a new one" button)
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.