Using the Starter Kit

By far the easiest way to start using the .NET Facebook API Client is to install the Starter Kit. The Starter Kit will install the Facebook Client binaries as well as a project template for Visual Studio that you can use to quickly get started developing your Facebook application.

Currently, the starter kit only has a template for ASP.NET MVC applications written in C#. We will be adding templates for WebForms and VB.NET at a later date. If you intend to use WebForms and/or VB.NET, you can still use the .NET Facebook API Client, but there are some additional steps you must follow first.

To use the starter kit:
  1. Download and run the appropriate installer from the latest release.
  2. Once it has completed, create a new project. In the "New Project" dialog, select “Visual C#” under “Project Types” on the left.
  3. Select the template, which will be listed under "My Templates" on the right.
  4. Enter a name for your project and click "OK".
  5. If you haven't already registered your application on Facebook, create one now. Otherwise, locate your API Key and Secret (see screenshot in the .NET Facebook API Client Wizard)
  6. Enter your API Key and Secret so that the configuration file can be populated.
  7. Click "Continue" to finish generating your project.
The following instructions are also available in the GetStarted text file included in the template:
These instructions assume you have at least basic experience configuring IIS, any firewall you are running, and your router.
  1. Set up IIS to serve this application.
    1. Create a new web site pointed at this directory.
    2. Create IP/Hostname bindings if required.
    3. Ensure the service account and anonymous user account has proper access to this folder.
  2. Make sure your development computer is accessible from a public ip address. You may need to do one or more of the following:
    1. Open port 80 on your firewall
    2. Forward port 80 to this computer on your router
  3. Configure your Facebook application's Callback URL and Connect URL
    1. Go to www.facebook.com/developers/apps.php and select your app on the left.
    2. Click "Edit Settings" on the right.
    3. On the "Canvas" tab, set the Canvas Callback URL to your public IP address.
      1. See www.whatsmyip.org if you don't know your public IP.
      2. You can also use a domain name that is mapped to your IP address if you have one.
    4. Also on the "Canvas" tab, pick a Canvas Page URL.
    5. On the "Connect" tab, set the Connect URL to the same address as above.
    6. Click "Save"
  4. Compile your application.
  5. Start your application by going to your canvas url.
    1. Your canvas url will look like this: http://apps.facebook.com/yourappnamehere

Getting Started - IFrame applications

Much of the additional functionality provided by the .NET Facebook API Client Framework requires that your application is set up with Facebook Connect. Please make sure you are properly integrated. Our demo site, for example, uses the following code to initialize the Facebook Clientside API:

    <script type="text/javascript">
        FB_RequireFeatures(["XFBML", "CanvasUtil", "Api"], function() {
            FB.Facebook.init("<%= this.FbContext.ApiKey %>", "/xd_receiver.htm");
            FB.XdComm.Server.init("/xd_receiver.htm");
            FB.CanvasClient.startTimerToSizeToContent();
        });
    </script>

Getting Started - ASP.NET

There are a couple short steps that need to be accomplished before using the .NET Facebook API client in your ASP.NET application.

References

  • Add references to Facebook.dll and Facebook.Web.dll

web.config

Facebook Configuration Section

  • Add the following to the <configSections> element:
<section name="facebook" type="Facebook.Configuration.FacebookSection, Facebook" />
  • Add the following configuration section to configure your Facebook Application:
<facebook>
  <applications>
    <add apiKey="YOUR_API_KEY_HERE" secret="YOUR_SECRET_HERE" />
  </applications>
</facebook>
  • You may add multiple API keys if your ASP.NET application will be handling requests for multiple Facebook applications.

FacebookHttpModule

  • Configure the FacebookHttpModule in web.config:
<configuration>
   <system.web>
      <httpModules>
         <add name="FacebookHttpModule" type="Facebook.Web.FacebookHttpModule, Facebook" />
      </httpModules>
   </system.web>
</configuration>

Control Inheritance

  • It is recommended that ASP.NET pages and user controls inherit from the Facebook counterparts provided in the Facebook.Web.dll assembly:
    • Page -> FacebookPage
    • MasterPage -> FacebookMasterPage
    • UserControl -> FacebookUserControl

