Using HTML to Imitate XFBML
From Facebook Developer Wiki
Using the Facebook JavaScript Client Library, you can render XFBML inline on a Facebook Connect site or iframe canvas page, without using XFBML tags.
You do this by specifying the XFBML element as the ID for a <div> or <span> tag, then reference these IDs later in your JavaScript using document.getElementById.
For example, to render a Facebook Connect login button without using fb:login-button, you could reference it like this:
<div id="login_button"></div>
Then, in your JavaScript, you can reference the tag by calling FB.XFBML.Host.addElement:
FB.XFBML.Host.addElement(new FB.XFBML.LoginButton($("login_button")));
Note: An example showing complete syntax is included here:
<!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>
<title>Facebook Connect Demo</title>
</head>
<body>
<h1>Rendering FBML for Facebook Connect without Using XFBML Tags</h1>
<p>This page should render a number of FBML tags when a user logs in and connects your site with Facebook.
</p>
<p>You can render a login button this way:
</p>
<div id="login_button"></div>
<p>Similarly, you can render a user's name and profile pic like this:
</p>
<p>
<span id="name1" uid="711562108" ></span>
</p>
<div style="">
<div id="pic1" uid="1160"></div>
</div>
<br />
<!-- Next, reference the Facebook Connect Feature Loader file: -->
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<!-- Now, initialize Facebook Connect and create a helper function that renders the XFBML: -->
<script type="text/javascript">
//<![CDATA[
//A helper function as shorthand for document.getElementById.
//Most likely your app already has such helper function defined and won't need
//it here.
function $(id)
{
return document.getElementById(id);
}
FB_RequireFeatures(["XFBML"], function()
{
// app id / api key
FB.Facebook.init("<app_id>", "<cross domain channel url>");
FB.XFBML.Host.autoParseDomTree = false;
// Add XFBML elements through JavaScript codes
FB.XFBML.Host.addElement(new FB.XFBML.LoginButton($("login_button")));
FB.XFBML.Host.addElement(new FB.XFBML.Name($("name1")));
FB.XFBML.Host.addElement(new FB.XFBML.ProfilePic($("pic1")));
});
//]]>
</script>
</body>
</html>
