Introduction
This snippet is just the start of a series of articles written to explain the most commonly used features of the Facebook Developer Toolkit API. I promised Brian Goldfarb that I would help support the community, and I intend to follow through. Thanks to Microsoft for supporting social networking development using the .NET framework!
With that said, let's get started.
Download the Facebook Developer Toolkit. Here is a link to the CodePlex Project.
Once you have the binaries on your local disk, we need to set up our Facebook application.
Setting up a Facebook Application
The process is actually quite simple. First we need to install the "Developer" application, provided by Facebook.
Here is a link - Facebook Developer Application
Launch the Developer application and click "Set Up New Application" in the top right hand corner.
You will see the following screen. I have filled in the necessary fields, but here is a quick rundown.
1. Application Name - You must pick one.
2. Callback URL - This is the address of your hosted facebook application.
3. Canvas Page URL - Give your application a nice, memorable address on Facebook.
Note: Just below "Canvas Page URL" are two radio buttons. Select "Use FBML".
After you click "Submit" you will be taken to the following screen which will show you details about your newly created application.
Take note of two key fields we will reuse later: API Key, Secret.
Writing our Bare Bones Application
I want to quickly reiterate that this is simply the absolute least amount of code you could possibly write and still have a functional application. In my opinion this is the best way to get started because it emphasizes what you must keep in place while allowing you to build from a simple code base.
Our ASP.NET Solution has a mere 8 files including binaries. The screenshot below demos our Solution Explorer.
Adding the Necessary Binaries
You can see from the screenshot that our Bin folder contains 5 files.
All of these can be dragged and dropped from the included binaries in the Toolkit download. They are, just to make this overly clear: facebook.dll, facebook.web.dll, facebook.web.xml, facebook.xml, and Microsoft.Xml.Schema.Linq.dll.
Setting up Web.Config
We need to configure a few settings for the Toolkit to understand who we are. Here is the full XML passage from web.config.
Go back to the Developer application in Facebook and extract the correct APIKey, Secret, and Callback URL values from your new application's profile. You can reference the screenshot we already reviewed to help find this page.
Remove HTML and BODY Tags
This may seem like a bizarre step in the process, but let me briefly explain why this step is necessary. First let's look at the code in Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <form id="form1" runat="server">Hello, <%= API.users.getInfo().name %></form>
You can see that we have only kept the code between the two FORM tags. So why do we need to get rid of HTML and BODY? I will go into further detail in a later article, but essentially, any code that is written in an FBML based application is interpreted and injected directly into the Facebook platform. So when your users view your application, if you were to keep these tags and then view the generated HTML source, you would have an HTML tag inside of Facebook's HTML tag. It's not hard to see why this would be a problem!
More of that later, but for now let's keep moving.
Referencing the Toolkit
Open Default.aspx.cs. The code is so short that I have pasted the full text for analysis.
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using facebook;
using facebook.web;
public partial class _Default : facebook.web.CanvasFBMLBasePage
{
protected void Page_PreInit(object sender, EventArgs e)
{
base.RequireLogin = true;
}
protected void Page_Load(object sender, EventArgs e)
{
}
}
There are three points of interest here.
1. We reference facebook and facebook.web in our "usings" section. This gives us access to the Toolkit binaries.
2. We derive class _Default from facebook.web.CanvasFBMLBasePage. This derivation hides most of the dirty work in actually authenticating with Facebook!
3. We set the flag base.RequireLogin = true; This line forces users to be logged in to the Facebook platform before viewing your application. By enforcing this, we can be sure that we will have access to a user's data.
Requesting User Information from the API
In this final step we bring it all together. Let's see how we can now access our user's information and beging to leverage the "social graph" so to speak.
Refer back to Default.aspx. You will see the following code.
Hello, <%= API.users.getInfo().name %>
We access the user's basic profile information and select the name field. When we run the code, it will print something like the following.
Hello, Bill Konrad
Hosting the Application
Host your ASP.NET solution at the Callback URL you specified in your application's profile, and load it up for the first time by visiting your http://apps.facebook.com/yourapplication/ page.
That's it! Take the basic foundation delivered here, and run with it. The possibilities are limitless and this is only the tip of the iceberg. If you enjoyed the article, please link to it and share with your friends.
Subscribe to our RSS feed for many more articles to come and download the full code below.
Download Full Sample Code
