Facebook application development using ASP.NET and FacebookToolKit Version 3.0

It was an amazing day friends.After a long time of insanities in life,just got something great working out.I know you are familiar with facebook and Facebook applications like My Wedding Time,My Death Time etc.So i too got interested in facebook apps couple of days ago.I made some search on google to find how i can develop a sample one.To my surprise i found C# and ASP.NET based applications are supported by facebook.I am stopping the story and going directly to my today’s subject.

About Facebook application types:

———————————
Facebook allow us to develop apps based on FBML or IFRAME canvas.Unfortunately from 2011 facebook stopped supporting creation of new FBML based application.Old applications developed before 2011 on FBML will work fine.

So we can go with IFRAME based apps.

Prerequisites
————-

1. Visual studio 2008 or higher.
2. A hosting server with public URL that support ASP.NET 3.5,If you dont have a paid hosting server you can request a free ASP.NET hosting in aspspider.com.
3. Download latest FaceBookToolKit from http://facebooktoolkit.codeplex.com/ .
4. To create a facebook application you need a verified developer account in facebook.I will explain later about it.

So Let Us Start
—————

I have a paid domain for example let it be ‘http://example.com/’ ,i created a folder named ‘FBApp’ in the server where i want to put my code files.So my hosting location will be ‘http://example.com/FBApp/’

Confirming Developer Accounts
—————————–

To create applications your facebook account must be verified.Facebook supports 2 methods for verification mobile and credit card based.We will go for mobile based verification.

To verifies your mobile go to link ‘http://www.facebook.com/confirmphone.php’.If your account is already verified they show a message ‘Your mobile phone has been successfully verified’.Select your country and give your mobile number,Facebook will send verification code to your mobile.

To know more about read ‘http://developers.facebook.com/blog/post/386/‘

Create and setting your application properties in facebook
———————————————————-

1.Log in to your face book account.
2.In the search bar type ‘developer’ as shown in the below pic.

3.Clicking on developer opens the application creation page on that click ‘Set Up New App’.

4.Give your application name in next page as shown below.

5.Click on ‘Create App’ button.
6.Then comes a page as shown below it has side menus like ‘About’,’Website’,’Facebook Integration’.

5.In the ‘About’ page you can set icons and logo for your application.
6.Now click on the ‘WebSite’ link copy your Application Id and Application Secret.Both are needed for authentication.

7.Now click on ‘Facebook Integration’ link,this is a very importent page.Here you have to fill 2 entries Canvas page and Canvas URL
Canvas page is the link of your application in facebook like http://app.facebook.com/yourappname/.Canvas URL is the call back URL where we are hosting our asp.net code files.
As i told earlier i am going to host files in ‘http://example.com/’ ,i put the code files in a folder FBApp so my Canvas URL become ‘http://example.com/FBApp/’ .

Please not we are not completed,We just set application properties in face book your application URL will be ‘http://app.facebook.com/yourappname/’,You can share this link to your friends.
Now we can write code for our application.

The facebook tool kit includes some DLL files,Which are to be referenced in our ASP.NET application.

1. Create a new web site in VS2008.

2. Add reference to Facebook.dll,Facebook.Web.dll

3. Edit the Web.config file add an section with your api id and secretkey(Application Id and Application Secret)

  <appSettings>
    <add key="APIKey" value="YourApplicationid"/>
    <add key="Secret" value="Your application secret id"/>
    <add key="Callback" value="http://example.com/FBApp/"/>
    <add key="Suffix" value="project name in facebook"/>
  </appSettings>
  

4. Add an ASPX page with following mark up to include a label.

    <asp:label ID="labelUser" runat="server" text=""></asp:label> 

5. Add the following code in CS file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Facebook;
using Facebook.Web;
using Facebook.Session;
using Facebook.Rest;
using System.Configuration;

public partial class _Default : CanvasIFrameBasePage
{
    protected void Page_PreInit(object sender, EventArgs e)
    {
        base.RequireLogin = true;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            labelUser.Text = Api.Users.GetInfo().name;

        }
    }
}

Note the points the page is inherited from ‘CanvasIFrameBasePage’ and PreInit is override.

6.Now copy your code files to FBApp folder in wwwroot of example.com and then go to facebook type your URL ‘http://app.facebook.com/yourappname/’
Your application is ready it shows your name.