Using the Facebook Developer's Toolkit To Build A Facebook Browser in C#

Amazon.com Widgets

In this article I'm going to explain how I used the Facebook Developer's Toolkit 3.0 to access the Facebook API when building the web browser known as Highway. The Facebook Developer's Toolkit is a .NET wrapper around the Facebook API. (The actual Facebook API was written in PHP).

Background

The Highway program itself is a Windows Forms application. The idea behind Highway was to create a web browser that would be seamlessly integrated to Facebook in order to allow users to access some of the Facebook functionality without actually having to visit the Facebook web site.

Highway is written in C#. As mentioned earlier, it's a Windows Forms application. However, the Facebook Developer's Toolkit can be used from an ASP.NET application as well. With the exception of the login functionality, all of the code in this article can be used either way. (The login functionality I'll be illustrating is for Facebook Desktop applications, which is loosely analagous to Windows Forms applications.) You can read more about Highway and download it if you wish from my web site. Highway is offered free of charge. The Facebook Developer's Toolkit 3.0 can be downloaded from the Codeplex web site. Links to both sites are provided at the end of this article.

This article assumes that the reader has a good grasp of the C# programming language, as well as how to reference third party assemblies. Familiarity with Facebook and its "lingo" is also assumed. I won't be discussing how the web browser control works, nor will I be discussing design decisions taken when creating Highway. The article is meant solely as a tutorial on how to implement specific Facebook functionality using C# and the Facebook Developer's Toolkit 3.0.

Some of the Facebook related features of Highway that I'll be explaining and providing code for include:

Posting a message on the user's wall (also known as updating your status)
Posting a link to the current web page (the page currently loaded in the browser control) on the user's wall
Accessing the user's Facebook friends' names and photos
Accessing the user's Live Feed

Preparation

Before we get into the actual code, there are a couple of things we need to address. First, we need to install and reference the Facebook Developer's Toolkit assemblies. There are several of them, but we're only concerned with three; Facebook.dll, Facebook.Web.dll, and Facebook.Winforms.dll. A link to the Facebook Developer's Toolkit download is included at the end of this article.) You will need to reference these three assemblies in your project.

The second thing we need to address is to register your application with Facebook. In order for your application to be permitted access to the Facebook API, you will need to register it with Facebook. You can do this by going to the Developer App in Facebook, at http://www.facebook.com/developers . For a desktop application like Highway, you will need to indicate that the application is a desktop app, and you will need to supply two different callback url's, one for login success (for example http://[yourdomain]/FB/login_success.aspx) and one for failure (for example http://[yourdomain]/FB/login_failure.aspx). You will need to host these url's on a web server. Once your application is registered, Facebook issues an API Key, which you can find right there in the application's profile. The API Key identifies your application to Facebook, and will need to be provided each time you call an API function. There is a bit more to the registration process, but those are the crucial pieces. Facebook's web site has pretty good documentation at the above url to help you with the rest if necessary.

Here We Go

The first thing we need to do is log the user in to Facebook. While it is possible to store user login information and log the user in progrmatically (we allow users that option in Highway), it is far simpler to leverage Facebook's own login screen. The first code block below shows the login_success.aspx.cs file which, as mentioned earlier, is where Facebook redirects your user upon successful login. It receives a "session" parameter with the request and assigns its value to a label control prior to being sent back to the user. Here's the code:

    
namespace MHT_Web_Site
{
    public partial class login_success : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            labelSess.Text = Request.QueryString["session"];
        }
    }
}

The login_failure.aspx file will get called if login fails. You can handle that in any way that makes sense for your application.

I've created a static class called FBSession to hold the user's session info after he's been logged in:

    
using Facebook.Session;
using Facebook.Rest;

namespace Highway
{
    static class FBSession
    {
        private static string _v;
        private static string _format;
        private static string _call_id;
        private static string _session_key;
        private static string _sig;
        private static string _uid;
        private static string _expires;
        private static string _secret;

        private static bool _fbLoggedIn;

        private static DesktopSession _deskSession;
        private static Api _facebookAPI;

