Click here to Skip to main content
14,240,716 members

Developing Facebook Connect Application using ASP.NET

Rate this:
4.72 (33 votes)
Please Sign up or sign in to vote.
4.72 (33 votes)
9 May 2010CPOL
Step approach for developing a Facebook connect application with ASP.NET


Facebook became the center of attraction for developers in recent days, because of its versatility and wide range of support. I always wanted to work with the Facebook API to explore its features. A few months ago, I worked in a project that requires Facebook integration, working with Facebook users friends data and so on. So I started to dig into the Facebook API. There are so many cool things that can be done by the API provided. In this article, I have tried to summarize a step by step approach for developing a Facebook connect application.

Developing an Application for Facebook

Application development for Facebook platform comes up with 2 choices, one is canvas and another is connect. If you create a Facebook application, one of the most confusing parts of setting it up is choosing whether to make your app use IFrames or FBML. IFrame canvas pages are pretty straightforward. When the user loads a page on Facebook like, Facebook provides a webpage that has a big Iframe, application loaded inside the provided IFRAME. FBML canvas pages are a little bit different. When the user requests a page like, Facebook server will send a request to your app’s server where the application is hosted. This will be an HTTP POST to some URL like IFRAME based canvas application is not in the scope of this article, so we stick to FBML connect application.

Connect Application Basics

Facebook Connect is a powerful set of APIs for developers. The API deals with the user's interaction with the Facebook account and provides a way so that application can access the user's profile information and friends list, write on the wall, and email the user if user allowed so. Developing a Facebook Connect application involves adding a few XFBML tags to an HTML page. Facebook Connect uses a cross-domain communication channel to open an iframe on the HTML page for each XFBML tag. When the user clicks a tag, Facebook Connect handles the interaction and lets the user log in, access friends data, user data, and so on.
A Facebook Connect application can use any or all of the following:

  • XFBML tags(XFBML is a way to incorporate FBML into an HTML page)
  • JavaScript, with calls to the JavaScript client library
  • Code in any language, with calls to the Facebook REST API (in my case, I used ASP.NET with Facebook toolkit for .NET for calling REST)

Facebook oauthentication using XFBML tag

Configure Connect Application

Integrating/developing an application with Facebook requires an API key and a secret key with whom Facebook will authenticate your application on Facebook platform - this is called oauthentication. In case you do not have any idea about oauth, the simplest definition can be OAuth protocol enables users to provide third-party access to their web resources without sharing their passwords (You will find details about authentication at With Facebook API key's application is authenticated and application can retrieve sensitive user data, even modify user data, if user allows application to do so. To get an API and secret key for the application, you need to follow these steps:

  • Navigate to Facebook developer center and request for new application.
  • Choose an appropriate application name (My application's name is Galib's R&d Lab).
  • Navigate to basic tab, there you can see API key/ secret key is given.
  • Provide a small description about your application.
  • Navigate to connect tab. Provide the applications full URL (My application URL is
  • Navigate to Advanced tab and on Advanced Settings, choose web.
  • Choose sendbox mode enable/disable. Enable allows only the developers of application to see it.
  • Save your settings.

Please remember the steps mentioned above are the optimum steps to configure an application, there are a lot more configuration options provided, feel free to configure according to your needs.

Configure connect application

Facebook Toolkit Basics

Facebook toolkit is the .NET version of API provided by Facebook. It's very easy to integrate with .NET applications. This toolkit is yet under development and new features are added and enhancement is going on in the previous versions. The latest version is 3.0. I have found some dissimilarity between versions as some functions available on version 2.0 release are not available on version 3 release. So if you need to develop application with this toolkit, you need to keep a consistent review on the latest release and changes until a stable release is out. I have used the most recent version 3 of Facebook toolkit for this application.

Using the Sample Code

In order to implement a connect application, you need to go through some configuration steps. First you have to include a JavaScript library given below that will facilitate you to use FBML tags.

You have to place xd_receiver.htm file under root. This file deals with the cross domain authentication. In order to grab your friend list from your Facebook account, first you have to allow the application to access your Facebook account by the FBML tag below:

<fb:login-button onlogin="window.location.reload()"></fb:login-button>

This tag will open up a popup asking for authorization to access users account. Secondly, you have to attach another FBL tag that will ask the user for additional permission, my application asks for mail permission, i.e., if user allows mail, then other application users can mail this user who allows mail permission.

<fb:prompt-permission perms="email"> allow mail  permission</fb:prompt-permission>

There are lots of other extended permission parameters available. You can take a look at the available permissions that Facebook allows from the below link:

Now let's take a quick look at the sample code. You will see that I have a class named ConnectAuthentication.cs which is responsible for connection with API key and secret key, retrieval of Facebook cookie that is provided by FB once your authentication is performed. The naming convention of that cookie is:

ApiKey + "_user"

A sample application will retrieve friends list for an authenticated user. For this, you will need current active session from FB. Facebook toolkit will do this job for you. What you have do is use the code below:

    ConnectAuthentication.ApiKey is API key for your application 
    provided during application registration with FB
    ConnectAuthentication.SecretKey is secret key for your application 
    provided during application registration with FB
ConnectSession connectSession = new ConnectSession

With this ConnectSession, you have to make a call to REST. You can get the current authenticated user's information, friend's list and many more.

Api api = new Api(CurrentSession);
List<long> myFrndId = (List<long>)api.Friends.Get();
IList<user> usrFrnds = api.Users.GetInfo(myFrndId);

// Bind to GridView to display
grvFriends.DataSource = usrFrnds;

In the code block above, the first line creates an instance of REST API using current authenticated session using Facebook toolkit. The second line requests for friend's IDs by using the API instance. The third line request for friends' detailed information passing friendId's as parameters. Facebook toolkit comes up with user object, so you do not need to create custom user object. And last but not the least, bind the data with gridview. That's it... your connect application is now ready to roll.

Please read the readme.txt provided with sample code zip file to find out how to run the sample code.

Live Demo

Try this application live hosted at or you can use Facebook application home.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Shahriar Iqbal Chowdhury/Galib
Chief Technology Officer
Bangladesh Bangladesh
I am a Software Engineer and Microsoft .NET technology enthusiast. Professionally I worked on several business domains and on diverse platforms. I love to learn and share new .net technology and my experience I gather in my engineering career. You can find me from here

Personal Site
Personal Blog
FB MS enthusiasts group
About Me

Comments and Discussions

QuestionNot working Pin
Member 800430624-Feb-13 22:31
memberMember 800430624-Feb-13 22:31 
Questionnot working for me either Pin
Sujit6715-Nov-12 19:47
memberSujit6715-Nov-12 19:47 
Questioncode and online demo not working for me Pin
suryansh4u25-Oct-12 0:11
membersuryansh4u25-Oct-12 0:11 
GeneralMt vote of 5.. Pin
_Amy4-Jul-12 23:32
professional_Amy4-Jul-12 23:32 
QuestionHow to get access token? Pin
kaka13513-May-12 0:45
memberkaka13513-May-12 0:45 
QuestionGetting facebook user Email-ID Pin
Member 844597010-Apr-12 19:28
memberMember 844597010-Apr-12 19:28 
GeneralMy vote of 4 Pin
senth221-Mar-12 18:30
membersenth221-Mar-12 18:30 
GeneralMy vote of 4 Pin
NileshKRathod23-Dec-11 22:38
memberNileshKRathod23-Dec-11 22:38 
SuggestionGood article. My vote of 4 Pin
Al Moje14-Dec-11 21:25
memberAl Moje14-Dec-11 21:25 
QuestionFacebook.Utility.FacebookException: Session has expired at unix time 1322146800 Pin
Gaganeswar24-Nov-11 20:27
memberGaganeswar24-Nov-11 20:27 
QuestionGet online friends of facebook ??? Pin
lavikgupta8-Nov-11 6:18
memberlavikgupta8-Nov-11 6:18 
QuestionThis code fails while getting SessionKey Pin
simpa24-Oct-11 5:55
membersimpa24-Oct-11 5:55 
AnswerRe: This code fails while getting SessionKey Pin
simpa20-Jan-12 0:46
membersimpa20-Jan-12 0:46 
QuestionSiteUrl, Canvas Url Pin
schalla1239-Oct-11 20:47
memberschalla1239-Oct-11 20:47 
Generaltoo bad Pin
sanjeevReddy31-Mar-11 20:13
membersanjeevReddy31-Mar-11 20:13 
GeneralMy vote of 5 Pin
chatuser12320-Jan-11 1:41
memberchatuser12320-Jan-11 1:41 
GeneralFind out the new solution for implement FB connect applications Pin
Shahriar Iqbal Chowdhury/Galib14-Nov-10 20:49
professionalShahriar Iqbal Chowdhury/Galib14-Nov-10 20:49 
GeneralRe: Find out the new solution for implement FB connect applications Pin
pablo luengo29-Nov-10 10:02
memberpablo luengo29-Nov-10 10:02 
GeneralGetting error : FacebookException: The user hasn't authorized the application to perform this action Pin
Fenil Desai31-Aug-10 4:48
memberFenil Desai31-Aug-10 4:48 
QuestionThe type initializer for 'System.Net.WebHeaderCollection' threw an exception.........! Pin
sharmaMohan14-Aug-10 4:38
membersharmaMohan14-Aug-10 4:38 
AnswerRe: The type initializer for 'System.Net.WebHeaderCollection' threw an exception.........! Pin
Shahriar Iqbal Chowdhury/Galib30-Aug-10 11:02
professionalShahriar Iqbal Chowdhury/Galib30-Aug-10 11:02 
GeneralDeserialization Exception Pin
AleXmanFree13-Jul-10 1:29
memberAleXmanFree13-Jul-10 1:29 
GeneralRe: Deserialization Exception Pin
Ardman10-Sep-10 4:28
memberArdman10-Sep-10 4:28 
Generalgrants and user data Pin
Ferhat Balaban11-Jun-10 22:20
memberFerhat Balaban11-Jun-10 22:20 
GeneralNice Article. Pin
Gaurav Dudeja India13-May-10 1:42
memberGaurav Dudeja India13-May-10 1:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 20 Apr 2010


130 bookmarked