Sunday, June 10, 2007

« FaceBook's Application Platform | Main | Round II with the "other" Stev... »

Developing Facebook applications in C# with ASP.NET

Posted @ 2:04AM by Steve Trefethen

Categories: ASP.NET | Development | Facebook

Tags: ASP.NET | Development | Facebook

I mentioned previously I've created my first Facebook (FB) application (which is still under development) but I've learned a lot along the way. I haven't found the Facebook documentation very useful at all and have gleened a lot through Google, the Facebook developer group and simply tinkering with things. As a result I've put together some steps I think could help save you some time if you're looking to write a Facebook application using ASP.NET and C#. Btw, you'll get no help from facebook.com regarding ASP.NET development.

One thing that took me awhile was understanding how an FB application appears on your profile page. I eventually realized that FBML can be used to push markup onto a users profile page. This block of markup can be set at the time you create a new application though the first time around, if you're like me, this may see a bit confusing keep in mind I'm new new to FB itself so a lot of this was confusing. From the FB toolkit you can also use the method setFBML to programmatically set this block of markup. Needless, to say being used to MSDN documentation FB doc leaves a lot to be desired. That said there are a few tools you can use to play with the API as well as sample your FBML markup.

At any rate, here are the steps I followed to get my application working. Note, the project includes support for Microsoft AJAX so you'll want to have that installed as well although you could just tweak the .aspx and web.config files and use it without AJAX. The screenshot illustrates what you should get when your done. NOTE: In the following steps several links won't work unless you have an FB account.

UPDATE: I've created a new page on my wiki with updated steps and a VS.NET starter kit to make this much easier.

Sign up for a Facebook account
Add the Developer application to your account (you need an account for that link to work)
Click Developer application from the left column and select click Set Up New Application
Enter the Application Name and expand Optional Fields
Under Optional Fields
1. Set your callback URL http://localhost... will work just fine for development
2. Select "Use iframe"
3. Click Yes for "Can your application be added on FaceBook"
Under Installation Options
1. Check "Developer Mode"
2. Under Site Nav use the same URL from Canvas Page URL (see Optional Fields)
3. If you use my template set Edit URL to your Canvas Page URL + /settings
Click Save then from the Developers Application browse to My Applications
Click View About Page then click Add Application. This will allow you to easily work with your application during development.
Download the Facebook Developer Toolkit from Microsoft
Download my C# ASP.NET app to get you started or generate the boilerplate code for handling login (sorry I don't do VB.NET)
You'll need to add a reference to the Facebook assemby to this project as I didn't want to include it as it being updated frequently right now
Open Default.aspx.cs and fill in FACEBOOK_APPKEY and FACEBOOK_SECRET from your application's page on Facebook.
Fire up the browser and hit your http://apps.facebook.com/<your_app_name> and you're off!

Please let me know what problems you have or let me know if these steps need tweaking.

Was this helpful?

[Updated: June 11, 2007] Added link to an update page on my wiki with this content.

[Updated: Feb. 24, 2008] Since this post was written I've created two VS.NET starter kits, one for Facebook Dev Toolkit and Facebook.NET. Here are some additional links:

Comments [24]

permalink

Sunday, June 10, 2007 2:48:41 AM (Pacific Standard Time, UTC-08:00)

Can you elaborate which tools you used during the process? BDS 2006? Or is there some "Facebook IDE" you can develop in. I never heard of it, so your blog post is rather interesting to consume new information on the topic...

Holger Flick

Monday, June 11, 2007 1:32:50 PM (Pacific Standard Time, UTC-08:00)

Facebook is agnostic as long as your tool of choice can handle REST though from their web site they promote PHP and Java with minor mentions of other frameworks. I'll avoid the religious debate on tooling as I don't believe in religion when selecting development tools. My current favorite happens to be Delphi from CodeGear though YMMV.

Steve Trefethen