Getting Started - ASP.NET MVC

The configuration for ASP.NET MVC applications is very similar to regular ASP.NET applications.

References

  • Add references to Facebook.dll, Facebook.Web.dll and Facebook.Web.Mvc.dll

web.config

Facebook Configuration Section

  • Add the following to the <configSections> element:
<section name="facebook" type="Facebook.Configuration.FacebookSection, Facebook" />
  • Add the following configuration section to configure your Facebook Application:
<facebook>
  <applications>
    <add apiKey="YOUR_API_KEY_HERE" secret="YOUR_SECRET_HERE" />
  </applications>
</facebook>
  • You may add multiple API keys if your ASP.NET application will be handling requests for multiple Facebook applications.

FacebookMvcModule

  • Configure the FacebookMvcModule in web.config:
<configuration>
   <system.web>
      <httpModules>
         <add name="FacebookMvcModule" type="Facebook.Web.Mvc.FacebookMvcModule, Facebook.Web.Mvc" />
      </httpModules>
   </system.web>
</configuration>

Control Inheritance

  • It is recommended that ASP.NET MVC views (master, partial and otherwise) inherit from the Facebook counterparts provided in the Facebook.Web.Mvc.dll assembly:
    • ViewPage -> FacebookViewPage
    • ViewMasterPage -> FacebookViewMasterPage
    • ViewUserControl -> FacebookViewUserControl

Last edited May 8, 2009 at 8:40 PM by DanielSchaffer, version 11

Comments

jkbaseer Aug 9, 2011 at 12:46 PM 
hi sir,
i have edited my web.config as like yu said..here it is

<configuration>

<configSections>
<section name="facebook" type="Facebook.Configuration.FacebookSection, Facebook" />
<facebook>
<applications>
<add apiKey="268115366539316" secret="76c92923adf4a4a9eae0b510c2c56ed6" />
</applications>
</facebook>
</configSections>
<connectionStrings>
<add name="ApplicationServices"..............
i got this error

Warning 1 The element 'configSections' has invalid child element 'facebook'. List of possible elements expected: 'section, sectionGroup'. c:\users\as-4741g\documents\visual studio 2010\Projects\MvcApplication1\MvcApplication1\Web.config 12 6 MvcApplication ilike

please help me to get out of this..thank yu..

planetmarshalluk Jun 3, 2009 at 4:10 PM 
The configuration instractions for ASP.Net apps is incorrect. The required config settings are

<configSections>
<sectionGroup name="facebook" type="Facebook.Configuration.FacebookSectionGroup, Facebook">
<section name="api" type="Facebook.Configuration.FacebookApiSection, Facebook" />
</sectionGroup>
</configSections>

and

<system.web>
<facebook>
<api>
<applications>
<add apiKey="my key" secret="my secret" />
</applications>
</api>
</facebook>
<system.web>

-- Andrew.

joeybagadonutz Jun 1, 2009 at 6:31 PM 
I get Error 6 Unrecognized configuration section facebook.

With the facebook section:
<facebook>
<applications>
<add apiKey="YOUR_API_KEY_HERE" secret="YOUR_SECRET_HERE" />
</applications>
</facebook>

Any ideas what im doing wrong?

DanielSchaffer May 8, 2009 at 8:34 PM 
Nick - with FBML apps, you have to remove all the HTML tags outside and including <body> - this includes <html>, <head>, etc. If you have further questions, please create a discussion on the discussions tab! Thanks! :)

zznikh May 5, 2009 at 9:50 PM 
Daniel, I would really like to understand your API (I spend a long time looking at the CClarity v1.7 and 2.0 last year).

I have created a facebook application, and pointed it at my dev server - I can get it to run, but all I get is:

FBML Error (line 10): illegal tag "body" under "fb:canvas" now for running in debug :-(

I have done a lot of messing around to get this far, and I could really do with a simple article that describes how to get the sample working. If the learning curve is too steep you wont get adoption.

If you would like to create some basic instructions, I would be happy to revise them as I go through the process.

--Nick