Just recently I started experimenting with the ASP.NET MVC Framework and the Facebook Development Platform, it has been a very bumpy road, but I have ironed out some major issues that I would like to share with you today. I will start with a little history of what I am trying to do. For about a month and a half I have had one of my IdeaPipe interns, Dimitry, experimenting with creating a FBML (Facebook Meta Language) Application with MVC. MVC is an ideal platform for FBML because with MVC you have total control over your markup which is needed to have a lean FBML application. I am not going to go in to the differences of developing an FBML vs IFrame Facebook Application, because that information is easily found with a Google Search. What I am going to talk about is the hurdles I overcame and the custom software I had to develop to get MVC working smoothly with Facebook.

In my last post on the subject I was using the Facebook Developer Toolkit, however because of various implementation problems that were at the foundation of the software when working with MVC, I moved to Facebook.NET which is a object based model for implementing the Facebook Session instead of an inheritance model. What you will need in order to get started is:

• Facebook Developers
• Facebook Developers Wiki
• Facebook.NET Source Code (the source code is important because we need to modify one external interface from internal to public)

One of the problems I ran into was creating a Facebook Session from my Action Method. To remedy this issue I created a FacebookAttribute that is an ActionFilterAttribute and a FacebookWebSession based off of the work done on Facebook.NET.

FacebookAttribute

The FacebookAttribute is added to your Action Methods and will look like the following:

[Facebook(ApplicationName = "IdeaPipe")]
public ActionResult SomeAction(FacebookService facebookService, FacebookSession facebookSession, int myOtherVariables)
{ ... }

As you can see the FacebookAttribute just attaches to the Action Method and you just have to specify your ApplicationName that you want to instantiate. The FacebookAttribute also passes in a FacebookService and FacebookSession object for use in your method. The other keys get set in your Web.Config as any standard Facebook.NET application would.

<facebook>
    <application name="IdeaPipe" apiKey="1234" secret="5678" type="GlobalApplication" />
</facebook>

The magic behind this attribute is pretty simple.

public override void OnActionExecuting(ActionExecutingContext filterContext)
{
	FacebookApplicationSettings settings = FacebookSection.GetApplication(ApplicationName);

	ApplicationKey = ApplicationKey ?? settings.ApiKey;
	Secret = Secret ?? settings.Secret;

	FacebookWebSession session = new FacebookWebSession(ApplicationKey, Secret);
	session.Initialize(HttpContext.Current);

	FacebookService service = new FacebookService(session);

	if (filterContext.ActionParameters.ContainsKey(ActionParameterFacebookSession))
		filterContext.ActionParameters[ActionParameterFacebookSession] = session;

	if (filterContext.ActionParameters.ContainsKey(ActionParameterFacebookService))
		filterContext.ActionParameters[ActionParameterFacebookService] = service;
}

Download: FacebookAttribute.cs

FacebookWebSession

The FacebookWebSession was developed out of necessity because the only other FacebookSession objects in Facebook.NET are strongly tied to a WebForms Control that couldn’t be created as easily as I did in the FacebookAttribute. I am going to fore go the source code since much of this is a copy, paste, and rearrange from the Facebook.NET source. Plus much of it is just boring if-then-else statements that go on for awhile and just do a technical setup from the query string fields.

Download: FacebookWebSession.cs

FacebookSection

This is the file that I had to change the one method from internal to public so that I could get the information contained in the Web.Config configuration for my application. Note this file will not be necessary in the future if my changes get accepted in to the Facebook.NET source tree.

This file replaces the \Web\Configuration\FacebookSection.cs of the Facebook.NET source.

Download: FacebookSection.cs
Download: Facebook.NET Binaries For MVC

So that is all that you should need in order to start working with Facebook Applications in MVC. Note that it is still a good idea to include the FacebookApplication control on your pages because it is still needed. The primary goal of the source code above was to allow the use the the FacebookSession in the Action methods. If you have any questions please post them below.

Tags: Facebook, IdeaPipe, MVC

Posted in ASP.NET, C#, How To, Programming | | | View blog reactions | 6 Comments »

