Facebook application development in ASP.NET

Facebook application screenshot

Overview

To ease Facebook development I've created a C# VS.NET 2008 Starter Kit that you can download here. This latest release of the Starter Kit is based on the Facebook Developer's Toolkit v2.1 which uses LINQ to XSD. Once you've installed the Starter Kit here is what you'll need to do:

Click here to see the app on Facebook.

Here are the basic steps you'll need to follow:

1. Download the Facebook Developer Toolkit
2. Download and install my Starter Kit
3. Start VS.NET 2008 (2005 is not supported as FDT v2.1 requires .NET v3.5)
4. Select File|New Web Site... (C# Language)|Facebook Starter Kit v2.1
5. Create a new application on Facebook
6. Configure your Facebook application
7. Update your web.config
8. Start coding!

Requirements

• C# language knowledge (VB.NET is not supported)
• VS.NET 2008
• .NET v3.5 (required due to FDT dependency)

Create a new Application on Facebook

1. Sign up for a Facebook account
2. Add the Developer application to your account (if you have a Facebook account just click the link and you'll be take to the page to add the Developer app)
3. Once you've installed the Developer application you can view it from the Top menu bar by selecting Settings|Application Settings and choosing the Developer application. Once you're viewing the Developer app click the Set Up New Application button or click here.
   
   
   
   
4. Enter the Application Name and agree to the TOS and click Save Changes:
   
5. On the Basic tab
   • Set Help URL -> http://hosts_file_alias/<your_app_name>/help/
   • Set Privacy URL -> http://hosts_file_alias/<your_app_name>/privacy/
   • Set Terms of Service URL -> http://hosts_file_alias/<your_app_name>/TOS.htm
   • Click Save Changes
6. On the Canvas tab
   • Set Canvas Page URL for your application (this may take many tries as lots of names are taken)
   • Set Canvas Callback URL -> http://hosts_file_alias/<your_app_name>/
     NOTE: Facebook has recently stopped supporting localhost as a valid callback URL. To workaround this problem you can add an alias to your %SystemRoot\System32\drivers\etc\hosts file that refers to localhost as suggested here. Using localhost makes it easy for you to debug locally, note that the port number (nnnn) will be the port you use to debug your application locally using Microsoft's development web server. You can get that port number once you download and run the application below. Also according to this post these URL's should be all lowercase.
   • Set Render Method to IFrame
   • Set IFrame Size to Resizable
   • Set Canvas Width to Full Width (760px)
   • Click Save Changes
   
7. On the Authentication tab (Optional)
   • Set the Post-Remove Callback URL to http://hosts_file_alias/<your_app_name>/settings/RemoveApp.aspx
   

Creating your IFRAME ASP.NET Application

1. Launch VS.NET 2008
2. Select File|New Web Site...
3. Select C# from the Language dropdown
4. On the New Web Site dialog select Facebook Starter Kit listed under My Templates
5. Click OK
   
   
6. Open web.config and set the APIKey and secret from the values on the Facebook Settings page for your application

<appSettings>
      <add key="APIKey" value=""/>
      <add key="Secret" value=""/>
      <add key="Callback" value="http://localhost:14215/facebookapp"/>
      <add key="Suffix" value="MyIFrameApp"/>
      <add key="TemplateID1" value="20889707566"/>
      <add key="TemplateID2" value="20889902566"/>
</appSettings>

Adding your application to your Facebook account

• From the Developers Application on Facebook browse to My Applications
• Click View About Page then click Add Application

See Also