Facebook IFrame Application With ASP.NET and MVC

There are several ways of developing a Facebook (fb) application.  Prior to deciding on your implementation method, make sure you read this article that explains the difference betwen an FBML and an IFrame application.  This particular example deals with an IFrame application developed in ASP.NET (4.0 Framework) and MVC 2.  So let's get going...

1.  Download the Facebook SDK.

2.  Start a new MVC web application project in Visual Studio and add your references for:

• Facebook.dll
• Facebook.Web.dll
• Facebook.Web.Mvc.dll

3.  Create/register your fb application.

4.  Essential fb application information:

API Key and Secret are very important, because that's how your MVC app will identify itself to fb, and thus your fb session will be tracked using those two values as HTTP requests jump from Facebook to your application and back.  I recommend saving your API Key and Secret to the web.config.


5.  Configure fb application:

Make sure to set your Canvas Page URL, Canvas Callback URL and Render Method (IFrame).
The Canvas Callback URL is very important - it's the root path to your application that is hosted elsewhere.

While in Sandbox mode (explained below), you can temporarily change your Canvas Callback URL to http://localhost/kons_first_app/ - that should help you debug the application and step into your code.

Sandbox Mode:

While your application is under construction, be sure to enable Sandbox mode, to prevent other people on Facebook, with the exception of other developers (you can add devs in the Basic tab), from playing with or even seeing your half-done application.

6.  Using the fb API (provided by the SDK):

As you can see, we first have to get a handle to the fb Api.  Once we do that, the fb world is our oyster!  The above code is accessing the current user's profile user properties.

Notice the FacebookAuthorization attribute above our Action method.  Among other things, this handles the fb session authentication for you, so that you don't have to pass apiKey and secret into the GetApi() method.  Instead, they'll be retrieved automatically from the appSettings in your web.config (so don't forget to put them in the web.config!).

You might also be wondering how GetApi() is available via this instance, when we're in a class inheriting from Controller.

Fb SDK to the rescue!

Facebook.Web.Mvc provides us with a ControllerExtension class that implements GetApi(), thus saving us the headaches of.... writing more code.

However..  You'll quickly realize that to do any real/robust development and interaction with fb, this ain't gonna cut it.  For example, one difficulty I ran into was routing to a different/custom Action with the FacebookAuthorization attribute in place and IsFbml set to false (as it should always be for an IFrame app).  All requests kept getting routed to Index (I have a feeling fb session management was getting screwed up with the requests jumping from fb to my app).  However, I wanted to leverage automatic fb authentication and was dreading having to pass the apiKey and secret in every Action method.

So here's a more elegant solution... write a base fb controller class (which of course inherits from Controller) that handles all fb authentication and session management for you. Here are some minimal things you'll want to do in your base fb controller:

First things first, get a hold of your fb session:

Now that you can access your fb session, create an accessor for the Facebook.Rest.Api:

Almost forgot the constructor!  In the constructor, you'll want to at the very least set your API Key and Secret (from the web.config):

And that's it.  You can now create controllers that inherit from your base fb controller and make simple calls like this (without having to authenticate to fb every time):

7-ish.  Client-side fb stuff
I won't cover it here, but would highly recommend some light reading on XFBML and FBJS to learn how you can leverage fb UI code within your IFrame app.