Subtle Technology

A blog about Microsoft .NET, MVC, Ext JS, Silverlight, FaceBook, Twitter, and other technologies by Michael Urvan

Pages

Recent posts

Tags

Categories

Navigation

Archive

Blogroll

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

Part 1 : Integrating a Silverlight application with Facebook

facebooklogo45x45 In this first part of the series on integrating a Silverlight application with Facebook, I will discuss how to register a Facebook application. I will discuss the Facebook application settings, what they mean, specific settings for a Silverlight application, and how to debug a Silverlight application integrated with Facebook, since some of the Faceboook application settings can be used for this purpose.

My guide will assume you have a Facebook account, already know Microsoft .NET, and that you are familiar with Silverlight development. You may or may not already have a Silverlight application that you would like to build a Facebook application from, or you are just interested in learning how to build one. Whatever the case, hopefully you will learn more about what a Facebook application entails and how to being integrating your application with Facebook. While I will specifically address Silverlight integration with Facebook, some of the settings and solutions can be applied to building Flash application for Facebook as well. The issues addressed in this series will be applicable to any RIA.

The very first step in creating a Facebook application is to register the application. The URL for the Facebook Developers area is:

 http://developers.facebook.com/

This URL displays a welcome page and offers various blogs and links to Facebook development resources. Of special note is the link on the right side of the page, 'Documentation Wiki' .On the page is the 'Building an app is easy, Start Now' button.

image

Clicking Start Now will bring you to the Get Started page as shown below.

image

Even though I will go over some of the Facebook application settings in my guide, the information on the Get Started page is an important read. It very briefly explains the settings, and generally gives you an idea of what you will need. It explains the need for your own web hosting provider, and knowledge of programming. PHP is a very popular web technology, the one which Facebook was written in, and it has many references to integrating PHP with Facebook but less references to other technologies.

Once you have thoroughly read the Get Started page, click on the "Go to Facebook Developer App" link to begin registering your first Facebook application. Immediately after clicking the link you will be greeted with the Facebook Developer 'Allow Access' prompt:

image

Click Allow to continue. 

Now we are at the main developer landing page. Of primary note is the 'Set Up New Application' button shown below, but later under the 'My Applications' heading, your application(s) will be listed.

image

Click the 'Set Up New Application' button to continue. You will be prompted for the application name, and to accept Facebook terms. The application name will be displayed to your users and used on links to your application in Facebook. The application name will be displayed anywhere that Facebook refers to your application on menus and such. An example name would be the popular Facebook game 'Mafia Wars'. Certain terms like 'Face', 'FB', 'fb' or other words or phrases are prohibited by the Facebook Terms.

image

Once you have chosen your app's name and agreed to the terms, click on Save Changes.

If you're having trouble coming up with ideas, here is a list of ideas that users have written in with to help with your brainstorming:

  • Sports
  • Religion
  • Parenting
  • Fitness

 

 

 

 

 

 

After clicking Save Changes, you will be presented with the Application Settings page:

image

 

Down the left hand side is navigation to different settings pages for your Facebook app. We will use these later. Lets discuss the Basic settings first.

image

The Description is important, it is displayed on the Application Authorization web page that is presented to a user when they first attempt to access your application. The Application Authorization page ('Allow Access' page) that I am describing is similar to the page that I displayed earlier, having the 'Allow' or cancel buttons. The description should concisely explain what the application is and what it does.

The Icon image is displayed on the Facebook Applications toolbar that is shown at the bottom left of every Facebook user's browser window.

image

Clicking the change your icon link will bring up the icon upload page. I recommend uploading the icon in 16x16 dimensions, but if you upload an image that is larger it will automatically resize the image for you.

image

The Logo image is displayed on the Application Authorization page (Allow Access). It should be 75x75 but the system will resize the image for you if necessary.

The Developers section gives you the option of granting admin privledges to other Facebook users. The user must be your Friend in Facebook. Simply enter their name (as shown on their Facebook profile) to give them access.

The Developer Contact Email is used by Facebook staff in the event they need to contact you about your application.

The User Support Email Address (or URL) is used in several Facebook web pages, where the user is given the ability to contact the owners of the Facebook application. Some of these Facebook links are found on your application's Facebook page, which we will discuss later. The email address is not displayed to users but you can receive feedback, complaints, and questions from users.

Clicking on the right side navigation bar, select 'Authentication'

image

 

 

 

'Installable to' refers to the ability for your application to be installed as tabs on User pages and Public Facebook Pages.

The Post-Authorize Callback URL is POSTed to when a person authorizes your application. Facebook's servers will POST several fields back to this URL along with a signature. Facebook sends a number of POST parameters to your Post-Authorize Callback URL in the form of a POST request. The user authorizing your application will not be redirected to this URL (specify the Post-Authorize Redirect URL in your application's settings to configure the redirect). Facebook's servers send this request in the background. A description of the fields posted is here: http://wiki.developers.facebook.com/index.php/Post-Authorize_Callback_URL

The Post-Remove Callback URL is POSTed to when a person removes your application from their applications on their "My Applications" page. Facebook's servers will POST several fields back to this URL along with a signature. A description of the fields posted is here: http://wiki.developers.facebook.com/index.php/Post-Remove_URL

In the beginning, most developers will not need to use these URLs. Later, you will probably find some uses for them. They are optional and not required for a Facebook application to function.

Clicking on the Canvas navigation pane displays the following settings:

image

The Canvas Page is not terribly important, except maybe for SEO / search engine ranking. Note that if your Canvas Page URL is already taken by another application, you will see the following message:

image

If you see this message you will have to click your browser's back button, or on Application Settings and then Canvas navigation pane to get back and try another url name.

The Canvas Callback URL is the most important setting for your application. This is the URL that Facebook will use for the IFrame. For the purposes of this guide, we will be using an IFrame for the Render Method. If we were not using IFrame, this would be the page that the Facebook server loads the FBML from.

For the purposes of debugging your Silverlight application on Facebook, is is possible to set the Canvas Callback URL to 'http://127.0.0.1' and attach to the process. Note that you will attach to the iexplore.exe of the IFrame process, NOT the iexplore.exe process that has the same title as the web browser. The process you want to attach to will have no title and be of type 'Silverlight'.

image

The Bookmark URL and Post-Authorize Redirect URLs are where the browser will be redirected for the respective actions. You can find possible uses for these, but for our purposes we will leave these blank.

Render Method should be set to IFrame. When a user goes to your application, Facebook splits the screen into two IFrames. The bottom IFrame is pointed to the Canvas Callback URL along with several querystring parameters.  For a Silverlight application, the IFrame (along with the querystring) will only load one time, the initial page load. Whatever you enter as your Canvas Callback URL will be used for the bottom IFrame, and whatever your website displays will be shown in all its glory within it's own IFrame browser window. With this render method you can output whatever HTML, CSS, Javascript, Java, Flash, or Silverlight however you would like, just like a normal web application. If you use IFrame you do not need to be concerned with FBML.

The rest of the settings are explained well, they may affect how your web pages display within the IFrame.

Clicking on the Advanced pane on the left navigation, you will see these settings:

image

For any client side technology like Silverlight or Flash, you will want to select 'Desktop' as the application type. The reasons for this setting will be explained in my next tutorials on building Silverlight Applications for Facebook.

You will want to set Sandbox Mode to be enabled. This will prevent anyone except the application developers (as set in your Basic settings) from accessing your Facebook application.  While the Sandbox Mode is turned on, when anyone else tries to access your application's Facebook URL, they will receive a 'Page Not Found' message.

 

 

 

 

Once your settings are configured, you can navigate directly to your new application via the Canvas Page URL. For my example, I would direct my browser to http://apps.facebook.com/tictactoe

The next tutorials in this series on Integrating a Silverlight application with Facebook will discuss handling Facebook authentication and consuming the Facebook API as it relates to a Silverlight application.

Posted: Aug 26 2009, 03:01 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Facebook | Silverlight Bookmark and Share