        public static string V
        {
            get
            {
                return _v;
            }
            set
            {
                _v = value;
            }
        }

        public static string Format
        {
            get
            {
                return _format;
            }
            set
            {
                _format = value;
            }
        }

        public static string Call_id
        {
            get
            {
                return _call_id;
            }
            set
            {
                _call_id = value;
            }
        }

        public static string Session_key
        {
            get
            {
                return _session_key;
            }
            set
            {
                _session_key = value;
            }
        }

        public static string Sig
        {
            get
            {
                return _sig;
            }
            set
            {
                _sig = value;
            }
        }

        public static string Uid
        {
            get
            {
                return _uid;
            }
            set
            {
                _uid = value;
            }
        }

        public static string Expires
        {
            get
            {
                return _expires;
            }
            set
            {
                _expires = value;
            }
        }

        public static string Secret
        {
            get
            {
                return _secret;
            }
            set
            {
                _secret = value;
            }
        }

        public static bool FbLoggedIn
        {
            get
            {
                return _fbLoggedIn;
            }
            set
            {
                _fbLoggedIn = value;
            }
        }

        public static DesktopSession DeskSession
        {
            get
            {
                return _deskSession;
            }
            set
            {
                _deskSession = value;
            }
        }

        public static Api FacebookAPI
        {
            get
            {
                return _facebookAPI;
            }
            set
            {
                _facebookAPI = value;
            }
        }

        public static void Clear()
        {
            _v = "";
            _format = "";
            _call_id = "";
            _session_key = "";
            _sig = "";
            _uid = "";
            _expires = "";
            _secret = "";

            _fbLoggedIn = false;
        }
    }
}

Next, we'll write the code that calls the Facebook login functionality and retrieves the response from login_success.aspx. All we need to do is navigate to Facebook's web site. After navigation, in the browser control's Document_Complete, event we check for the existence of the labelSess control, then parse its value. The format of the value is a JSON string. Note that the FBSession class is immediately populated:

    
private void login()
{
    webBrowser1.Navigate(new Uri("http://www.facebook.com")); 
}

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    if (webBrowser1.ReadyState == WebBrowserReadyState.Complete)
    {

        HtmlElement elem = webBrowser1.Document.GetElementById("labelSess");
        if (elem != null)
        {
            FBSession.Clear();
            Cursor.Current = Cursors.WaitCursor;
            string response = elem.InnerText;

            response = response.Replace("{", "");
            response = response.Replace("}", "");
            response = response.Replace("\"", "");

            string[] pairs = response.Split(',');

            foreach (string pair in pairs)
            {
                string[] field = pair.Split(':');
                switch (field[0])
                {
                    case "v":
                        FBSession.V = field[1];
                        break;
                    case "format":
                        FBSession.Format = field[1];
                        break;
                    case "call_id":
                        FBSession.Call_id = field[1];
                        break;
                    case "session_key":
                        FBSession.Session_key = field[1];
                        break;
                    case "sig":
                        FBSession.Sig = field[1];
                        break;
                    case "uid":
                        FBSession.Uid = field[1];
                        break;
                    case "expires":
                        FBSession.Expires = field[1];
                        break;
                    case "secret":
                        FBSession.Secret = field[1];
                        break;
                }
            }
        }
    }
}

Now that we've got the user logged in and we've got his user id and other session info in hand, we can proceed to the fun stuff!

Posting a message on the user's wall (also known as updating your status)

A Facebook user can post messages to his or her wall for all their friends to see. This action is also know as updating your status. This is probably the simplest of all the functions we'll be looking at. Take a look at the code below. An explanation follows.

private void ConnectToFacebook()
{
    long user = FBConnect();
    postStatus(user);

}

private void postStatus(long aUser)
{
    user loggedInUser = FBSession.FacebookAPI.Users.GetInfo(aUser);

    string message = "Hi Friends!";
    FBSession.FacebookAPI.Stream.Publish(message);

}

