ON Blog » ASP.NET MVC

Facebook, C# and ASP.NET MVC – Updated code samples for places, wall and offline access

onishimura — Mon, 15 Nov 2010 22:09:51 +0000

The big news a couple of weeks ago was the opening up of the Facebook Places API and launching a Deals Service as well. The Places API is pretty straightforward to work with so I’ve updated the Sample MVC App to show an example of calling it, specifically getting a user’s checkins and search for places given a search term, latitude and longitude, and distance. I’ve also had a few requests to show a few other calls, so I’ve included a sample for displaying a user’s wall (feed) and how to use offline_access to retrieve a user’s wall even when they aren’t logged in. Additionally, I’ve refactored some of the code a bit to be a little cleaner, but I’ve only written samples using the official C# SDk (I assume thats what everyone’s using at this point).

Setting the proper extended permissions

We’re going to be using two new extended permissions here, checkins and offline_access, so the first change we need to make is in Home/Index.aspx.

The first time you log in after making these changes you should get prompted with a confirmation dialog from facebook.

Places and checkins

The code to get a user’s checkins unsurprisingly makes a call to the Facebook Checkin service

	public ActionResult GetCheckins()
	{
		JSONObject checkins = helper.Get("/me/checkins");
		if (checkins != null)
		{
			var data = checkins.Dictionary["data"];
			List checkinData = data.Array.ToList();
			ViewData["Checkins"] = checkinData;
		}

		ViewData["Name"] = Session[Constants.FacebookNameKey];
		ViewData["isConnected"] = helper.IsConnected;

		return View("Index");
	}

The structure of the returned data is as follows:

{
   "data": [
      {
         "id": "CheckinID",
         "from": {
            "name": "UserName",
            "id": "UserId"
         },
         "place": {
            "id": "PlaceId",
            "name": "Giants World Series Victory Parade Route",
            "location": {
               "latitude": 37.78627395,
               "longitude": -122.40441083333
            }
         },
         "application": null,
         "created_time": "2010-11-03T19:45:31+0000"
      }
   ]
}

Note that the data set returned from a call to the checkins api will be paged. I’ve only ever checked in once, hence the single item in mu list.

The search call is somewhat different since you need to have 4 parameters set, the query term, the latitude and longitude of the center of the lcoation, and the distance from the center to use (the 5th parameter, ‘type’ is just set to ‘place’ in the code below). I’ve provided some sample data (which is just the sample data used in the Facebook example), which can be loaded by pressing the ‘Load Test Data’ button. If you want to test a different address and need to find a valid lat/long setting, you can use http://geocoder.us/ to convert an address.

	public ActionResult SearchPlaces(FormCollection form)
	{
		Dictionary parameters = new Dictionary();
		parameters.Add("q", form["q"]);
		parameters.Add("center", String.Format("{0},{1}",form["lat"], form["long"]));
		parameters.Add("type", "place");
		parameters.Add("distance", form["distance"]);

		JSONObject searchResults = helper.Get("/search", parameters);
		if (searchResults != null)
		{
			var data = searchResults.Dictionary["data"];
			List places = data.Array.ToList();
			ViewData["Places"] = places;
		}

		ViewData["Name"] = Session[Constants.FacebookNameKey];
		ViewData["isConnected"] = helper.IsConnected;

		return View("Index");
	}

Nothing fancy about the returned data either, it’s pretty similar to the data for the checkin. One thing to note though is that the location item may not have an address associated with it, so you need to account for that when working with the data (the sample just checks for the existence of the ‘street’ key in the location array).

{
   "data": [
      {
         "name": "Philz Coffee",
         "category": "Local business",
         "location": {
            "street": "4023 18th St",
            "city": "San Francisco",
            "state": "CA",
            "zip": "94114-2501",
            "latitude": 37.760863,
            "longitude": -122.433326
         },
         "id": "151116474914629"
      },
      {
         "name": "Ritual Coffee Roasters",
         "category": "Local business",
         "location": {
            "latitude": 37.75659,
            "longitude": -122.4211
         },
         "id": "119185971453428"
      },
	  ...
	 ]
}

