Build Facebook Applications with Silverlight 3 and Silverlight 4 - part 2

[Infragistics] Mihail Mateev / Friday, April 16, 2010

In this article I will demonstrate how to build Silverlight applications using the latest Facebook Developer Kit for ASP.Net from scratch

In this article I will demonstrate how to build Silverlight applications using the latest Facebook Developer Kit for ASP.Net
There are three possible ways to build Silverlight applications with Facebook Developer Kit

Build a Silverlight application, hosted in ASP.Net application, that use Facebook API for ASP.Net . This approach is very similar to described in part 1 of this article: Build a Facebook ASP.Net application using Facebook Starter Kit.
Build a Silverlight application using Facebook API for Silverlight
Build a Silverlight out-of-browser application for Facebook

Part 2 of this article describes how to build a Silverlight application that use Facebook API for ASP.Net .

Part 3 will cover Silverlight applications that use Facebook API for Silverlight.

All examples was built with Visual Studio 2010, .Net 4.0, Silverlight 4.0 and Facebook Developer Kit version 3.02

Configure an ASP.Net Application, that hosted Silverlight Content

In this article is used the latest release of the Facebook Developer Toolkit Version 3.02 http://facebooktoolkit.codeplex.com/

Assemblies are built with VS 2008 and .Net 3.5 / Silverlight 3.0

It is not a problem to rebuild the source with VS 2010 and .Net 4.0 / Silverlight 4.0

Only for Facebook.Web.Mvc solution you must install the latest version of Microsoft ASP.NET MVC 2 RTM http://aspnet.codeplex.com/releases/view/41742

There are several steps to create a Silverlight Facebook AS application using Facebook Developer Kit and API for ASP.Net

Create an ASP.Net application.
Add Reverences to Facebook ASP.Net libraries.
Add a cross-domain communication file.
Set the static port for our Web Application.
Create a new Facebook application.
Add APIKey and Secret to Web.config of your Web Application.
Change the content of the Default page.
Change the content of the master site page.
Add your SIlverlight application in the solution.
Integrate the Silverlight content in the ASP.Net application

Create a new ASP.Net Application with VS 2010

Add Facebook.dll and Facebook.Web.dll references to your ASP.Net application.

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.

More information about Cross Domain Communication you can find there: http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication

Add a new HTML page to your of the Web application named "xd_receiver.htm"

Open xd_receiver.htm and replace all markup with the following content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Cross-Domain Receiver Page</title>

</head>

<body>

</body>

</html>

Set the static port for our Web Application and save the project.

Create a new Facebook application.

Copy APIKey and Secret from Basic tab to use it your application.

Set a local application URL in Canvas tab -> Canvas Callback URL
Set a canvas page URL in Canvas tab -> Canvas Page URL
Set IFrame Size to be “Resizable”

Save the Facebook Application.

Add APIKey and Secret to Web.config of your Web Application:

</appSettings>

In Default.aspx page:

Remove the content inside <asp:Content></asp:Content> tags.

Add the new content of the Default.aspx:

<asp:Content runat="server" ContentPlaceHolderID="head">

</asp:Content>

<asp:Content ID="Content" runat="server" ContentPlaceHolderID="body">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

</div>

</form>

</asp:Content>

Add a reference to Facebook.Web assembly:

<%@ Register Assembly="Facebook.Web" Namespace="Facebook.Web" TagPrefix="cc1" %>

Add a "MasterType" directive:

<%@ MasterType VirtualPath="~/Site.Master" %>

Remove the html code from Site.Master.aspx and add the this code:

<head>

<asp:ContentPlaceHolder ID="head" runat="server"/>

</head>

<asp:ContentPlaceHolder ID="body" runat="server">

</asp:ContentPlaceHolder>

FB_RequireFeatures(["CanvasUtil"], function() {

FB.Facebook.init("0df0965cab2684a029288805523b2596", "channel/xd_receiver.htm");

FB.CanvasClient.startTimerToSizeToContent();

// For information about FB.CanvasClient.syncUrl(); see http://wiki.developers.facebook.com/index.php/IFrame_Url

FB.CanvasClient.syncUrl();

});

</script>

</body>

</html>

Change the Site.Master.cs file:

Set class SiteMaster to inherits Facebook.Web.CanvasIFrameMasterPage instead System.Web.UI.MasterPage.

Remove the Page_Load method and set a default ctor:

public SiteMaster()

{

RequireLogin = true;

}

Start your Facebook application.

Add a Silverlight application to our solution.

For this example is added version of Snake Snacks game.

Add reference to Silverlight Application in ASP.Net project.

Add <object></object> tag in Default.aspx for Silverlight application:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="Default.aspx.cs" Inherits="IFrameSnake.Default" %>

<%@ Register Assembly="Facebook.Web" Namespace="Facebook.Web" TagPrefix="cc1" %>

<%@ MasterType VirtualPath="~/Site.Master" %>

<asp:Content runat="server" ContentPlaceHolderID="head">

</asp:Content>

<asp:Content ID="Content" runat="server" ContentPlaceHolderID="body">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

</object>

</div>

</form>

</asp:Content>

Add code in Page_Load method in Default.aspx.cs file:

public partial class Default : System.Web.UI.Page

{

protected string InitParams { get; set; }

protected void Page_Load(object sender, EventArgs e)

{

Facebook.Schema.user userinfo = Master.Api.Users.GetInfo(Master.Api.Users.GetLoggedInUser());

string username = userinfo.first_name + " " + userinfo.last_name;

InitParams = "username=" + username;

}

Run the application

Part 3 of this article will demonstrate how to build Silverlight applications for Facebook using the Facebook API for Silverlight from the latest Facebook Developer Kit.