public long FBConnect()
{
    FBSession.DeskSession = new Facebook.Session.DesktopSession(Properties.Settings.Default.APIKey, false);
    FBSession.FacebookAPI = new Facebook.Rest.Api(FBSession.DeskSession);
    FBSession.FacebookAPI.Session.SessionKey = FBSession.Session_key;
    FBSession.FacebookAPI.Session.SessionSecret = FBSession.Secret;

    return FBSession.FacebookAPI.Users.GetLoggedInUser();
}

The ConnectToFacebook() function is pretty straightforward. The first method called is FBConnect(), which returns a valid Facebook session. Within the FBConnect() method we begin to make use of the FBSession object we populated upon login to instantiate a DesktopSession object, passing in the API Key for the application, along with a boolean value which represents whether or not our application uses WPF. For our purposes we can pass false for this parameter. Note that there are a couple of session types available that correspond to the different Facebook application types. Although we are using the DesktopSession, an FBMLCanvasSession object is available as well for web applications.

Next, we instantiate an Api object by passing the DesktopSession to its constructor. We then assign our stored Session_key and Secret values to the Api's Session.SessionKey and Session.Secret attributes, call the Facebook.Rest.Api.Users.GetLoggedInUser() method to obtain the user's user id, and we return it to the calling function.

Back in ConnectToFacebook() we now call postStatus(), passing in the user id returned by FBConnect(). Within postStatus(), we call Users.GetInfo() and pass the user id. Users.GetInfo() will return a Facebook.Schema.user object. Finally, we make a call to Facebook.Rest.Api.Stream.Publish(), passing a string containing the message that the user wants to post to his wall.

Posting a link to the current web page (the page currently loaded in the browser control) on the user's wall

Next up, we're going to allow the logged in user to post a link to his own wall. I'm going to make a call to FBConnect() again, but for the sake of time and space (Einstein would be proud), I won't include the listing for that function again. In Highway, I use this function to allow the user to post a link to the web page he is currently looking at, referencing the webBrowser control's Url property. However, you can actually pass in any Url depending on the need of your application and it'll work just as well. Here's the code:

    
private void ConnectToFacebook()
{
        long user = FBConnect();
        postLink(user);

}

private void postLink(long aUser)
{
        user loggedInUser = FBSession.FacebookAPI.Users.GetInfo(aUser);

        string comment = "Check out this web site!"
        FBSession.FacebookAPI.Links.Post(Convert.ToInt64(FBSession.Uid), webBrowser1.Url, comment);
}

Pretty simple stuff. We're just calling FBConnect() to get the logged in user's user id, then within postLink() we call Users.GetInfo() to grab the Facebook.Schema.user object. Then we call the Facebook.Rest.Api.Links.Post() method, passing in the user id as an Int64, the url of the site we want to post the link for, and the user's comments, if any. Facebook actually examines the document returned by the Url and creates its own summary of the site for display based on the Title tag and the Description meta tag, so there's no need to worry over that.

Accessing the user's Facebook friends' names and photos

Now we'll get a look at how to access information on the logged in user's friends. For simplicity's sake, I'll get them, access a few properties of each friend, and display them in an html table.

private void ConnectToFacebook()
{
    FBConnect()
    showFriends();
}
    
private void showFriends()
{
    long llUser = FBSession.FacebookAPI.Users.GetLoggedInUser();
    user loggedInUser = FBSession.FacebookAPI.Users.GetInfo(llUser);
    IList<user> friends = FBSession.FacebookAPI.Friends.GetUserObjects();
    string userFullName = loggedInUser.name;

    webBrowser.DocumentText = GenFriendsTable(friends, loggedInUser);
}

private string GenFriendsTable(IList<user> aFriends, string aUserFullName)
{
    StringBuilder sb = new StringBuilder();

    sb.Append("<html>");
    sb.Append("<body style=\"font-family:arial;\">");

    sb.Append("You are currently logged in as " + _userFullName + ".<br />");
    sb.Append("You have " + _friends.Count + " Facebook friends.<br />");

    sb.Append("<br />");

    sb.Append("<table>");

    foreach (user friend in aFriends)
    {
        sb.Append("<tr>");
        sb.Append("<td>");
        sb.Append("<a href=\"" + friend.profile_url + "\" target=\"_profile\">");
        sb.Append("<img src=\"" + friend.pic_square + "\" width=\"50\" height=\"50\" alt=\"" + friend.name + "\" />");
        sb.Append(friend.name);
        sb.Append("</a>");
        sb.Append("</td>");
        sb.Append("</tr>");
    }

    sb.Append("</table>");
    sb.Append("</body>");
    sb.Append("</html>");

    return sb.ToString();
}

