Register a Facebook Application
When creating your application on the Facebook web site, verify these settings depending on which application type you will create. Other settings may be left as the default value, populated as desired or modified later in development.
| Settings Tab | Setting | WPF | Silverlight |
| Basic | Developers | Add any team developers | Add any team developers |
| Connect | Connect URL | Leave blank | http://localhost:[port#] for development (change to your production URL for live app) |
| Advanced | Application Type | Desktop | Web |
| Advanced | Sandbox Mode | On for dev, Off for live app | On for dev, Off for live app |
After saving changes, be sure to note the API Key and Application Secret, which will be used by the FDT to identify your application when accessing the Facebook Platform APIs.
Configure a Silverlight Application
At this point you should create a Silverlight application in Visual Studio, along with a host ASP.NET Web site. Afterwards, follow the steps below to configure the project for use with Facebook and the FDT.
Adding the Facebook Developer Toolkit and Connecting to Facebook
The following steps will add the FDT to the Silverlight project and configure the solution for communication with Facebook. Please note that this walkthrough assumes a separate Web site project has been created to host the Silverlight application.
- Download and extract the Facebook Developer Toolkit from the CodePlex project home
- Set up the host Web site application for communication with Facebook:
Add the following script references to the Web page which will host the Silverlight .xap (i.e. default.aspx):
<head runat="server">
<script
src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript">
</script>
<script type="text/javascript" src="fblogin.js"></script>
<!-- Other header info -->
</head>
- In order for the Web application to communicate with the Facebook platform, a cross-domain communications channel file must be created and added to the Web application. This file references the JavaScript cross-domain library provided by Facebook which establishes and handles the transfers between Facebook and third-party Web sites. Implementation is simple:
- Add a new Jscript file to your root of the web application named "blogin.js"
- Open fblogin.js and replace the entire file with the content from Appendix B
- Edit the fblogin.js' silverlightPluginId variable value to match the ID of the Silverlight plug-in in your hosting Web page. This variable is used to locate the plug-in during authentication.
- In the project settings' "Web" tab, set the "Specific Port" entry to the same desired port number you entered when registering the application on the Facebook site. (This ensures the authentication callback directs back to your site/app.)
- Set up the Silverlight project to utilize the FDT
- In Visual Studio, add a reference to the Facebook.Silverlight.dll assembly into the Silverlight project (by browsing to the location to which the Toolkit was extracted)
- Instantiating the FDT BrowserSession object and Authenticating the user
In your Silverlight application's main page code behind, add the following private members to the class:
NOTE: Storing the API Secret within Silverlight code (which runs on the client) is NOT recommended as this code can be viewed by third party tools. The BrowserSession API only requires the API Key as shown in the code below.
private Api _facebookAPI;
private readonly BrowserSession _browserSession;
private const string ApplicationKey = "[Your Application Key]"; //temp
Add the following code to the constructor of the class:
_browserSession = new BrowserSession(ApplicationKey);
_browserSession.LoginCompleted += browserSession_LoginCompleted;
Add a login button to the XAML markup and attach a click event handler. In the handler, issue a login call to the FDT BrowserSession object. When the user clicks the button the BrowserSession will launch the Facebook authentication popup window:
_browserSession.Login();
In the browserSession_LoginCompleted event handler referenced in the constructor, add code to handle a completed user authentication. Once the _facebookAPI object is assigned, the application has everything needed to access and integrate with Facebook data:
private void browserSession_LoginCompleted(object sender, EventArgs e)
{
_facebookAPI = new Api(_browserSession);
}
Synchronous/Asynchronous API Requests
Silverlight applications are required to issue all service requests in an asynchronous manner. While this can add complications into the development phase it is worthwhile as it prevents service calls from locking the user interface. Due to this Silverlight standard the Facebook Developer Toolkit's Silverlight version (Facebook.Silverlight.dll) exposes only asynchronous REST API methods.
The code below shows a simple implementation of an asynchronous call to Facebook and display of the result in a user control. For more detailed samples of creating Silverlight applications, download the Silverlight sample applications from the Facebook Developer Toolkit CodePlex site.
XAML Markup:
Download Sample Source Code
Sample projects are available for download from the CodePlex project site at:
http://facebooktoolkit.codeplex.com/Release/ProjectReleases.aspx. The Silverlight example demonstrates how to bind Facebook objects to complex user controls via data binding, post back to the Facebook API and perform user authentication via the BrowserSession object.