Tuesday, July 10, 2007 12:09:53 PM (Pacific Standard Time, UTC-08:00)

Hi Steve,

First of all, thanks for sharing your experience!

I tried to run your application acc to your instructions, but for some reason the method "GetUserInfo" returns the following error:

The underlying connection was closed: An unexpected error occurred on a receive.

Do you have any suggestion what I should do?

Thanks again,
Eyal

Eyal

Thursday, January 24, 2008 11:10:35 PM (Pacific Standard Time, UTC-08:00)

hi
I am new to Facebook...I developed desktop application in .Net

i am getting the Friendslist,i used the following code in page_Load,
friendList1.Friends = facebookService1.GetFriends();

I am getting error: NullvalueExceptionHandled
Object Reference not set to be an instance of an object

how to use my application in Facebook...

Thanx
vidhya

Vidhya

Friday, January 25, 2008 7:03:15 AM (Pacific Standard Time, UTC-08:00)

Thanks for helping us. This is great article. Now I like to add Profile box via asp.net, C#. I could not find any sample code for it. How can I design profile box via C#.net? Do you have any sample project? Thansk.

Young

Friday, January 25, 2008 8:51:14 AM (Pacific Standard Time, UTC-08:00)

Young,
I'm not in a position where I can provide free Facebook technical support. If you're interested in consulting please let me know and I'd be glad to help otherwise, I'd suggest the Facebook Developer forums.

Steve Trefethen

Thursday, January 31, 2008 1:24:16 PM (Pacific Standard Time, UTC-08:00)

What are your experiences with FBML and ASP.net controls?

I've been tinkering also and have been finding it somewhat difficult to debug some issue partiularly when it comes to ASP.net webcontrols. Some work others do not.

I'm guessing its all related to the FB version of javascript and its attempts to create javascript namespaces but have yet to come to any concrete conclusions on what works and what doesn't and workarounds etc.

dan

Wednesday, February 20, 2008 1:59:08 AM (Pacific Standard Time, UTC-08:00)

I am creating application using facebook.net in iFram mode.What i have a problem is when data grow a ugly scroll bar appear on right side of application. What i want is to hide those ugly scroll bars that get with an Application.

Kashfi

Wednesday, February 20, 2008 9:26:38 AM (Pacific Standard Time, UTC-08:00)

Kashfi,
I have information on this page where to ask questions related to Facebook Development.

Steve Trefethen

Sunday, February 24, 2008 5:39:54 PM (Pacific Standard Time, UTC-08:00)

I'm sorry, I don't know what you mean to do with this code. Are we supposed to create an empty project in Visual Studio Express and put your code in it?

David

Sunday, February 24, 2008 10:27:47 PM (Pacific Standard Time, UTC-08:00)

David,
Refer to the page I mentioned in the post with updated content. I've since created a VS.NET starter kit you can use instead.

Steve Trefethen

Tuesday, February 26, 2008 7:57:41 AM (Pacific Standard Time, UTC-08:00)

how can we use multifriend selector to invite friends

rocky

Tuesday, February 26, 2008 11:37:35 AM (Pacific Standard Time, UTC-08:00)

rocky,
In an IFRAME implementation you can't use FBML so the multi-friend selector isn't an option, you'll need to implement that on your own. For more help, I'd recommend the Facebook developer forums.

Steve Trefethen

Saturday, March 08, 2008 1:32:52 AM (Pacific Standard Time, UTC-08:00)

see Facebook Development with FBML, .NET, C# on
Siccolo development

siccolo

Tuesday, March 25, 2008 2:10:52 AM (Pacific Standard Time, UTC-08:00)

Hello,

I am developing a facebook application on .net technology to do character analysis.Once the survey for this is done, the application result needs to be appeared in the profile page.I tried html iframe, <fb:iframe, <fb:ref etc...But Nothing worked out.

I know there is a technique to display dynamic contents in profile page from an external URL..

Please reply as soon as possible..

