Being the nerd that I am, I think that data visualization can be cool, but what this intern at Facebook did is REALLY cool. Click on the image above to read more about it.
In my last couple posts, I went over logging a user into Facebook via Facebook Connect, getting that user’s information and then grabbing some of the profile pictures for their friends. All of this was quite simple and brought to you by the Silverlight Facebook SDK. This post will grow more on the first post and will show you how to publish to the user’s Wall and News Feed as well as update their status.
One of the key things that any Facebook application should do is publish messages to the user’s stream on their Wall and News Feed. This helps spread the word that people are actually using your application as well as showing scores and updates for that user and giving some insight into why people should use your app. The first part of this equation revolves around the privacy settings that Facebook has in place. Since we are going to be doing more than just getting information, we will need the user of our application to grant extended permissions to us.
There are a couple of ways to do this, but the easiest one requires us to just add some javascript. We haven’t had to do anything to our javascript files yet, but I assure you this will be quick and painless. In your application, locate the fblogin.js file. This is usually located in the root of your web project, but in my examples has been put in a scripts folder that located at the root of the site. Once you crack that bad boy open, locate the facebook_init method. Inside this method there will be a FB.init method call which is part of the Facebook Javascript Client Library. Update this method as follows:
// original method callFB.init(appid, "/xd_receiver.htm");// updated method callFB.init(appid, "/xd_receiver.htm", { permsToRequestOnConnect: "publish_stream"});
The change we are making is to add in a comma seperated list as a parameter to our FB.init method that tells Facebook what extra permission(s) we want the user to authorize. In this example, we are just passing in publish_stream which will allow us to publish the user’s news stream and wall as well as update their status. A complete list of the extra permission that you can request are here. Also, once the user has authorized your application, they won’t be asked again unless they remove the setting in their profile.
So once the user has given us permission, we use the Facebook.Rest.Api.Stream.PublishAsync method call to publish to the user’s stream. When doing this, we have a couple of options. We can go the boring route of just putting up a message, or we can get fancy and add in things like links, images, and videos. The simple call looks something like this:
_facebookApi.Stream.PublishAsync(message, StreamPublishCompleted, null);
where message is just a string that we pass in the for the message the we would like to post. To add in attachments and a littler more detail, some more work is involved:
// create new attachmentattachment a = new attachment();a.name = "This is a Test";a.caption = "This is cool";a.href = "http://www.evanjohnston.com";a.description = "Here is a description that goes with this post. Here is more content to make this longer.";// create new attachment mediaattachment_media_image i = new attachment_media_image();i.href = "http://www.evanjohnston.com";i.src = "http://www.evanjohnston.com/misc/cheerssmaller.jpg";i.type = attachment_media_type.image;// create new list of attachment mediaList media = new List();media.Add(i);// add the media to the attachmenta.media = media;// this could be the id of a user to post the message tostring targetId = string.Empty;// create message stringstring message = "Testing publishing to the stream from the Silverlight Facebook SDK.";// make the api call_facebookApi.Stream.PublishAsync(message, a, new List(), targetId, 0, StreamPublishCompleted, null);
Since there is quite a bit going on here, I’ll just defer to the Facebook Wiki on this topic for a more thorough explanation. The gist of what is happening is that we are creating an attachment for the message and then adding an image to this attachment so that there is more to publish than just text.
To show another example of what we can do once the user has give our application extended permissions, we will go ahead and update their current status as well. To do this we go with the Facebook.Rest.Api.Status.SetAsync method call. This call is straightforward and looks like this:
_facebookApi.Status.SetAsync(status, SetStatusCompleted, null);
where the status variable is a string that contains the text we want to use. It’s just that simple.
So in this post we expanded on our last foray into the Facebook SDK and were able to show what is required to actually publish information to the user’s status and news feed. Hope you enjoyed this brief look at the Silverlight Facebook SDK.
Here is a download of a small demo application that uses the steps that were just discussed. In order to run the application, you will need to set up your own Facebook application. Until next time, Sláinte!
In my last post, I showed how easy it was to have the user log in to their Facebook account via Facebook Connect using the Facebook SDK for Silverlight and to then retrieve that user’s information. This post will take the working parts from Part I and expand on it by showing how to get the user’s list of friends and then grabbing the latest profile picture for those friends. I also hope to have a full working version of the game up by early next week that will be available on Facebook. I will post a link here when it’s available.
So in the last post, we got our logged in user, now let’s go find all their Facebook friends. To accomplish this, we will call the Facebook.Rest.Api.Friends.GetAsync method and we will pass in the uid of our user as well as a callback method that will handle the return from the api.
// here is the code for this method call_facebookApi.Friends.GetAsync((long)_currentUser.uid, GetFriendsCompleted, null);
Once we have the list of friends, we go out and use the Facebook.Rest.Api.Photos.GetAlbumsAsync method to retrieve all of the photo albums for each friend. For this demo, we will just grab the photo albums of the first twenty friends, in case they’re really popular. The GetAlbumsAsync methods takes in the uid for the friend we want to use and a callback method.
void GetFriendsCompleted(IList uids, object state, FacebookException e){ if (e == null) { Dispatcher.BeginInvoke(() => { this.txtStatus.Text = "Loading Photos..."; // get the albums for our first 20 friends for (int x = 0; x <; 20; x++) { _facebookApi.Photos.GetAlbumsAsync(uids[x], GetAlbumsCompleted, uids[x]); } }); } else { Dispatcher.BeginInvoke(() => MessageBox.Show("Error getting friends: " + e.Message)); }}
So now that we have our list of photo albums, we need to get the pictures in each album. With the albums retrieved, the first album in the list is usually the Profile Photos. To do this, we will use the Facebook.Rest.Api.Photos.GetAsyc method. We’ll pass in an empty string for the subj_id, album id at index 0, new string array for the list of photo ids, and a callback method.
void GetAlbumsCompleted(IList albums, object state, FacebookException e){ if (e == null) { Dispatcher.BeginInvoke(() => { if (albums.Count > 0) { // get the photos from the first album, which is usually the profile pictures _facebookApi.Photos.GetAsync(string.Empty, albums[0].aid, new List(), GetPhotosCompleted, state); } }); } else { Dispatcher.BeginInvoke(() => MessageBox.Show("Error getting albums: " + e.Message)); }}
Finally, this last callback will handle the photo’s that were returned from each query. The person’s most recent profile photo is located at index 0. To display these photos, we will create a new Image and then add it to a user control that was created to display the photos.
void GetPhotosCompleted(IList photos, object state, FacebookException e){ if (e == null) { Dispatcher.BeginInvoke(() => { // create a new image Image i = new Image(); i.Source = new BitmapImage(new Uri(photos[0].src)); i.Width = 140; i.Height = 140; i.Stretch = Stretch.Uniform; i.Margin = new Thickness(0, 0, 5, 0); // add the image to our user control this.ucPhotoAlbum.AddPhoto(i); }); } else { Dispatcher.BeginInvoke(() => MessageBox.Show("Error: " + e.Message)); }}
So in this post we expanded on our last foray into the Facebook SDK and were able to retrieve the user’s list of friends and then get the latest profile picture for those friends. Hope you enjoyed this brief look at the Silverlight Facebook SDK.
Here is a download of a small demo application that uses the steps that were just discussed. In order to run the application, you will need to set up your own Facebook application. Until next time, Sláinte!
A couple of months ago, The Silverlight Blog announced the Facebook SDK for Silverlight. I have been wanting to get a post up about using this SDK, but it has taken a while. Anyway, this is part one in what will be a three part series of a basic overview of using a little bit of what the Facebook SDK has available.
Gathering profile and friend list information is made quite simple in the SDK, so I thought that an easy demo application would be an implementation of the childhood game Memory. However there will be a slight twist. Instead of using the same picture to match, the game will randomly select two profile pictures from your friends and use those for you to determine the match. I will post a link to a demo of the application once there’s a full working version.
The first step in getting this game started was being able to get the data from Facebook, and this is done using Facebook Connect. The SDK makes this very simple. Using the Facebook.Session.BrowserSession object, you simply create a new instance of a browser session with your Facebook application key, add a login completed event handler, and call BrowserSession.Login. This will open up a popup window with the Facebook connect login.
BrowserSession _browserSession;_browserSession = new BrowserSession(APPLICATION_KEY);_browserSession.LoginCompleted += LoginCompleted;_browserSession.Login();
Now that the user had logged in to their Facebook account, we can go ahead and get the user id of the logged in user. First we create a new instance of the Facebook.Rest.Api class and pass in the new browser session that was just created. The method call used is Users.GetLoggedInUserAsync and we will pass in a callback for when the operation is complete and any sate we wish to pass along in an object. In this case we will just pass null.
// we use a private member variable so that it can be re-usedprivate Api _facebookApi;// create the new api instance and call the GetLoggedInUserAsync method_facebookApi = new Api(_browserSession);_facebookApi.Users.GetLoggedInUserAsync(GetLoggedInUserCompleted, null);
Next we need to handle the callback from the GetLoggedInUserAsync call. The callback method takes in a long parameter for the Facebook user id, an object for any state that you want to pass along, and any FacebookExceptions that may have occurred. Once the user id has been returned, we will make another call to the Facebook.Rest.Api class to get the user’s information. This method is Users.GetInfoAsync where we will pass in the returned user id and a callback method. We will again use null for the state parameter.
void GetLoggedInUserCompleted(long userId, object state, FacebookException e){ // check that no errors have occurred if (e == null) { _facebookApi.Users.GetInfoAsync(userId, GetUserInfoCompleted, null); } else { // if any errors occurred, invoke a call back to the UI thread and show the error message Dispatcher.BeginInvoke(() => MessageBox.Show("Error getting logged in user:nn" + e.InnerException.Message)); }}
Now that we have the current users information, we can get the information we want to pull from their profile. For this demo we will just use their name and a small version of their current profile picture. We will also set a _currentUser object that stores the user’s information that we will use later in the application
void GetUserInfoCompleted(IList<user> userDetails, object state, FacebookException e){ if (e == null) { Dispatcher.BeginInvoke(() => { // set our user object this._currentUser = userDetails[0]; // set user information data context this.ucUserInformation.DataContext = _currentUser.current_location; }); } else { // if any errors occurred, invoke a call back to the UI thread and show the error message Dispatcher.BeginInvoke(() => MessageBox.Show("Error getting user info:nn" + e.Message)); }}
So with these couple Facebook SDK api calls, we have created a new Facebook Connect session and retrieve the current users information. Personally I think that this takes one more step than necessary, but the calls are pretty straightforward. The next post will go over getting the list of friends for our current user and then getting the Profile Picture photo album for each friend.
Here is a download of a small demo application that uses the steps that were just discussed. In order to run the application, you will need to set up your own Facebook application. Until next time, Sláinte!