If you want, you can even obtain the user id for each friend, and if they authorize your application, in turn use it to access their friends.

Accessing the user's Live Feed

Accessing the user's Live Feed actually involves passing a List object containing the id's of the user and all of his friends, to the Facebook.Rest.Api.Stream.Get() object. The Stream.Get() object takes three other parameters; DateTime beginDate, DateTime endDate, and int maxCount, which allow you to control the date range and maximum number of items returned.

The code shown in the GenNews() function below illustrates how to iterate through the collection of post.stream_post objects contained in the stream_data object that the Stream.Get() returns. It also shows you how to determine who the "actor" for each post was. The actor could be the logged in user himself, or any of the friends included in the list that was passed to Stream.Get(). The stream_post object has quite a few properties and methods which will allow you to duplicate Facebook's Live Feed page (or improve upon it). Those properties can be found in the Facebook Developer's Toolkit documentation, or simply by using Intellisense.

private void ConnectToFacebook()
{
    FBConnect();
    long llUser = FBSession.FacebookAPI.Users.GetLoggedInUser();
    user loggedInUser = FBSession.FacebookAPI.Users.GetInfo(llUser);
    loadNews();
}

private void loadNews()
{
    IList<user> friends = FBSession.FacebookAPI.Friends.GetUserObjects();
    List<long> ids = new List<long>();
    foreach (user uObject in friends)
    {
        ids.Add((long)uObject.uid);
    }
    ids.Add(Convert.ToInt64(FBSession.Uid));
    stream_data newsfeed = FBSession.FacebookAPI.Stream.Get(ids, DateTime.Now.AddDays(-7), DateTime.MaxValue, 50);
    string news = GenNews(newsfeed);
    webBrowser.DocumentText = news;
}

private string GenNews(stream_data aNewsFeed)
{
    StringBuilder sb = new StringBuilder();

    long llUser = FBSession.FacebookAPI.Users.GetLoggedInUser();
    user loggedInUser = FBSession.FacebookAPI.Users.GetInfo(llUser);
    sb.Append("<html>");
    sb.Append("<body>");

    sb.Append("You are currently logged in as " + loggedInUser.name + ".");

    foreach (stream_post post in aNewsFeed.posts.stream_post)
    {
        if (post.actor_id == Convert.ToInt64(FBSession.Uid))
        {
            poster = loggedInUser;
        }
        else
        {
            IEnumerator<user> iter = friends.GetEnumerator();
            while (iter.MoveNext())
            {
                if (((user)iter.Current).uid == post.actor_id)
                {
                    poster = (user)iter.Current;
                    break;
                }
            }
        }
    }
    sb.Append("</body>");
    sb.Append("</html>");

    return sb.ToString();
}

We make use of the stream_data object in the GenNews() method. The stream_data objects contains a posts.stream_post collection. Each item in the collection represents a post in the user's Live Feed. As we iterate through the collection, the first thing we do for each post is check the user id of the user who made the post (contained in the post.actor_id property) and compare it to the user id of the logged in user. If they are equal, then we've already got the actor's info, and we assign it to the poster user object. If not, we locate the actor id in the logged in user's friends list and assign his user object to the poster user object.

I hope that with this article I've been able to shed some light for you on the subject of using the Facebook Developer's Toolkit to interact with Facebook from a .NET application.

For more information about Highway and to download the program, visit our web site at http://www.murrayhilltech.com/highway.aspx .

To read more about the Facebook Developer's Toolkit and for instructions on downloading and installing it, visit the Codeplex web site at http://facebooktoolkit.codeplex.com .

Dave Verschleiser
Murray Hill Technologies

Date	Comment
No records to display.

Enter your comments here:

Enter your name:

===============================================================================================================