Marketing Ninja

It’s about time for an update on Facebook Application with ASP.NET, using Nikhil Kothari’s Facebook API wrapper for ASP.NET, Facebook.NET. If you want to read about why I’m using Facebook.NET instead of the Facebook Control Toolkit then click here.

I’ve spent a lot of time developing my Facebook application this weekend and I have a few additional pointers that I’d like to throw out for any Facebook.NET developers looking to get started:

1. Use Steve Trefethen’s Visual Studio.NET starter kit for Facebook.NET – This starter kit is a handy package for jump starting a Facebook.NET application from scratch. I’ve written most of my Facebook application using Steve’s starter kit as a foundation (I ditched my botched FBML attempt and re-did the entire UI as an iframe.)
2. Develop and debug your application as an <iframe> application – Take it from me, developing an FBML application is a pain in the ass for the following reasons:
   • FBML is very strict
   • Your FBML applications have to be run off of a server that Facebook can connect to, so a lot of your localhost debugging options disappear if you are behind a firewall like me.
   • FBML obfuscates any HTTP error messages, thus it can be very hard to track down and locate error messages when something goes wrong. I actually developed a great solution to this problem but still it was just easier to switch to an iframe.
   • Facebook’s Stylesheets can mess with your graphical elements a lot when you develop with FBML; using an iframe gives a clean slate (but you also have to try and then create your own styles that mesh well with Facebook!).
   • You can always develop and test the core of your application as an iframe and then embed it into an FBML wrapper later as an <fb:iframe /> element.

   I could go on all day about how much easier it is to work with iframes than FBML, and I may even write an entire post about it, but if you need just one reason, then it’s this: you can debug on your localhost effortlessly with iframes, and not at all with FBML.

3. Use strongly-typed references to Master Pages in all of your .aspx files – In my 10 Hot ASP.NET Tips and Tricks for the week of 9/28/2007 article I mentioned an article on master pages. In the subsequent code sample for the article I linked to you can see where the author uses strongly-typed master page references to access controls on the master page via the .aspx pages. If you use Steven Trefethen’s starter kit then you need to implement some sort of strongly-typed reference in order to access the Facebook Application control which will then give you access to the Facebook Application service. All of my .aspx pages connect to Facebook via the master page’s control, and it saves on a lot of code duplication.
4. Use <fb:FacebookHyperLink> extensively – One of the problems I had with my <iframe> approach was that my ASP.NET links would all point to my localhost url rather than translate correctly to Facebook’s url.

   For instance if my application’s home page were hosted at http://localhost/default.aspx and I wanted to go to my “invite friends” page, invite.aspx, clicking on a link that uses traditional ASP.NET relative-architecture (~/invite.aspx) would land me on http://localhost/invite.aspx, but where I really want to go is to Facebook’s translated address http://apps.facebook.com/myapp/invite.aspx.

   <fb:FacebookHyperLink> takes care of this translation for you automatically, and it even adds the correct target property so you can navigate properly via <iframe>. This will save you from a lot of headaches.

5. Use the FBML Test Console - If your application sets a box on a user’s profile page, which requires FBML, then you need to make sure you thoroughly test your Facebook application’s FBML output using Facebook’s FBML test console. You will not be able to test FBML rendering on your local machine as there are no desktop tools available for FBML. In addition Facebook changes the FBML standards frequently so even if there was a tool available it would become out of date in relatively short order.

I’ll have some more tips and some code samples available this week as my development continues. I hope you find these helpful.

If you enjoyed this post, make sure you subscribe to my RSS feed!