I missed the release of the latest version of the Facebook Developer Toolkit from clarity consulting so I decided to play around with it after our Mix It Up event.

There have been much changes to the toolkit since the last time I looked into it. It took me a few minutes to try to figure out how to get a simple application out. The documentation posted here is a bit outdated so let me post my own little how-to. They’ve actually made it a lot easier but the new API needs a bit of getting used to I guess. It’s a bit confusing as the APIs for CanvasFBMLBasePage is different from CanvasIFrameBasePage. I hope they standardize soon though. Considering that this is supposedly an RC, it doesn’t seem like they’ve settled on a convention yet.

So again, assumption is:

1. You’re using C# as your language

2. You’re building an app with the CanvasFBMLBasePage (haven’t tried out the Master Page yet.. baby steps my friend)

1. Visit http://www.facebook.com/developers and Setup A New Application. Expand the optional fields and set up your application, making sure you have the following details filled in:

2. Once you have successfully set this up, take note of your API Key and Secret:

3. Fire up Visual Studio 2008 and set up a new ASP.NET Web Application

4. Open up Default.aspx and remove everything but the first line (which is the page directive that says tells .NET which is the CodeFile. Your default.aspx should look something like this:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:label ID="Content" runat="server" text="Label"></asp:label>

// For convenience, I added an asp.net label control where I would write out the FBML later on. If you’d rather use Response.Write() you could do that as well. Then you wouldn’t need to have the second line on Default.aspx

5. Before we dig into the CS files, we’ll need to add a reference to the facebook dlls that we can download from codeplex. Simply select to download bin.zip and it should give you the dlls necessary for you to build a Facebook app. Unzip this in a location you can easily find. Go to your Solution Explorer and right-click on your project –> Add Reference

Click on the Browse tab and navigate to where you extracted the binaries for the toolkit. You will want to add a reference to both facebook.dll and facebook.web.dll //yes, the non-caps irks me too.. wait till you see the classes *sigh*

When you finish adding these two necessaries, it’ll pull some other files along for the ride as well so don’t be surprised about that.

6. Now that’s finished, we can open up our .CS file and start by importing the necessary namespaces namely:

using facebook;
using facebook.web;

and then, make our class inherit from the CanvasFBMLBasePage class that is part of the toolkit. This base class should take care of all the nitty gritties of dealing with Facebook and making sure it knows who you are (or in this case, your application)

public partial class _Default : CanvasFBMLBasePage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

7. Before we proceed, lets add a snippet to our web.config file to set our APIKEY and secret. The base class will be looking at our web.config file for the values to use to authenticate with Facebook. All you need to do is find this section:

and replace it with something like:

<appSettings>
  <add key="APIKey" value ="8e38f5fc72b989b8146dc91ece7e9b6a"/>
  <add key="Secret" value ="d9a5bd957d3aa1c69316839f1543fce0"/>
</appSettings>

of course put in the APIKey and Secret that was provided to you by Facebook. Don’t go using my key, it won’t work with your URL anyway Make sure you SAVE!

8. Going back to Default.aspx.cs, we can now proceed to add logic to our application.

protected void Page_Load(object sender, EventArgs e)
{
    base.Page_Init(sender, e); // this is the code that will call the base

                               // methods that deal with authenticating 

                               // with facebook and all that mumbo jumbo

if(!IsPostBack)    {
    stringuid = base.API.uid.ToString(); // this is the code to retrieve

                                          // the userid of the logged in user 

                                          //(the person accessing your application

   Content.Text = "<fb:profile-pic uid='" + uid + "'/>";               // You can also do something 

   Content.Text+= "hello, <fb:name uid='"+ uid + "' useyou='false'/>"; // like Response.Write( 

                                                                       // "<fb:profile-pic uid='" +

                                                                       // uid + "'/>"); for this part

   Content.Text += " you have "+ base.API.friends.get().Count + " friends so far "; 

   //anything you need to know about your user, you will find from base.API – all your base are belong to us

}}

9. Once that’s done, we can now go and publish our application by right-clicking on the project in solution explore and selecting publish

Make sure you are publishing to the Callback URL you specified when you applied for the Application Key and Secret.

10. When you’re done publishing and you try to access the application, you should see something like this:

and when you click allow, you’ll get:

Some issues I noticed though is that when I try to access the application URL when I am logged out, Facebook tells me that the page cannot be found. But when I access it when I’m already logged in, it’ll prompt me to allow the application to access my information if i have not yet added the app. I’m checking with the forum on codeplex to see whether this is a Facebook issue or whether it’s the Tool’kit’s

Congratulations! You have now built your first FBML based Facebook application! Will let you know how far I go with this new framework.

It seems to be cleaner code right now, but I guess I’ll need to fool around with this to find out more.

Hope this helps!

I did a session on facebook development using the facebook developer toolkit where I also showed how I integrated my Piss Off Silverlight application into a facebook app, which I now call PissBook. I’ve registered the pissbook url but have yet to point it to my app as it seems that facebook isn’t allowing me to save it as “addable” on facebook   I forgot to put in the post add URL ^_^

What I did was take this silverlight app:

And showed how you can make it work with data from facebook (or any other datasource for that matter). If you are using the default page generated by the Silverlight project, you would have something like:

on the Page_Load event, you should then be able to add values from your Request variable, in this case the logged in user name, and the friend’s name which i picked up from facebook’s friend-selector component, and pass these as InitParameters to my Silverlight Application.

I then needed to do a bit of tweaking in my App.xaml file on the Application_Startup method where I parsed the initialization Parameters and passed it to the constructor on my Page user control, which is basically my Silverlight application.

I then created a new constructor for my Page.xaml, which is more or less the same as the original one, except this accepts some parameters and assigns them to the textboxes in my application:

A simple application but it basically shows you how you can integrate your Silverlight applications with dynamic datasources through its InitParams property.

Code and slides are here:

* NOTE: for some reason, when you’re not logged in, facebook gives a 404 when i try to access the app directly from http://apps.facebook.com/facebooksession I’ll update this as soon as I find out a resolution.

this is apparently a 6-month old bug http://bugs.developers.facebook.com/show_bug.cgi?id=1406 still unresolved.

If you want to embed a font into your Silverlight applications, add the font into your project:

Set the Build Action file property to embedded resource:

Use the following code snippet to use the font as a font source for your components:

Assembly ass = Assembly.GetExecutingAssembly();
Stream stream =

ass.GetManifestResourceStream("EmbeddedResource.Font.pricedow.ttf");
this.test.FontSource = new FontSource(stream);
this.test.FontFamily = new FontFamily("Pricedown");

XAML looking something like:

<Grid x:Name="LayoutRoot" Background="White">
    <Canvas>
        <TextBlock x:Name="test" FontFamily="annifont.ttf#Annifont" 

         Text="grand theft auto IV" FontSize="30"/>
    </Canvas>
</Grid>

And the result:

Source: