So you want to write a Facebook app? The good news is that once you get going, it's actually really straightforward. The bad news is that it's an uphill struggle to get going in the first place.
Unfortunately for the ASP.NET developer, there is no official wrapper for the Facebook API. There are a couple available, but as you can see by the reviews they are far from perfect.
However, we can still create a Facebook application without needing the API. Okay, we won't be able to do a huge amount with it, but this is a starter tutorial and we'll get to the more advanced topics later.
Note: I'm pushed for time at the moment, so will add some screenshots later, which should help to explain things a bit better. Picture paints a thousand words and all that.
The Basics - Facebook Connect and Facebook Applications
There are two completely different concepts when dealing with Facebook applications.
Facebook Connect - integrate a user's Facebook profile information (name, likes/dislikes, wall, dodgy profile pictures) into your existing site. A good example of this is http://welcometofc.com
Facebook Canvas Application - this is an application that lives within Facebook - however IT IS NOT HOSTED WITHIN FACEBOOK. You get to your app via http://apps.facebook.com/[MYAPP] - no surprises that this has to be unique.
Facebook needs to be able to access your site, so there can be no localhost development I'm afraid. You need to put the page on a publicly accessible server.
Create your Facebook App
Creating both Connect and Canvas apps involve the same process. In fact you can have BOTH a Connect AND Canvas app configured within the same application configuration.
To do this, you'll need to add the Developer app, at
http://www.facebook.com/developers/Click Set up a New Application.
You should now see the Application Settings screen. The main configuration is within the Edit Settings option.
Basic - Contains your API Key. YOU NEED THIS. You add this to your web site to confirm that your web site can talk to this app. Keep it secret. Keep it safe. Not to be confused with your Application Secret.
Authentication, Profiles, Widgets, Advanced, Migrations - Not essential.
Canvas - This is where you set up your Canvas URL - if you are creating a Canvas app only - and the callback URL, which is the page that Facebook calls which is by default hosted within apps.facebook.com/[MYAPP]. More on this later.
Connect - Configure how your web site connects with Facebook. You only need this if you are doing Facebook Connect, it is not required if you have a stand-alone Facebook Canvas application.
Facebook Connect
To enable your site to connect to Facebook, you need to do 3 things:
1 - Enable Cross Domain Posting - you do this by including a couple of javascript files that you get from Facebook. More detail to follow.
2 - Initialise your Facebook application in client script
3 - Import the FBML namespace.
That's about it. Of course, you'll want to *use* some FBML, but more on this later.
I'm taking it that by now you have configured your Facebook Connect application in Facebook.
Replace the <html> tag in your .aspx page with the following:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
This imports the namespace which contains the FBML, so that your browser doesn't fall over before these have been parsed by the facebook javascript.
Add the following javascript includes to the bottom of your page, just above the closing <body> tag:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
FB.init("[YOUR API KEY]","/assets/xd_receiver.htm",{"ifUserConnected" : showLoggedInState, "ifUserNotConnected":showLoggedOutState});
/assets/xd_receiver.htm is a relative link from where this page runs to the Cross-Domain file you get from facebook. Get it from here -
http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_ChannelThis bypasses the Single Origin Policy and allows Facebook to interact with your page and vice versa.
Add the following to your .aspx page:
<div id="loggedOut" style="display:none">
<fb:login-button length="long" size="large"
onlogin="showLoggedInState();return false;">Invite Friends with
Facebook</fb:login-button>
</div>
<div id="loggedIn" style="display:none;">
<div id="user-box">
<span>
<div id="profile-pic">
<fb:profile-pic uid='loggedinuser'
facebook-logo='true'></fb:profile-pic>
</div>
<div id="welcome-text">
Welcome, <fb:name uid='loggedinuser'
useyou='false'></fb:name>.<br />
Invite friends with <a id="lnkShare7"
href="#share7" name="modal" onclick="return false;">Facebook
Connect</a>.
</div>
</span>
</div>
</div>
<!-- facebook multi friend selector overlay starts -->
<div id="facebook-wrapper">
<div id="share7" class="window windowfixed">
<p style="margin-left:10px;">
Invite a friend to use this application...
</p>
<p id="multi-friend-selector-container">
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form method="POST" action="<%= FacebookFormAction %>"
invite="true" type="<%= FacebookApplicationName %>"
content="You have been invited to the [MY APPLICATION] application. <%= ApplicationsFbml %> ">
<fb:multi-friend-selector bypass="cancel"
showborder="false" rows="3" cols="4" max="35" actiontext="Invite your friends to use this application." />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
</p>
</div>
</div>
where FacebookFormAction is the URL of the current page, and FacebookApplicationName is the name that you want to appear in the Facebook Connect dialog.
What this will do is display the Connect with Facebook button if the user is logged out.
When the user is logged in it will display the user's FB name and profile picture, and allow the user to share this application with their friends on Facebook.
Notice the FBML markup; you can find a complete list at
http://wiki.developers.facebook.com/index.php/FBMLFacebook Canvas
That was Facebook Connect. If you want your site to be hosted WITHIN Facebook, then you need to create a Facebook Canvas application.
There are two types: FBML and IFrame. From what I can tell, IFrame is now the recommended choice, as it gives you more freedom, and you should be able to use libraries such as jQuery without much trouble. See
http://www.ccheever.com/blog/?p=10Go to the Canvas tab of your application settings in Facebook.
Canvas Page URL - this is a unique URL that identifies your application of FB.
Canvas Callback URL - this is the page that is hoovered up by Facebook and then displayed within the IFrame.
Post-Authorize Redirect URL - you can leave this blank; it is optional.
Don't worry about the other settings for now.
If you create the following .aspx page at your Canvas Callback URL:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body class="bg-white">
[Your website content here]
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function() {
FB.Facebook.init("[YOUR APP KEY]", "channel/xd_receiver.htm");
});
</script>
</body>
</html>
You can also use FBML in this page, to pull through profile specific information.
And that's about it. These are of course only the basics, but you should now be able to create your own applications within Facebook, or integrate Facebook into your own site to provide an enhanced user experience.
As you may have noticed, I haven't mentioned the .NET Facebook API wrappers - we didn't need them as we didn't do a whole lot of Facebook integration. These wrappers are notoriously unreliable, but take a look at
http://facebooktoolkit.codeplex.com/ as this seems to be well maintained.