by vbandi via VBandi's blog on 12/17/2010 8:26:44 AM
This article discusses how basic Facebook features (such as logging in, posting to a user’s wall) can be accessed from within your Silverlight application. Since we will be discussing the topic of integrating Facebook with Silverlight, understanding the article requires that you have some basic knowledge of the two.
Note: this is a guest article, written by a co-worker, Balázs Cseh. It uses an older version of the Facebook API.
Social networks have grown to be a really important factor to consider when you are building any sort of publicly available application - and the biggest one out there is almost certainly Facebook. According to some of its own statistics, it has more than 500 million (yes, that's no exaggeration) active users, half of which log on to Facebook every day. Those 500 million users each have 130 friends on average. That means, that getting any one of those 500 million to use your application, might lead to 130 more learning about it, 130 more people each having 130 more friends they can bring and so on. You will probably agree with me, that this alone is a pretty strong argument for connecting your application to Facebook.
What makes the above statistics particularly interesting is that Facebook not only has such a huge user database, it also allows us software developers to harness the power of this enormous social network.
Facebook offers a wide range of integration options. Ranging from a simple 'I like this website' button that you can place on your website to more in-depth, behind the scenes access to their social network database.
Facebook integration is a huge topic and you can find some really detailed information about it in the Facebook developer documentation. I suggest you spend some time reading that documentation, as to get an idea of what Facebook has to offer. While it is not listed in the official Facebook documentation, a .NET based Facebook SDK is available. The project and wrapper mentioned in this article uses the 3.1 version of this SDK.
To get you started on the bumpy but rewarding road of Facebook integration, we will discuss the tasks and challenges we faced when we created the Silverlight application for displaying the gigapixel panorama image created during the Hungary - San Marino football match. (The website is in Hungarian).
We needed two aspects of the Facebook API: the user database, to allow users to log-in to our site with their Facebook accounts and access to the user's Facebook wall (a kind of messaging platform where users can share messages with their friends or the world).
To get access to the Facebook API, we first have to register our application on the Facebook website. This allows us to get the application key that is required for the SDK to work properly. The application key basically identifies our application in the various requests made towards the Facebook API.
The 3.1 version of the Facebook SDK uses Facebook's old JavaScript based API. As such, the page hosting our Silverlight application must include the Facebook JavaScript file containing the Facebook API functionality and a custom JavaScript file provided by the SDK that contains some additional support code. Communication with the JavaScript is done through the HTML bridge. The SDK makes its requests to Facebook through the JavaScript code called from inside the Silverlight app and the resulting events are passed on to the proper callback functions in the application.
There are a few changes we have to make, so that the SDK can work properly. First we have to make sure that our Silverlight hosting page links the following two JavaScript files:
http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php
and
fblogin.js
The first script (FeatureLoader.js.php) is the one provided by Facebook, while the second one (fblogin.js) you will find in the SDK. We will have to modify this second script, but more on this later. Then we have to make sure, that the object tag for our Silverlight application has an ID attribute, and that this ID attribute is the same as the value set for the silverlightPluginId variable in the fblogin.js file. Finally, we have to make sure, that the xd_receiver.htm file is a part of the website hosting our Silverlight app. This page will be used for callbacks by the Facebook API.
Since at the time of creating the application we weren't yet certain which way the integration will go, we decided to create an intermediate layer, sort of a wrapper that will serve as an interface between the application itself and whatever API implementation we end up using. It turned out to be a good decision as it allowed us to make some much needed customizations to the Facebook SDK without having to modify the SDK code itself.
Since all the API calls are asynchronous, the SDK works with events that are fired whenever specific operations are completed. There were some holes however in what those events covered and that's where our extensions come in. We will be using this custom wrapper, the source code of which is available at the end of this article.
Initializing the Facebook SDK though the wrapper is rather simple, you just create a new instance of the FacebookAPI.FacebookIntegration class, passing your application key to its constructor. This will initialize a SmartBrowserSession instance, which is essentially an extension of the SDK's original BrowserSession class with some additional events. Behind the scenes, this initialization triggers several JavaScript calls made to the Facebook API that set up the browser's session, but the specifics of these are not that interesting for our case.
Once the session is initialized, we can trigger a login request by calling the LoginAsync function. Before we do that however, take a look at what it actually does. Again, the login request is passed on to JavaScript which opens Facebook's login form. If the login is successful, the SDK continues with a permission request, asking the user if he would allow our application access to his "wall". If both the login and the permission request are completed successfully, that is: the user logs in and gives us access to his "wall", some events are fired by the SDK to signal success. As you can probably see already, this is less that optimal as we are not able to display any kind of progress during the login process or give feedback on what the user did. Neither do we receive any kind of notification if the user cancels the login process at any point.
This is what our wrapper aims to solve by introducing several additional events and modifying the SDKs original JavaScript code to support these new functions.
The wrapper exposes the following main events about the login process, that we have to subscribe to:
Accessing the wall is similar to login, except that it requires the user to explicitly allow us access first. During login, we can request one or several rights for our application, which the user might or might not grant. The SDK wrapper we are using is built so it automatically requests access to the user's wall when you call the login function, but if you go deeper into the API, you can request access to different resources, or not request anything at all. Since we will need that "wall" access for our next section, it being built into the wrapper is not such a bad thing.
To post a new message to the wall, all we need to do is call the WriteStatusUpdateAsync function of the wrapper. Since it is a Async function, it depends on the WriteStatusUpdateCompleted event to signal the caller when the JavaScript API underneath has finished its work.
When there is login, there obviously must be a way to log out as well. The LogoutAsync function call initiates the logout process through JavaScript and fires the LogoutCompleted event once it is completed.
While the information above covers merely a fraction of what Facebook integration has to offer, it should be enough to get your started. You might find more information about Facebook integration and more specifically, integration with .NET/Silverlight on the following websites:
Facebook Developer Documentation
Facebook SDK Overview
Download the Facebook SDK
Download the Wrapper mentioned in this article
Original Post: Silverlight with Facebook - a practical guide to integration
The content of the postings is owned by the respective author. Silverlight Feeds is not responsible for the contents of the postings. This site is automatically generated and cannot be reviewed for abusive content. If you find abusive content on Silverlight Feeds, please contact us. Designated trademarks and brands are the property of their respective owners. All rights reserved.
