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 />
...