Adding XFBML support to the Facebook Starter Kit

Posted @ 9:59AM

Categories: Facebook

I’ve been playing around with XFBML support for Facebook and thinking about how to incorporate support for it into the Starter Kit. I haven’t decided yet if it should be added directly to the existing master page or add another master page or some other approach. If you feel strongly either way please let me know.

If you would like to add support for XFBML simply replace existing site.master with the following:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="FacebookApp.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 
<head runat="server">
    <title>Untitled Page</title>
    <!-- Load Javascript for Facebook Connect -->
    <script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
      <asp:contentplaceholder id="MainContentPlaceHolder" runat="server"></asp:contentplaceholder>
  </div>
  </form>
  <script type="text/javascript">FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init('<%=ConfigurationSettings.AppSettings["APIKey"] %>', "xd_receiver.htm"); });</script>
</body>
</html>

Add an HTML file called xd_receiver.htm to the root of your project with this content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.debug.js" type="text/javascript"></script> 
</body>
</html>

Once you’ve made these changes you can start using XFBML tags. Here’s an example of the <fb:user-status /> added to the Default.aspx page:

<%@ MasterType VirtualPath="~/Site.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="Server">
  <h1>ASP.NET Starter Kit Application</h1> 
  <fb:user-status uid="<%=Master.API.uid%>" /><br />
...

Comments [1]

permalink

Monday, December 08, 2008 6:53:47 AM (Pacific Standard Time, UTC-08:00)

This is what i've been looking for. A template for this would be nice.

Corey Palmer

OpenID
Please login with either your OpenID above, or your details below.

Name
E-mail	(will show your gravatar icon)
Home page

	Remember Me
Comment (Some html is allowed: `a@href@title, b, blockquote@cite, em, i, strong`) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.

Live Comment Preview