Facebook has been growing in popularity ever since it was released on February 4th 2004 at an almost unstoppable pace. Up until May 24th, 2007, it wasn’t much different than MySpace (or insert your favorite social network here), however on that day they rolled out a SDK that turned Facebook from a destination website to a platform that let any developer interact with their almost 71 million users. You can read more about the history of Facebook at Wikipedia.

My focus today isn’t on how to develop your first Facebook application in ASP.NET, because there are already many great articles on that, and even some starter kits. My focus is going to be on developing your first Facebook application with ASP.NET MVC, however this article will assume that you have the basic understand FBML (Facebook Meta Language) and MVC. If you do not have one or the other don’t worry, both are very easy to pick up on, and both have a very active developer community to answer questions.

• Facebook Developers
• Facebook Developers Wiki
• And Also My Getting Started With MVC Guide

So now that, that is out of the way lets start looking at what we need to make your MVC application in to a Facebook compatible application. The first thing you will need is the Facebook Developers Toolkit which is free on CodePlex. The second thing you will need is my Facebook MVC Web Controls which is a modification of the tookit’s Facebook.WebControls.dll made specifically for MVC. The third thing you need is ASP.NET MVC Preview 2 which is also available for free on CodePlex.

My tookit extension consists of the following classes, that mimic the current classes already in Facebook Developers Toolkit:

• CanvasFbmlViewPage
• CanvasFbmlViewPage<TViewData>
• CanvasFbmlViewMasterPage
• CanvasFbmlViewMasterPage<TViewData>
• CanvasIFrameViewPage
• CanvasIFrameViewPage<TViewData>
• CanvasIFrameViewMasterPage
• CanvasIFrameViewMasterPage<TViewData>

Facebook IFrame Application

I will start with the IFrame stuff since that is very easy and doesn’t require FBML knowledge. To create a Facebook IFrame application just follow the directions at Facebooks Getting Started Website for an IFrame. Then create an MVC Preview 2 application in Visual Studio. Then change the following in the CodeBehind for each of your pages.

public partial class Index : ViewPage

to

public partial class Index : CanvasIFrameViewPage

That is all you have to do to get Facebook working with your MVC application through IFrames. You don’t need to change your HTML because you site is going to render through an IFrame so there is no processing that is done in regards to UI rendering for Facebook. This has some drawbacks including not having the familiar Facebook interface, however this is the easiest way to get running on a Facebook app.

Facebook FBML Application

Creating the C# part of an FBML application for MVC is just as easy creating creating the IFrame application.

public partial class Index : ViewPage

to

public partial class Index : CanvasFbmlViewPage

Nothing spectacular there. Before we get started with the FBML application there is a tool that shows you what your FBML will look like when rendered out to HTML. However the real power of MVC is about to shine when we create a simple Facebook application using FBML and the ASP.NET MVC framework. Basically I took the default MVC application and modified the Index.aspx page to look like this.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcFootprints.Views.Home.Index" %>
<div style="padding: 10px">
    <h2>Hi <fb:name firstnameonly="true" uid="<%= this.FBService.UserId %>" useyou="false" />!</h2>
    <form method="post" action="http://apps.facebook.com/coderjournal/">
        Get friend:
        <fb:friend-selector idname="friend" />
        <input value="find" type="submit" />
    </form>
    <hr />
    <fb:if-can-see uid="<%= Request.Forms["friend"] %>">
    <div style="clear: both; padding: 3px;">
        <fb:profile-pic style="float: left;" uid="<%= Request.Forms["friend"] %>" size="square" />
        <fb:name uid="<%= Request.Forms["friend"] %>" capitalize="true" />
    </div>
    </fb:if-can-see>
</div>

This isn’t very spectacular, all that it does it provide a friend list drop down, and submit it back to get their picture and name. But it gives the basic idea how to inner-mix FBML markup like <fb:name /%gl; and HTML with MVC. So basically that is your first Facebook application with MVC, nothing to it right?

That is really the beautiful thing about MVC, it makes writing simple applications that much simpler than ASP.NET Web Forms because you don’t have to deal with controls and it is encouraged to do processing inline with your markup. Happy coding. As always you can find the source code to this and my other projects in Coder Journals Source Control Repository.

Tags: ASP.NET, C#, Facebook, FacebookToolkit, MVC

Posted in ASP.NET | | | View blog reactions | 15 Comments »