How to Build Facebook Applications with Silverlight 2 RTW – Part 1 of 2
I’m about to embark on some very different Silverlightapplication development projects (primary around data-driven UI, andone potential one even about kiosk/digital sign work). Before I dothat, I wanted to give you all a brain-dump primer from my last project– MSDN East Coast News.
Note. If you’re interested in more information, or have questions, be sure to join the MSDN geekSpeak on October 22, 2008, where I’ll be covering this topic. I’ll also have a session at the Fall CMAP Code Camp for all the locals.
We’regoing to build an application that has Silverlight on the client,surfaced through an iframe in Facebook, and which uses a WCF service toproxy calls to the Facebook API through our own server.
See the post I did on MSDN East Coast News for additional architecture information for a real application.
Background Work and Plumbing
Create the Facebook Application
First, make sure you add the Developer application in Facebook. The dev app is what allows you to create, configure and manage your own applications.
Once in the developer application, click the “Set Up New Application” button
Next, you want to enter the application name
ubmit at this point, as we’ll need to do some more local work before wecan complete the remaining fields. Once you submit, you’ll see thispage:
The most important information on that page is the API key andSecret. Note that you probably won’t have the canvas URL set yet, Iskipped ahead a step when I started this app :)
Install the Toolkit and Starter Kit
If you haven’t yet done them, there are two more key steps you’ll want to do:
- Download and install the Facebook Developer Toolkit for .NET
- Download and install the Facebook Developer Toolkit Starter Kit
Theare other toolkits and options available, but I found that combinationthe easiest to use to get up and running quickly. However, be warned:none of the toolkits offer the entire API surface area Facebookprovides, in part because that is a moving target.
The starterkit hasn’t been updated in a bit, but still serves as a good startingpoint for your app development. Keep in mind that you can always doplain old REST-based API development if you wish.
Create the Visual Studio Solution
Open up Visual Studio 2008 and create a new web site:
Click “Yes” when prompted to upgrade the site to .NET 3.5 from 2.0. We’ll be using some 3.5 goodies in our application.
You’ll then be presented with the starter kit readme. Theconfiguration is slightly more involved with the new API, but theinformation there is still generally correct and important. To keepthings clear, I’ll go through the configuration options we use furtheron in this post.
Correct the References
Remove theFacebook references from your web site’s bin folder. Now right-clickand add a reference to the facebook.dll, facebook.web.dll, andMicrosoft.Xml.Schema.Linq.dll from the place where you unpacked theFacebook Developer Toolkit.
Set appKey and Secret in Web.Config
Now crack open theweb.config and locate the appkey and secret values in the configurationsections. You’ll need to paste in the values from your facebookdeveloper application page. Put the API Key in the appkey value and thesecret in the secret.
<add key="appkey" value="aa442b07602d1e8e5ecd311dbcf180db"/>
<add key="secret" value="bigoldhexkeygoeshere"/>
As the name suggests, keep your secret a secret from anyone outsideyour development team. Otherwise, other people can impersonate yourapplication.
Pin Your Port
Since we’re going to have to rely on a known port when debuggingyour application, we’ll need to keep Visual Studio from changing thenumbers around. Select your web site in the project explorer and change“Use dynamic ports” to False. Take note of the port number while you’re there.
Configure the Facebook Application
Next we need to tell Facebook how to instantiate our application. Inthe Facebook Developers app, select your new application and view theproperty page for it. On that page, select “Edit Settings”. Here arethe key settings you’ll need:
|Callback URL||Thisis the URL to your site on your own server. Do not leave off thetrailing slash or you’ll likely get the unfortunate result of aninfinite loop of redirects. |
For development and debugging, this is where we put in our local webserver’s address:
All facebook URLs in your application will be relative to this.
|Canvas Page URL||This is the unique URL for your application on Facebook. Logically, this will map directly to the callback URL. |
Pick a unique name for your application and plop it in this field.
|FBML/iframe radio buttons||Fora Silverlight app that you wish to be able to debug locally, you’llneed to use an iframe. This is a plus in that you can shove most anycontent inside the iframe. It’s a minus in that you lose some of theinteresting facebook FBML-only functions like the share button. |
For this example, choose iframe
|Can your application be added on Facebook?||Yes (if you leave this at “no” you will not get the Installation Options)|
|Icon||Createa small icon (jpg, gif or png) for use in facebook and set it here.This is the icon that will be used in application lists and in theshort story format for stories posted by your application|
|Logo||Thisis the larger logo you’ll see in medium/long stories as well as inother places in facebook. This should bear some resemblance to thesmall icon so that they are obviously connected.|
|Developer Mode (under Installation Options)||Check the box to only allow developers to install the application. We can revisit the other options later.|
Save the options
Fix API Breaking Changes in Your Application
Now go back to your solution and compile. You’ll notice three errorsdue to changes in the API since the creation of the template:
In Site.master.cs, change the using Facebook.Web.Controls statement to
In the same file, change the code in Page_Init to
base.API.ApplicationKey = ConfigurationManager.AppSettings["appkey"];
base.API.Secret = ConfigurationManager.AppSettings["secret"];
Next, in default.aspx, change the content to look like this:
<%@ Page Language="C#" MasterPageFile="~/Site.master"
Inherits="_Default" Title="Untitled" %>
<%@ Register Assembly="facebook.web"
Namespace="facebook.web" TagPrefix="cc1" %>
<h1>ASP.NET Starter Kit Application</h1>
<asp:PlaceHolder ID="friendNames" runat="server" />
Now do a global search and replace in your project for:
Then go into Default.aspx.cs and replace “using facebook.Entity”with “using facebook.Schema” and using “using facebook.WebControls”with “using facebook.web”
Next, replace “FacebookAPI” with “API”
Finally, we’ll change the code in Page_Load and SelectedIndexChangedand change FacebookAPI to API. The resulting Default.aspx.cs shouldlook like this:
public partial class _Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
facebookAPI = ((CanvasIFrameMasterPage)Master).API;
// Use the FacebookService Component to populate Friends
IList<user> Friends = facebookAPI.friends.getUserObjects();
for (int i = 0; i < Friends.Count; i++)
friendNames.Controls.Add(new System.Web.UI.LiteralControl(FriendsIdea.first_name.ToString() + "<br/>"));
/// In IE, if a parent frame has a different domain than the child page, the session data
/// (stored in the Session object) is not preserved as a security precaution.
/// <param name="e"></param>
protected override void OnPreRender(EventArgs e)
Response.AppendHeader("P3P", "CP=\"CAO PSA OUR\"");
That takes care of all the API breaking changes. I know that was alot of annoying little changes, but I don’t control the source to thestarter kit. I had planned to create my own Silverlight Facebookstarter kit but had too many other things come up.
Test Your Application
Open a browser and point to www.facebook.com, making sure you are logged in with the “keep me logged in” option. If you are logged-out, development gets a bit messier.
Now run the application. You’ll be prompted by Facebook for permission for the application to access your information. Grant it.
You should get something that looks like this (but with your friends’ first names)
If you see something like that, great! You now have a workingFacebook application. Part 2 will cover how to integrate Silverlightinto your solution.
The code from this half of the sample is available here. Remember to change the apikey and secret to the ones in your application.