Blog

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

[Infragistics] Mihail Mateev / Thursday, April 8, 2010

There are two ways to create a facebook application with Silverlight:

  1. Create ASP.Net Web site using Facebook  API for ASP.Net from Facebook Developer Toolkit : http://facebooktoolkit.codeplex.com/  and add a Silverlight project to solution
  2. Create Silverlight application using Facebook API for Silverlight from Facebook Developer Toolkit

Documentation  for Facebook API for Silverlight is not proposed in codeplex. There are only some samples.

The easiest way to build a Silverlight application for Facebook is to use a C# VS.Net 2008 Started Kit, created from Steve Trefethen

You can download a Facebook  C# VS.Net 2008 Started Kit here: It is based on Facebook Developer's Toolkit v2.1.

C# VS.Net 2008 Started Kit Requires VS 2008 / Silverlight 3.0

It is very easy to convert created solution to VS 2010 with .Net 4.0 , Silverlight 4 and continue working on the solution.

There are several steps to create a Facebook ASP.Net application using Facebook Starter Kit:

  1. Download the Facebook Developer Toolkit
  2. Download and install Facebook Starter Kit (it adds a project template for new Facebook Starter Kit (Web Site)
  3. Start VS.NET 2008 (Facebook Developer Toolkit v2.1 requires .NET v3.5)
  4. Select File|New Web Site... (C# Language)|Facebook Starter Kit v2.1
  5. Create a new application on Facebook
  6. Configure your Facebook application
  7. Update your web.config
  8. Start coding!

Requirements:

  1. C# language knowledge
  2. VS.NET 2008 with .NET v3.5 (VS 2010 can't work with imported project templates from Facebook Starter Kit , but VS 2008 Facebook applications can be converted and used from VS 2010)
  3. Facebook Starter Kit

Create a new Application on Facebook:

  1. Sign up for a Facebook account
  2. Add the Developer application http://www.facebook.com/developers/ to your account

On the Facebook developers page click the Set Up New Application

 

Enter the name of your new facebook application  and agree to the TOS and click Create Application: 

Look at the Basic Tab of the new facebook application:

You’ll need to paste API Key and Secret values from your facebook developer application page to
Web.Config from your ASP.Net Web Site later.

Create the Visual Studio Solution

Open up Visual Studio 2008 and create a new web site:

For C# Language there select Facebook Starter Kit v2.1 project template

 

Set appKey and Secret in Web.Config

 
<add key="APIKey" value="051327958771b4bb33c497185df1f776"/>
<add key="Secret" value="6edab6c4349ef0ef74d2daa68b63c756"/>


Set a static port for our Web Site

 We need to keep Visual Studio from changing the numbers around. Select your web site in the project explorer and change “Use dynamic ports” to False.

 

 

Configure the Facebook Application

In the Facebook Developers app, select your new application and view the property page for it. On that page, select “Edit Settings”. Here are the key settings you’ll need:


 

 Callback URL :This is the URL to your site on your own server. Do not leave off the trailing slash or you’ll likely get the unfortunate result of an infinite loop of redirects.

http://apps.facebook.com/myfirstf_acebookapp/


Canvas Page URL: This is the unique URL for your application on Facebook. Logically, this will map directly to the callback URL.

http://localhost:43700/MyFirstFacebookApp/


Render Method: FBML/iframe radio buttons For a Silverlight app that you wish to be able to debug locally, you’ll need to use an iframe.
This is a plus in that you can shove most any content inside the iframe. It’s a minus in that you lose some of the interesting facebook
FBML-only functions like the share button.

For this example, choose iframe

 Icon: Create a 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 the short story format for stories posted by your application

Logo: This is the larger logo you’ll see in medium/long stories as well as in other places in facebook.
This should bear some resemblance to the small icon so that they are obviously connected.

On the Basic tab Set Help URL -> http://hosts_file_alias/<your_app_name>/help/
http://localhost:43700/MyFirstFacebookApp/help/

Set Privacy URL -> http://hosts_file_alias/<your_app_name>/privacy/
http://localhost:43700/MyFirstFacebookApp/privacy/

Set Terms of Service URL -> http://hosts_file_alias/<your_app_name>/TOS.htm
http://localhost:43700/MyFirstFacebookApp/TOS.htm

Click Save Changes

On the Authentication tab (Optional) Set the Post-Remove Callback URL to http://hosts_file_alias/<your_app_name>/settings/RemoveApp.aspx
http://localhost:43700/MyFirstFacebookApp/settings/RemoveApp.aspx

Click Save Changes 

Run the Facebook ASP.Net Application

When you test your application you need to log in to your facebook account:

Allow application access  to your profile in facebook.

Run the Facebook ASP.Net Application

There will be default ASP.Net facebook application that creates a  ComboBox with list of your friends and shows th profile picture of the selected friend.

 Add the Silverlight Project


Add a new Silverlight Application project to the solution.

 Confirm default options for new Silverlight Application.

 

 Confirm using of Silverlight application in Web Site -> Property Pages

 

Confirm using of  the current page in Web Site -> Property Pages -> Start Options

 

Edit Default.aspx

Remove the old content inside <asp:Content>...</asp:Content> tags and add there: 

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="height:100%;">
     <object id="Silverlight1" type="application/x-silverlight-2"  data="data:application/x-silverlight," width="800" height="500"> 
        <param name="source" value="ClientBin/SilverlightFacebookApp.xap"/> 
        <param name="InitParams" value="<%=InitParams %>" />
      </object>
</div> 

Edit Default.aspx.cs
Remove the old content inside Page_Load method:

 protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
   }
}

Add content in SilverlightFacebookApp->MainPage layout:

<Grid x:Name="LayoutRoot">
        <TextBlock Text="My First Facebook Application!!!"/>
</Grid>

Run the project:

Converting created with Visual Studion 2008 Facebook applications to Visual Studio 2010:

You can convert to Visual Studio 2010 created via Facebook Starter Kit solution in each stage of development.

It is possible to add new SIlverlight 4.0 application to solution or converted existing Silverlight 3.0 application project.

Demo:

Snake Snacks Game like a facebook application:

 

  1.  Snake Snacks Game demo application demonstrates how to use a Silverlight application from facebook:
  2. SnakeSnacks silverlight application is created like a simple implementation of Snake Snacks for SIlverlight.
  3. FacebookSnake solution is created using a Facebook Starter Kit.
  4. Add the SnakeSnacks to solution.
  5. Add a code to pass user data from facebook API  for ASP.Net to SIlverlight application :

in Default.aspx.cs add InitParams property and in Page_Load code to get user name via facebook API
and save it to InitParams property.


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

{

   protected string InitParams { get; set; }

      protected void Page_Load(object sender, EventArgs e)

      {

      if (!IsPostBack)

      {

               

facebook.Schema.user userinfo = Master.API.users.getInfo(Master.API.uid);

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

            InitParams  = "username=" + username;

      }

      }

}

in Default.aspx for object that represents the Silverlight application add param with name "InitParams"

<object id="Silverlight1" type="application/x-silverlight-2"  data="data:application/x-silverlight," width="800" height="500"> 

    <param name="source" value="ClientBin/SnakeSnaks2.xap"/> 

    <param name="InitParams" value="<%=InitParams %>" />

</object>

Add a new DependencyProperty named CurrentUserName in Page.xaml.cs in SnakeSnacks application:

public static readonly DependencyProperty CurrentUserNameProperty = DependencyProperty.Register("CurrentUserName", typeof(string), typeof(Page), null);

 

public string CurrentUserName

{

    get { return (string)this.GetValue(CurrentUserNameProperty); }

    set { this.SetValue(CurrentUserNameProperty, value); }

}

In Page.xaml Application in App.xaml.cs bind the text of TxtUser TextBox to CurrentUserName property:

<TextBox Grid.Row="3" HorizontalAlignment="Stretch" IsTabStop="False" x:Name="TxtUser" IsReadOnly="True" Height="30" Text="{Binding ElementName=SnakePage, Path=CurrentUserName}"/>

In Silverligh Application in App.xaml.cs edit Application_Startup override:

private void Application_Startup(object sender, StartupEventArgs e)

{

    var page = new Page();

    this.RootVisual = page;

    string username = e.InitParams["username"];

    page.CurrentUserName = username;

}

Part 2 of this article will demonstrate how to build Silverlight applications for facebook
using the latest Facebook Developer Toolkit and the facebook API for Silverlight.

You can download Demo sample there: