Developing Facebook Connect Application using ASP.NET

Download Code

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 onFacebook like http://apps.facebook.com/APP_NAME/somepage, Facebook provides a webpage that has a bigIframe, 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 likehttp://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 theFacebook 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 Facebooktoolkit 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 iswww.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 Facebookaccount 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:

• http://wiki.developers.facebook.com/index.php/Extended_permissions

Now let's take a quick look at the sample code. You will see that I have a class named ConnectAuthentication.cswhich 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 usingFacebook 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.