Retrieving a user’s wall

The previous iteration of the sample including an example on how to post to a user’s wall, so getting a user’s wall is a natural corollary. Getting a user’s feed is accomplished by making a call to ‘me/feed’

	public ActionResult GetWall()
	{
		JSONObject wallData = helper.Get("/me/feed");
		if (wallData != null)
		{
			var data = wallData.Dictionary["data"];
			List wallPosts = data.Array.ToList();
			ViewData["Wall"] = wallPosts;
		}

		ViewData["Name"] = Session[Constants.FacebookNameKey];
		ViewData["isConnected"] = helper.IsConnected;

		return View("Index");
	}

The returned data can differ depending on the type of the wall post, so when working with the data you just need to check for the presence of the appropriate dictionary keys before trying to use it. For example:

	<%
		foreach (Facebook.JSONObject wallItem in wallPosts)
		{
			string wallItemType = wallItem.Dictionary["type"].String;
			if (wallItemType == "photo" || wallItemType == "video")
			{
	%>
		<% if (wallItem.Dictionary.ContainsKey("name")) {  %><%= wallItem.Dictionary["name"].String%> <% } %> (<%= wallItemType %>) 			
 <%= wallItem.Dictionary["link"].String %>
	 <% }
		else if (wallItemType == "status") {  %>
			<%= wallItem.Dictionary["from"].Dictionary["name"].String%> 
 <%= wallItem.Dictionary["message"].String%>
	 <% } %>

Note that a picture or video may or may not have a name so you’ll need to check for that as well.

Offline Access

The offline_access extended permission is pretty cool, it basically extends the life of the access_token you receive after logging in via OAuth. The example I wrote just stores this in a cookie (named FacebookAccessToken) the first time you log in with your account. Normally you’d want to store this in a database or some other more permanent store.

	public ActionResult GetOfflineWall()
	{
		if (HttpContext.Request.Cookies[Constants.TokenCookieName] == null ||
			String.IsNullOrEmpty(HttpContext.Request.Cookies[Constants.TokenCookieName].Value))
		{
			return View("Index");
		}

		JSONObject wallData = helper.GetWhileOffline("/me/feed");
		if (wallData != null)
		{
			var data = wallData.Dictionary["data"];
			List wallPosts = data.Array.ToList();
			ViewData["OfflineWall"] = wallPosts;
		}

		return View("Index");
	}

The GetWhileOffline method beind used there just takes the access_token out of the FacebookAccessToken cookie and uses that when instantiating the FacebookAPI object…(in FacebookHelper.cs)

	public JSONObject GetWhileOffline(string apiCall)
	{
		JSONObject jsonObject = null;

		if (HttpContext.Current.Request.Cookies[Constants.TokenCookieName] != null ||
			!String.IsNullOrEmpty(HttpContext.Current.Request.Cookies[Constants.TokenCookieName].Value))
		{ 

			string token = HttpContext.Current.Request.Cookies[Constants.TokenCookieName].Value;
			token = HttpUtility.UrlDecode(token);

			Facebook.FacebookAPI api = new Facebook.FacebookAPI(token);
			jsonObject = api.Get(apiCall);
		}

		return jsonObject;
	}

Thats really all there is to it, as long as you have the extended permission ‘offline_access’ and an access_token that was created when a user logs in after granting this permission, you should be able to make offline calls.

Download the latest version here

Facebook, C# and ASP.NET MVC – Code samples for friends list, activities list and wall posts

onishimura — Wed, 11 Aug 2010 09:50:17 +0000

A few weeks back I wrote about the official C# SDK from Facebook and provided some sample code demonstrating how to use it to get some basic information about the logged in user. Admittedly the initial sample asp.net mvc code was fairly simple in order for it to be straight forward and easy to understand. I’ve decided to expand a bit on the sample in order to demonstrate how to use the Open graph API to perform a few more interesting calls, notably:

Post to a user’s wall
Retrieve a list of the user’s friends
Retrieve a list of the user’s activities

The original sample code demonstrated how to authenticate a user and make calls using both the official C# sdk and a home grown solution. I’ve kept that approach but have organized and refactored the samples a bit better to make it hopefully more clear. The new version of the sample code allows you to login/out to facebook only on the home page. Once logged in you can go to the ‘Official’ and ‘Custom’ tabs to view your friends, activities or to post a message to your wall. While the functionality is the same between the two tabs, the code behind them is different. I assume most people would use the official SDK but I provided an alternative just as a point of interest. OK, I was bored really, and just wanted to see how it could be done differently.

In any case, the first step before running the code is to make sure you clear any previous permissions granted to this app (or whatever app you will be using with the sample code). The login button on the home page now requests extended permissions so you’ll probably need to remove it from your list of allowed applications if you’re running the latest code with a facebook app that was using the original sample code. The actual list of permissions being request are perms=’read_stream,publish_stream,read_friendlists,user_activities’, and the full list of permissions available can be found here http://developers.facebook.com/docs/authentication/permissions.

Official C# SDK

The code to use the Facebook API can be found in the OfficialFacebookController. By default index view will simply show the name of the logged in user, which uses the same code present in the HomeController (and the original post<)

string token = HttpUtility.UrlDecode(fbConnect.AccessToken);
FacebookAPI api = new FacebookAPI(token);
JSONObject me = api.Get(“/” + fbConnect.UserID);
ViewData["Name"] = me.Dictionary["name"].String;

There are three other actions a logged in user can take here, view their friends list, view their activity list, and post a message to their wall.

Clicking the Get Friends button will call the GetFriends action in the controller. The call is simply api.Get("me/friends"), which returns a dictionary with a data key and an array of JSONObjects, representing all of the friends for the user. You could also call it with something like, api.Get("/" + fbConnect.UserID + "/friends"): "me" just uses the currently logged in user.
```
Facebook.FacebookAPI api = new Facebook.FacebookAPI(token);
JSONObject me = api.Get("/" + fbConnect.UserID);
JSONObject friendsData = api.Get("/me/friends");
var data = friendsData.Dictionary["data"];
List friendsList = data.Array.ToList();

ViewData["Name"] = me.Dictionary["name"].String;
ViewData["Friends"] = friendsList;
```
The data itself is just the name and facebook id of the user's friends, so the view just loops through the friendsList collection and displays in this format Name - Id
```
<%= friend.Dictionary["name"].String %> - <%= friend.Dictionary["id"].String %>
```
Similarly, clicking the Get Activities button will call the GetActivities controller. The code is pretty much the same as the above friends code, but calls api.Get("/me/activities");. The data is also slightly different, since the activity data contains more information (such as category, and create_date). So, the view follows pretty much the same format but displays more fields:
```
<%= activity.Dictionary["name"].String%> - <%= activity.Dictionary["id"].String%>- <%= activity.Dictionary["category"].String%>- <%= activity.Dictionary["created_time"].String%>
```
Finally, the message section allows the user to enter a message and post it to a user's wall. Entering text and clicking the Post Message button will call the PostMessage action. Instead of calling the Get method of the FacebookAPI class, we call Post:
```
Dictionary postArgs = new Dictionary();
postArgs["message"] = message;
JSONObject post = api.Post("/" + fbConnect.UserID + "/feed", postArgs);
```
The post call also returns a JSONObject which contains the id of the new post. Just for verification, we show this in the view.

Custom C# classes

The display of the custom code looks pretty much the same as the official sdk, so I won't post any images of the views. The primary classes involved are FacebookConnect.cs, FacebookObjects.cs and OpenGraph.cs. Note that compared to the original sample code I've removed the "DEMO" prefix and added a few more methods to OpenGraph, renamed the DEMOFacebookUser to FacebookObjects, and added objects to FacebookObjects.cs. These serve as the definition for our extra calls

You might also notice in FacebookObjects that the DataContract and DataMember attributes have been removed from FacebookUser. One of the more significant changes is the way in which the Call method in the OpenGraph class works. Initially it was using the DataContractJsonSerializer class, which required you to mark your class and it's properties with DataContract and DataMember attributes. However, this serializer seems to have some issues parsing certain JSON strings. So instead I've changed the code to use the JavascriptSerializer which seems to work just fine. In fact it's more flexible and seems to take less configuration than DataContractJsonSerializer, which is why it was probably undeprecated (dedeprecated?). In addition to the use of JavascriptSerializer, the Call method also takes an additional parameter to specify the type of http request made. This allows us to use the same code to make a POST request, which is necessary when writing to a user's wall. The new Call method looks like this:

private T Call(string url, string methodType) where T : class
{
	T result;
	HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;
	request.Method = methodType;

	using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
	using (StreamReader reader = new StreamReader(response.GetResponseStream()))
	{
		JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
		string jsonData = reader.ReadToEnd();
		result = (T)jsSerializer.Deserialize(jsonData);
	}

	return result;
}

The various Get/Post methods in the OpenGraph class are pretty similar to the original GetCurrentUser method and rely on the objects defined in the FacebookObjects.cs file. For example, the GetCurrentUserFriends looks like the following:

public List GetCurrentUserFriends(string accessToken)
{
	string parameters = "me/friends?access_token=" + accessToken;
	string url = baseUrl + parameters;

	FacebookFriendData call = Call(url, GET);

	return call.Data;
}

The action just needs to call this method with a valid access_token. For example, the GetFriends action in CustomFacebookController, calls the following:

List friends =  openGraph.GetCurrentUserFriends(fbConnect.AccessToken);

Once this has been placed into the ViewData dictionary, we can just pull it out and iterate through it like so:

<%
	List friendsList = ViewData["Friends"] as List;
	foreach(FacebookSampleMVC2App.FacebookFriend friend in friendsList) {
%>
	<%= friend.Name %> - <%= friend.Id %>

<%  } %>

The logic/view for retrieving the user's activities and posting to the user's wall are fairly similar.

Wrap up

So there you have it, some sample code to do a bit more than just display the user's name and facebook id. The custom classes and the official sdk are pretty similar in the sense that they both just call REST methods like 'me/friends', 'me/activities' and 'me/feed' from https://graph.facebook.com/. The official SDK is more flexible however, since it doesn't need to have classes defined for each of the types, instead relying on JSONObject to wrap the dictionaries/arrays/scalars returned from the api calls.

Download the code here

Update - 11/15/2010

I recently updated the sample project with more samples, which can be viewed here: http://onishimura.com/2010/11/15/facebook-c-and-asp-net-mvc-updated-code-samples-for-places-wall-offline-access/

Official Facebook C# SDK Released

onishimura — Sat, 17 Jul 2010 05:53:11 +0000

Looks like a brand new SDK to play with for facebook. While they have other sdks for python, php, javascript, etc, this is their first official C# SDK. Previously the primary SDK that was available was the Facebook Developers Toolkit, which hasn’t been updated in some time (and hasn’t been updated to support the open graph api as far as I can tell).

You can grab the code from github at http://github.com/facebook/csharp-sdk.

One interesting thing to note, the current alpha build doesn’t provide a method to get an access token for the current user. The access token allows you to perform authorized requests on behalf of a user, and can be obtained via a redirect from Facebook, after the user has authenticated themselves. Without that token you can only access public data for a given user. The code is fairly simple in that case (this is taken directly from the console sample application on github):

string token = null;
Facebook.FacebookAPI api = new Facebook.FacebookAPI(token);
JSONObject me = api.Get("/4");
Console.WriteLine(me.Dictionary["name"].String);

Essentially, when you pass in a null token you can only access a user’s public data by passing in the user’s Facebook ID. 4 is apparently Mark Zuckerberg’s FB ID, makes me wonder who the first three were.

In any case, the lack of a way to obtain a user’s access_token makes sense since the SDK is meant to be used in multiple types of apps. This sounds like an opportunity to write some code, YAY! I’ve actually already detailed some of this previously.

Retrieving the access_token is pretty straightforward, since it’s available in a cookie that the user gets after authenticating. The name of this cookie is fbs_[AppID], where [AppID] is whatever application id facebook assigned to you. I’ve created a sample ASP.NET MVC 2 application that demonstrates this. It uses a simple wrapper class (FacebookConnect) to pull out the access_token for the currently logged in user, available as a property. Once you have the access_token you can then make authorized requests for the user:

FacebookConnect fbConnect = new FacebookConnect();
if (fbConnect.IsConnected)
{
    Facebook.FacebookAPI api = new Facebook.FacebookAPI(fbConnect.AccessToken);
    JSONObject me = api.Get("/" + fbConnect.UserID);
    name = me.Dictionary["name"].String;
}

I did run into an issue when setting the access_token on the FacebookAPI object. When the url is constructed it passes the Dictionary to an EncodeDictionary method (line 205 in FacebookAPI.cs), which encodes the key-value pairs using the HttpUtility.UrlEncode method. This caused problems when making calls to the graph, specifically an OAuthException : Invalid OAuth access token. Calls typically look like the following url (note that I’ve personally tweaked these urls so they wont actually work now, I’ve listed them just to demonstrate the issue):

https://graph.facebook.com/727440495?access_token=132568260112276|2.Z_FaL6rzoNMt2D3jfnEaWP__.3600.1279345500-727440495|77SIciuK333BmipPho0EIdJ8bwl.

or, after encoding

https://graph.facebook.com/727440495?access_token=132568260112276%7C2.Z_FaL6rzoNMt2D3jfnEaWP__.3600.1279345500-727440495%7C77SIciuK333BmipPho0EIdJ8bwl.

After the call to the EncodeDictionary method the url looks like this:

https://graph.facebook.com/727440495?access_token=132568260112276%257C2.Z_FaL6rzoNMt2D3jfnEaWP__.3600.1279345500-727440495%257C77SIciuK333BmipPho0EIdJ8bwl.

The pipe character in the original url is being double encoded to %257C. So when you try calling this url you get this returned:

{
   "error": {
      "type": "OAuthException",
      "message": "Invalid OAuth access token."
   }
}

The web exception thrown in the project is slightly more vague “The remote server returned an error: (400) Bad Request.”

For the time being I’ve just modified the FacebookAPI.cs class in the project to check for “access_token”, and skip encoding if an access token is passed in, though I guess another solution could be to just make sure you UrlDecode any access token you pass into the constructor:

if (kvp.Key.ToLower() == "access_token")
{
	sb.Append(kvp.Value);
}
else
{
	sb.Append(HttpUtility.UrlEncode(kvp.Value));
}

A couple of other things to note:
1. This is a MVC 2 web app, in Visual Studio 2010
2. You need to set your app id in the web.config file
3. I’ve also included two classes that I’ve used on previous projects to make calls to the open graph api, DEMOOpenGraph and DEMOFacebookUser. These use a DataContract and the DataContractJsonSerializer class to populate a strongly typed object. Below is some sample code showing it’s use:

OpenGraph graph = new OpenGraph();
facebookUser = graph.GetCurrentUser(FacebookConnect.AccessToken);
string firstName = facebookUser.First_Name;

This is obviously less flexible than the dictionary that the official API uses
4. You should also set the AppID value in web.config to your own value, I’ve left my own sample appid in there.

Download the code here

UPDATE
I’ve reworked the sample and provided a description for some of the new functionality here

http://onishimura.com/2010/08/11/facebook-c-and-asp-net-mvc-code-samples-for-friends-list-activities-list-and-wall-posts/