Developing for Facebook with .NET
by Ben Coley, Developer Evangelist Intern
Ah Facebook. The place where many people can come together to view photos, view blogs, find people and organise events. Has anyone noticed that recently, the developers over at Facebook released a new expansion called “Applications”? Did anyone also notice that the main way of interfacing with the APIs for these applications was using PHP?
Have no fear. Some nice guy by the name of Jay Lagorio has written a VB.NET library to interact with the Facebook API, meaning that rather than delving into the unfamiliar territory of PHP, we can sit in our comfy chairs, drinking coffee, and relax using Visual Studio to do all the hard work for us. Well, sort-of.
Once you get the application set up, it’s easy to write a program. The problem is, setting up the application. I carefully explored this new API and documented the process I used to write a simple application to utilise a new language the Facebook-ies are calling “FBML” (for those of you who can’t guess, that’s “Facebook Markup Language”).
You can get the VB.NET Facebook API Client (by Jay Lagorio) here
Okay, so now you have your nice FacebookRestClient.vb file, we can start writing code. The way it works is, you use a command in the FacebookRestClient.vb file that sends a method or function (as a string), with a collection of arguments (also sent as a string) so that the Facebook Rest server can process the code.
So to begin with, you’ll want to add the FacebookRestClient.vb file to a new VB.NET project. Then you’ll want to add a few aspx pages and their code-behind files. You’ll want to call these ‘cb’, ‘index’ and ‘main’.
Firstly, the call-back page (cb.aspx and cb.aspx.vb). In my application, this page is used to forward you to the main application pages and provide error messages if necessary. The page contains two asp labels; one to display the name of the user logged in, and one to display either the error code, or the next step:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="cb.aspx.vb" Inherits="cb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<form id="form1" runat="server">
<span style="font-family: Verdana">
You’ve been logged into Facebook,
<asp:Label ID="lblFirstName" runat="server"></asp:Label>
<asp:Label ID="lblNextStep" runat="server"></asp:Label>
</span>
</form>
The vb file for cb.aspx firstly checks the user login data. If the user is logged in, then they are shown the information above. If not, then they are redirected to a page where they can login:
Dim AuthToken As String = Request.QueryString("auth_token")
If AuthToken = "" Then
Response.Redirect("index.aspx")
End If
The index.aspx page presents the user with a Log in button that redirects them to Facebook.
<a href="https://www.facebook.com/login.php?api_key=<%= Application("APIKey") %>&v=1.0">
<img alt="Log in to Facebook" border="0" src="https://static.ak.facebook.com/images/devsite/facebook_login.gif"/>
</a>
The index.aspx.vb file pushes some new data to Facebook, specifically in the FBML format. You can find documentation here. This then causes the Facebook profile page of an application user to be updated. You know the little boxes on the profile pages? This is where your finished application will appear in all its glory, composed in FBML:
Imports FacebookRestClient
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
‘ If the user is already logged in, just pass them right into the application.
If Not (Session("FBSession") Is Nothing) Then
Dim FBMLtoSet As String
FBMLtoSet = "<fb:ref url=""put a url here that returns FBML"" />"
Dim SI As SessionInformation = Session("FBSession")
Dim FB As New FacebookRestClient(Application("APIKey"), Application("Secret"), SI)
Dim Parameters As New NameValueCollection
Parameters.Add("markup", FBMLtoSet)
Dim ReturnedString As String = FB.callRemoteMethod("facebook.profile.setFBML", Parameters)
Dim Param2 As New NameValueCollection
Param2.Add("url", "put a url here that returns FBML")
Dim RetStr2 As String = FB.callRemoteMethod("facebook.fbml.refreshRefUrl", Param2)
End If
End Sub
End Class
Finally, the main application page. This is the page that tells the user that the update of the FBML was successful, and that all the profile pages of users of this application were updated.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="main.aspx.vb" Inherits="main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<form id="form1" runat="server">
<span style="font-family: Verdana">
<strong>Update Complete</strong>
<br /><br />
The cache of your FBML on Facebook was updated successfully.
</span>
</form>
If you want to, you can include an asp label in the aspx page, then reference the Facebook API in the vb code page to display a message like “Well done, Ben! You successfully updated the FBML!”.
You’re almost ready to go! Just head on over to Facebook, log in, and add the “Developer Application” to your profile. Once you’ve done this, create a new application following the steps provided by Facebook. If you have a server you can upload the pages we just wrote to, you can do that now, otherwise you can use the loopback IP of 127.0.0.1 (or Localhost if you prefer!).
Using Localhost is best for debugging, because then you can change code on the fly to see if it works. In your create application screen, you are asked for a bunch of information which you should be able to fill in using the site we’ve created. For example, the call-back URL might be “https://Localhost/facebook/cb.aspx” or something similar. Set the canvas page to “https://www.facebook.com/” for now. For any pages that you’re unsure of, leave blank and it should still work just fine.
Finally, we need to grab your API Key and Secret Key. Facebook should show this information once you’ve successfully generated your application. Go back to the site we created before, load up Global.asax (create this file if it doesn’t already exist) and add this code inside the Application_Start sub:
Application("APIKey") = "your API key here"
Application("Secret") = "your Secret key here"
That’s it! Complicated though it can be, once this set up has been completed, you now have a fully-functional Facebook application that can push FBML to user profiles! Just add the application to your profile, visit your index.aspx page manually (you might do this by visiting “https://Localhost/facebook/index.aspx”, for example), which should update your FBML, then revisit your profile to see the effect!
I hope this has given you a brief (well, long but insightful) introduction to programming applications for Facebook! After completing my first application, I noticed that there was a link on the Facebook website to a joint project with Microsoft involving Popfly and Visual Studio Express, which could quite possibly be easier than programming using the methods described above so you might want to click here for more details!
I also write a blog (or at least am starting to!) and there will be some technology focus on there, for those of you who are interested!