Windows Developer Center > Downloads > Facebook SDK > The Facebook Developer Toolkit and Silverlight

The Facebook Developer Toolkit and Silverlight

The Facebook Developer Toolkit fully supports Silverlight applications. Separate Toolkit libraries have been generated to support the differences between the .NET Framework and the subset of the .NET Framework that is used by the Silverlight runtime. The full functionality of the Facebook Developer Toolkit (FDT) and subsequently the Facebook APIs are supported in both versions.

Please note that this document assumes knowledge of the following:

Registering a new application (on Facebook) via the Facebook Developer module
Creating a Silverlight application and host Web site in Visual Studio

If these actions are not familiar to you, please reference the Facebook Connect Getting Started Guide, which walks through registration of a new application on Facebook.com and creates a simple ASP.NET Web site in Visual Studio.

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

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

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>
        
  </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 HTML page to your root of the Web application named "xd_receiver.htm"
  - Open xd_receiver.htm and replace all markup with the content from Appendix A
  - For more information, visit http://wiki.developers.facebook.com/index.php/Cross-domain_communication_channel
- 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:

<ListBox x:Name="StatusList" DisplayMemberPath="message" 
         Width="150 Height="150" />
<Button Content="Get Status" Width="100" Click="GetStatusButton_Click"></Button>

Code Behind:

private void GetStatusButton_Click(object sender, RoutedEventArgs e)
{
_facebookAPI.Status.GetAsync(new Status.GetCallback(GetStatusCompleted), null);        }

private void GetStatusCompleted(IList<user_status> status
                                , Object state, FacebookException e)
{
if (e == null)
      {
		// Marshall back to UI thread
      	Dispatcher.BeginInvoke(() => StatusList.ItemsSource = status);
      }
}

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.

Appendix A: xd_receiver.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  >
  <body>
    <script src=http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js
            type="text/javascript">
    </script>
  </body>
</html>

Appendix B: fblogin.js

// Verify this variable matches the Silverlight plugin ID
var silverlightPluginId = 'Silverlight1';

function facebook_init(appid) {
    FB.init(appid, "/xd_receiver.htm");
}

function isUserConnected() {
    FB.ensureInit(function() {
        FB.Connect.get_status().waitUntilReady(function(status) {
        var plugin = document.getElementById(silverlightPluginId);
        });
    });
}

function facebook_login() {
    FB.ensureInit(function() {
        FB.Connect.requireSession(facebook_getSession, true);
    });
}

function facebook_logout() {
    FB.Connect.logout(facebook_onlogout);
}

function facebook_getSession() {

    FB.Facebook.get_sessionState().waitUntilReady(function() {
        var session = FB.Facebook.apiClient.get_session();
        var plugin = document.getElementById(silverlightPluginId);
        plugin.Content.FacebookLoginControl.LoggedIn(session.session_key, session.secret, session.expires, session.uid);
    });
}

function facebook_onlogout() {
    var plugin = document.getElementById(silverlightPluginId);
    plugin.Content.FacebookLoginControl.LoggedOut();
}

function facebook_onpermission(accepted) {
    var plugin = document.getElementById(silverlightPluginId);
    plugin.Content.FacebookLoginControl.PermissionCallback(accepted);
}

function facebook_prompt_permission(permission) {
    FB.ensureInit(function() {
        FB.Connect.showPermissionDialog(permission, facebook_onpermission);
    });
}