First thing first go to https://developers.facebook.com and create a new app. Copy the AppID and Secret to web.config:

<configuration> <configSections> <section name=”FacebookAppConfig” type=”ComputerBeacon.Facebook.Server.AppConfig”/> </configSections> <system.web> <compilation debug=”true” targetFramework=”4.0″ /> </system.web> <FacebookAppConfig AppID=”xxxxxxxx” AppSecret=”xxxxxxx” /> </configuration>

Next, go to the app settings page on Facebook, and check the Page Tab function. Give your app a fancy name. Point the Page Tab URL and Secure Page Tab URL to an address that contains the aspx page you’ll be creating. Localhost is also acceptable. Now here’s the problem: Facebook requires apps to accept https connection. Normally enabling sandbox mode will temporarily allow normal http connection, but this doesn’t work for Page Tabs (most probably Facebook bug). This blog post explains how to create local SSL certificates for development purpose. When you deploy the application of course, you will need to purchase one for your server.

Here I’m going to create a very simple app called “Sum your name” – it basically just sums the ASCII (or unicode) values of the characters in your name and displays it. This is the same sample that is used for the Canvas and Page Tab demo at https://apps.facebook.com/aspdotnetsample/ .

To access the user’s name we need the user to authorize our app. So let’s put the below html into our .aspx page:

<div id=”div_Authorized” runat=”server”> <p>Your name is: <asp:Label ID=”Label_name” runat=”server” /></p> <p>The sum of the ASCII values of your name is: <asp:Label ID=”Label_Sum” runat=”server” /></p> </div> <div id=”div_NotAuthorized” runat=”server”> <p>You have not authorized the app.</p> <asp:Button runat=”server” Text=”Authorize” OnClick=”AuthClick” /> </div>

People often have questions about how to display different content for users who have and have not authorized the app. The simplest solution is render everything in a single .aspx page. After all, it’s a server-side script, so all it matters is delivering the right html to the user. Do not use IframeRedirect, Response.Redirect or <a> links, because the information that is POSTed by Facebook will get lost in this process.

The C# code behind this page is quite straight forward:

public partial class PageTab : System.Web.UI.Page { PageTabContext context; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //the Page Tab does not require authorization context = PageTabContext.FromConfig(this.Context); context.Login(); ViewState[“PageTabContext”] = context.ToSerializedString(); } else { context = PageTabContext.FromSerializedString(this.Context, ViewState[“PageTabContext”] as string); } //to display different message to users who have and have not authorized the app, simply hide(or show) the html content dynamically if (context.Session == null) div_Authorized.Visible = false; else { div_NotAuthorized.Visible = false; ComputerBeacon.Facebook.Models.User u = new ComputerBeacon.Facebook.Models.User(“me”, context.Session.AccessToken); string name = u.Name; UInt64 sum = 0; foreach (char c in name) sum += c; Label_Sum.Text = sum.ToString(); Label_name.Text = name; } } protected void AuthClick(object sender, EventArgs e) { context.RedirectToFacebookAuthorization(); } }

(context.Session == null) tells whether the user has not authorized the app.

Call the RedirectToFacebookAuthorization() method as necessary. After authorization, the user will be redirected to this page again by Facebook.

Final thing, we need a mechanism that would allow Page administrators to add our app to their pages. This is achieved by redirecting the administrator to an address obtained by calling Dialog.GetAddPageTabUrl() method. You can do this at anywhere you like, it can be a website, it can be Canvas app, or a link in an email. Below is an example of how to achieve this in a canvas app:

AppConfig config = AppConfig.FromConfigFile; string url = Dialog.GetAddPageTabUrl(config.AppID, “https://apps.facebook.com/” + config.CanvasNamespace + “/PageTabDialog.aspx”, DialogDisplayType.FullPage);

If it is just a normal ASP.NET webpage, you can put the link in an <a> tag or use Response.Redirect. If you get an error from Facebook saying that the url address must be owned by the app, simply go to the app settings and add your domain name there.

Finally, publish your app. And that’s it!

Leave a Reply

Your email address will not be published. Required fields are marked *