Social Networks

In the couple of months since Facebook opened itself up to application developers, it has transformed itself into a platform.

Facebook Logo

Facebook Logo

There is a mind-boggling momentum at play, not only in terms of user signups, but in the excitement around developing for the platform as well. A lot of web startups are adding a Facebook experience, and at the same time, a number of new applications are popping up (every day… literally!) that are leveraging the power of the social network in creative ways. It will be interesting to see how Facebook holds up over time compared to other networks such as MySpace which seems to be dying in its own noise and chaos.

I’ve been hooked on Facebook for couple of weeks, and am super-impressed with it. It has spurred me into experimenting with some ideas. Along the way (in classic developer-style), I’ve put together a small framework, Facebook.NET, for developing Facebook apps using ASP.NET and C#/VB.NET. In the spirit of experimenting, I’ve also shared it out on CodePlex in its early form. This post contains a very brief intro on using it along with links to key Facebook developer material.

 

Facebook applications are essentially web sites that naturally embed themselves ala plugins, into the overall Facebook experience, as described in the Anatomy of a Facebook Application. Each application has a presence on the user’s main profile page, can add stories to the user’s feed, which are then shared out amongst the user’s network and can optionally have a set of canvas pages, or a work-areas essentially, where it has a lot more freedom in terms of interactivity and monetization possibilities. Facebook constrains what applications can do, especially on the profile page (for good reasons). It requires them to implement their user interface in FBML – a subset of HTML (devoid of pesky, unsafe tags such as script and object amongst others). Furthermore it manages requests to the application’s server for FBML markup and image responses and does the transformation into HTML that is finally rendered in the browser. In return, FBML provides some neat extensions or tags that allow applications to integrate deeply with Facebook’s UI concepts and controls. Facebook also provides a nice REST API (including JSON support, which I prefer over XML), and a SQL-based query language called FQL that developers can use to program against their user’s profile and network of buddies. Finally, Facebook provides a stage and an Internet-scale “word-of-mouth” style mechanism that enables viral distribution of your application… if it is cool. 🙂

Now, more about Facebook.NET and using it, from ASP.NET. Facebook.NET offers managed wrappers over a good chunk of the REST API, and also provides a small (right now) set of server controls that should really simplify writing apps. Before diving further, you should check out the basic Facebook documentation to get oriented a bit, as well as bookmark the Facebook developer’s wiki for future reference.

In terms of an application’s canvas page, Facebook offers two options: FBML-based apps and IFrame-based apps (there is actually a third variant: an FBML-app containing an IFrame). Facebook.NET supports both styles of applications (in addition to client/desktop apps, but ASP.NET-based Web apps are the focus right now). Facebook.NET provides a wrapper over the REST/JSON APIs so you don’t have to worry about marshalling requests/responses. It also provides an ASP.NET server control, <fb:FacebookApplication> that manages the somewhat involved login/session-acquisition process. Finally, it offers an <fb:FqlDataSource> control that allows you to use Facebook queries and bind the resulting data into data-bound controls, ASP.NET-style. Over time, hopefully there will be more it offers, especially in terms of FBML-specific UI controls.

The first thing to do is create an ASP.NET application, add a reference to the FacebookNET.dll and FacebookNET.Web.dll assemblies. If you haven’t already done so, add thedeveloper application onto your Facebook profile from where you’ll be able to go ahead and register your application so you have an application key and secret to use. Theguide to creating an application covers the registration steps – just follow them while ignoring the sample PHP code.

The project also contains a couple of Hello World applications you might use as a starter – what better way to start than to say “Hello World” on a social network, right? If you’ve already developed an application, you can probably skip this intro, and just start using the bits.

IFrame-based Applications

This is arguably the simpler of the two styles of applications, because you’re essentially writing a regular HTML-based Web site that happens to use some Facebook service APIs either in its server-side logic or in its client-side script.

Here are some relevant snippets from the included sample project:

<fb:FacebookApplication runat="server" id="fbApp" Mode="IFrame"
  ApplicationKey="[your_app_key]" Secret="[your_app_secret]" />
<asp:ListBox runat="server" id="friendList" DataSourceID="friendQuery"
  DataTextField="name" DataValueField="uid" />
<fb:FqlDataSource runat="server" id="friendQuery"
  FqlQuery="SELECT name, uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=@UserID)">
  <asp:ControlParameter Name="UserID" ControlID="fbApp" PropertyName="UserID" />
</fb:FqlDataSource>
<script runat="server">
private void OnSendGreetingButtonClick(object sender, EventArgs e) {
    ArrayList ids = ...; // Selected User IDs from friendList
    string fbml = ...;   // Build a greeting to place on the user's profile

    // Use the Facebook profile.setFBML API to update the user's profile
    fbApp.Service.Profile.SetFbml(fbml, null);
}
</script>

 

The sample application allows picking some users to say hi to, and updates your profile with your latest greeting. It optionally allows you to add a feed story or publish the user’s action as it is called in the API.

The key thing to notice here is you can simply drop-in the FacebookApplication server control to start using Facebook APIs in terms of establishing a session, and making REST service calls. You can use the FqlDataSource control like any other ASP.NET data source control to fetch Facebook data to bind into your page’s rendering. Another thing to note is you still need to learn FBML. Even if your main user interface is HTML-based and operates within an iframe, you’ll want to update the user’s profile, or create feed entries, which require FBML. Here is what you end up with:

FBML-based Applications

In contrast with the iframe approach, FBML-based applications use FBML on their canvas pages as well, and can use a variety of user interface elements to match the Facebook look as well as leverage some of their controls such as a user picker (which the sample makes use of).

Here are some of the relevant snippets from the included sample project:

<fb:FacebookApplication runat="server" id="fbApp" Mode="Fbml"
  ApplicationKey="[your_app_key]" Secret="[your_app_secret]" />
<fb:editor action="Default.aspx">
  <fb:editor-custom label="Select some friends">
    <fb:multi-friend-input />
  </fb:editor-custom>
</fb:editor>
<script runat="server">
private void Page_Load() {
    ArrayList ids = ...; // User IDs populated from ids posted by the multi-friend-input element
    string fbml = ...;   // Build a greeting to place on the user's profile

    // Use the Facebook profile.setFBML API to update the user's profile
    fbApp.Service.Profile.SetFbml(fbml, null);
}
</script>

 

You’ll see that the app and server-side code to actually update the profile, publish the story etc. is quite similar. Both do the same thing at the end of the day, but this one gets to use the <fb:editor> and <fb:multi-friend-input> and other related tags to implement the scenario. Here is what you end up with:

 

 

 

I ran into one big gotcha around debugging while developing an FBML application.

An FBML application has to be hosted on the public internet, since Facebook’s server’s make request to it, as opposed to the browser. In the case of the IFrame approach, the user’s browser is the one making requests to your application, so it can be hosted on http://localhost and the debugger can be attached to the local process. I am not able to debug a remotely hosted application. Furthermore, any error information or exception message you send out from your application with an HTTP 500 status code turns into an unfriendly Facebook error saying something like “the makers of the app and Facebook are working out the kinks” – which is completely useless for debugging. So to help get debuggability back to at least printf/alert-style debugging, the FacebookApplication does a couple of things: it has an EnableDebugging property you can set to true when debugging, and in that mode, it catches unhandled exceptions to write out the exception message, stack trace and form post values. You can also turn on tracing in that mode. This lets you start to get to the bottom of errors. I’ll be improving this some more over time, so you application can have useful error pages should they occur in release mode.

 

IFrames vs. FBML

When I first started looking at Facebook applications, I was quite sure FBML was the way to go for implementing the application’s Canvas pages. Now I am not so sure.

FBML allows you to use a bunch of interesting Facebook user interface elements, and naturally pick up the Facebook theme. It does come at some cost: your application is constrained in terms of usage of script for example, which limits interactivity, as well as advertising. It also potentially increases latency issues as your server needs to serve up FBML, which has to be converted to HTML on Facebook’s servers, before it gets rendered into the browser. To further the problem, Facebook seems to have a low threshold for timeouts, and this latency could result in an unfriendly error message, should processing on either your server or Facebook’s servers take more than the allocated time.

The compelling reason for using iframes is that it allows you to do as you please within your frame, which includes the ability to run script, use your familiar Ajax framework, as well as display advertising. The downside of course is you either need to work extra hard to mimic the Facebook theme, or possibly risk a lesser than ideal level of user interface integration.

In closing, check out Facebook.NET, let me know what you think, and stay tuned for a future posts related to this. Hope to get a couple of real apps out there one of these days.

 

 

None found.
  1. Greate article. Keep posting such kind of info on your site.
    Im really impressed by it.
    Hello there, You have performed an incredible job.
    I will certainly digg it and individually suggest to my friends.
    I’m confident they will be benefited from this site.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>