Its Very Urgent...

Please....

Thanks...

Fabeena Thoufeeq

Fabeena

Tuesday, March 25, 2008 9:46:35 PM (Pacific Standard Time, UTC-08:00)

Hello Steve,
U have any idea regarding my above question?...

Thank You..

Fabeena

Wednesday, March 26, 2008 9:19:07 AM (Pacific Standard Time, UTC-08:00)

Fabeena,
You should post questions like this to the Facebook developer forums.

Thanks!

Steve Trefethen

Friday, March 28, 2008 4:08:13 AM (Pacific Standard Time, UTC-08:00)

hi sir,
good evining i wanted to do a project of asp.net using c#.net and i need some help from you

vinay

Wednesday, April 02, 2008 1:44:14 AM (Pacific Standard Time, UTC-08:00)

Hi,

I am trying to developed a local facebook application.I had also created one application in facebook and also set a canvas url as http://apps.facebook.com/Mypage.

But when go thought this url hall facebook login page is display in canvas.Whenever i am login for my page that time canvas page is show me logged but outer page not.I have also screen shot for that but not able to send you.

Thanks,
Regads
Soni Umesh
Devloper

Soni Umesh

Wednesday, April 02, 2008 7:03:18 AM (Pacific Standard Time, UTC-08:00)

Soni,
I recommend posting support questions like this to the Facebook developer forum as you'll get a lot more eyes looking at the problem.

Steve Trefethen

Wednesday, April 02, 2008 7:02:09 PM (Pacific Standard Time, UTC-08:00)

Thanks for being such a big help for everyone Steve.

I have a question about testing Facebook Apps. I have already deployed my facebook app so in my Facebook settings, I have a live Callback URL.

When I make updates to the program and I want to test them locally on my machine, I need to change the Callback URL to http://localhost... but that breaks the application for all of the 'real' users while I test.

Is there a good way around this? Thanks!

Phil

Wednesday, April 02, 2008 10:21:42 PM (Pacific Standard Time, UTC-08:00)

Hi Phil,
Thanks for the kind words. I think there are a few things you can do including creating another application on Facebook that simply uses a different callback URL. Additionally, I'd recommend designing your application in such a way that the portions that don't require access to Facebook can function without that requirement allowing you to test those features in isolation. Your question leads me to believe that it would be valuable for frameworks such as Facebook Dev Toolkit and Facebook.NET to provide a mock interface which would more easily allow for testing outside of the Facebook server (perhaps something already exists). I'm sure something like that could be done and in fact sounds like an interesting project.

HTH

Steve Trefethen

Friday, April 18, 2008 12:34:25 AM (Pacific Standard Time, UTC-08:00)

Hi Steve,

Are there existing applications in facebook created in ASP.Net? If so, can you name some of them? So that I can test if apps built in ASP.Net is as stabel or as fast compared to other platforms.

thanks

Paul

Friday, April 18, 2008 6:48:38 AM (Pacific Standard Time, UTC-08:00)

Hi Paul,
Since Facebook applications run in an IFRAME it's less obvious they're ASP.NET apps. It's entirely possible some FB apps you've used are ASP.NET apps. Is it really necessary to demonstrate that ASP.NET is fast and stable when running as an FB app when MS, Dell, MySpace and many other major sites all use it?

Personally, I don't think it's an issue. If you're really feel your FB app is going to scale to such size as to raise concerns about the scalability of ASP.NET I'd say you should focus on other areas first like how you're going to write such a scalable app in the first place. Next, I'd worry about the hosting provider and whether or not they can supply you with scalability, sufficient bandwidth, load balancing, failover etc. Now, to me those would be real concerns for a wildly successful app.

Steve Trefethen

Name
E-mail	(will show your gravatar icon)
Home page

	Remember Me
Comment (Some html is allowed: `a@href@title, b, blockquote@cite, em, i, strong`) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.

Live Comment Preview