Part One
A lot of people today are asking how you can add Facebook features to a Silverlight Website. Well it’s not a difficult as one might expect it just requires a little patience and time and understanding a few new terms.. Inside of facebook everything happens on the facebook “canvas” you can actually add your own web pages to this “canvas'" as well..
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.
To get started you have to log into facebook and then add the “DEV” (or developers) Application and setup your application..
It will look something like this after you are done (with developer mode turned on running in sandbox) until you get your application up and running enough to submit it to their directory for review and inclusion. Since setting this up isn’t exactly our main focus I will send you to Facebook’s resources on setting this up..
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.
Let’s start in Expression Blend 4 and make a new Silverlight Web Application Project
Now we can Select “Silverlight Application + Website” and name our application.. This one I am going to call FacebookConnectWebsite and click the “OK” button..
After this we can look at the project we created..
If we compiled and ran this application right now it wouldn’t do much other than to show us a nice blank screen..
Now comes the fun part.. Adding Facebook Support.. If you haven’t noticed we actually have two projects the silverlight project itself with all of it’s .NET goodness all in C# and a web project with an HTML page a favicon.ico and a silverllight.js file for properly loading the Silverlight application for display in the web page..
Our next bit of business will be to add facebook support? But to which project? Well you can think of the web project as a container for the Silverlight project itself so there are somethings we will have to do first to enable Facebook Connect on the web page..
The first thing we have to do is go download the Facebook SDK for .NET and install a reference to the web project portion called Facebook.dll this will give us all of our necessary hooks to integrate our .net web application with facebook.. Note this only adds facebook support to the container webpage. To add support inside the Silverlight application we have to add a .DLL to the Silverlight application as well as the web page. This can be done by adding a reference to Facebook.Silverlight.dll to the silverlight project as well.
This can be downloaded on CODEPLEX
http://facebooktoolkit.codeplex.com/
next we have to add the references to our project by including the Facebook.dll file in as a reference..
The easiest way is to right click on the Expression Blend project in the WEB project (not the silverlight XAML one) and add in the facebook.dll file from the SDK binaries that you have just downloaded from CODEPLEX.. Or if you have visual studio 2010 you can inside of Blend just right click on the project icon in the solution and select “Edit in Visual Studio) and add the reference there.
After you have completed you will see the facebook.dll project there.
Next steps…
Save out your project and reopen it in Expression Web..
After opening the project in Web, we need to add a new file to the project called XD_reciever.html which will handle all cross domain security concerns with our application.
<!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>
After this is created we save it out.. Now we are ready to make the Facebook Connect Icon appear on the page..
we open the default.aspx, index.html or whatever the starter page is.. To make the page understand Facebook with it’s own unique markup we then have to add a few lines to enable FBML or Facebook markup on the page..
in the main <HTML> tag of the home page we need to substitute a new HTML tag which will identify and extend to Facebook’s name page..
the main HTML tag should look like this…
<html xmlns=http://www.w3.org/1999/xhtml xmlns:fb="http://www.facebook.com/2008/fbml">
Next we can skip down in the html in the page and find the <HEADER> tag.. Inside the header tag (early on you need to insert this line..
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
Now we just have a few more things to do so that our facebook connect icon will show up properly..
somewhere in the <BODY> tag we can add our FACEBOOK markup now to add the facebook connect icon..
Insert this line somewhere in the body
<BODY>
<fb:login-button onlogin="window.location.reload()"></fb:login-button>
</BODY>
Now we have one more thing to do to keep this all working..After the body close tag but before the closing html TAG.. We have to add our API key that we generated when we setup our facebook application on FACEBOOK.. and tell facebook about it with some javascript and our cross-domain receiver file..
</body>
<script type="text/javascript">
FB.init("YOUR APPLICATION API KEY GOES HERE", "xd_receiver.htm");
</script>
</html>
after we have it all set up we can test it by running the app. Since this isn’t a real APP the screen capture will only show the Facebook Connect Icon and a graphic of the expression web box as an image control that I added to MainPage.XAML in the silverlight project.
Clicking on the icon will reveal an authorization pop-up screen if we have it all setup correctly..
If the application isn’t properly setup on facebook you will see an error message something like this on the authorization screen..
otherwise you are now good to go..
If you are not you should go back into facebook and the dev app and edit your site so this works..
For more information on this check out the Facebook Connect Getting Started Guide
and the MSDN pages on the Facebook Toolkit..
http://msdn.microsoft.com/en-us/windows/ee395718.aspx
More coming soon..