Click here to Skip to main content
Click here to Skip to main content

Developing Facebook Connect Application using ASP.NET

, 9 May 2010
Rate this:
Please Sign up or sign in to vote.
Step approach for developing a Facebook connect application with ASP.NET

Introduction

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 http://apps.facebook.com/APP_NAME/somepage, 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 http://apps.facebook.com/APP_NAME/somepage, 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 http://www.yourserver.com/callbackurl/canvaspage. 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 http://oauth.net/). 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 www.imgalib.com/demo/facebook/).
  • 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.

http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php

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
	(ConnectAuthentication.ApiKey,ConnectAuthentication.SecretKey);    

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;
    grvFriends.DataBind();

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 www.imgalib.com/demo/facebook/ or you can use Facebook application home.

License

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
Technical Lead
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

 
QuestionGet online friends of facebook ??? Pinmemberlavikgupta8-Nov-11 6:18 
QuestionThis code fails while getting SessionKey Pinmembersimpa24-Oct-11 5:55 
AnswerRe: This code fails while getting SessionKey Pinmembersimpa20-Jan-12 0:46 
QuestionSiteUrl, Canvas Url Pinmemberschalla1239-Oct-11 20:47 
Generaltoo bad Pinmembersanjeevreddy31-Mar-11 20:13 
GeneralMy vote of 5 Pinmemberchatuser12320-Jan-11 1:41 
GeneralFind out the new solution for implement FB connect applications PinmemberShahriar Iqbal Chowdhury14-Nov-10 20:49 
GeneralRe: Find out the new solution for implement FB connect applications Pinmemberpablo luengo29-Nov-10 10:02 
GeneralGetting error : FacebookException: The user hasn't authorized the application to perform this action PinmemberFenil Desai31-Aug-10 4:48 
QuestionThe type initializer for 'System.Net.WebHeaderCollection' threw an exception.........! PinmembersharmaMohan14-Aug-10 4:38 
AnswerRe: The type initializer for 'System.Net.WebHeaderCollection' threw an exception.........! PinmemberShahriar Iqbal Chowdhury30-Aug-10 11:02 
GeneralDeserialization Exception PinmemberAleXmanFree13-Jul-10 1:29 
GeneralRe: Deserialization Exception PinmemberArdman10-Sep-10 4:28 
Generalgrants and user data PinmemberFerhat Balaban11-Jun-10 22:20 
GeneralNice Article. PinmemberGaurav Dudeja India13-May-10 1:42 
Generalnice job PinmemberArlen Navasartian10-May-10 5:26 
Generaloh PinmemberGuy Harwood26-Apr-10 21:19 
GeneralRe: oh PinmemberShahriar Iqbal Chowdhury27-Apr-10 22:46 
GeneralComments PinmvpMd. Marufuzzaman24-Apr-10 18:48 
GeneralRe: Comments PinmemberShahriar Iqbal Chowdhury27-Apr-10 19:39 
GeneralRe: Comments PinmvpMd. Marufuzzaman27-Apr-10 19:47 
Generalthanks Pinmemberyatri201021-Apr-10 6:20 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 9 May 2010
Article Copyright 2010 by Shahriar Iqbal Chowdhury/Galib
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid