Using FBML in a Facebook Iframes Application With ServerFBML
18 Jun, 2009 | Written by Jon | under Facebook Development
As you know, Facebook Connect and Facebook Iframe Aps restrict the developer to only using XFBML if the page is being served from somewhere outside of Facebook (as all iframes and connect applications are by definition)
Facebook does make available, however, a handy XFBML tag Fb:serverfbml that allows you to serve up regular FBML inside a Facebook served iframe within your non-FBML facebook application.
The example below shows how the fb:friend-selector FBML tag can be implemented in an iframe application. This example populate a friend selector and display’s that friend’s Facebook UserID when the post button is clicked.
<?php
//Link in library. Note my directory structure may be different
require_once '../fblibrary/facebook.php';
//Authentication Keys
//My Authentication Keys. Sored in $appapikey and $appsecret respectively
require_once 'keys.php';
//Construct the class
$facebook = new Facebook($appapikey, $appsecret);
//Require login
$user_id = $facebook->get_loggedin_user();
if (!$user_id>0) {
$user_id = $facebook->require_login();
}
//Get the authentication variables
foreach($_GET as $key => $value) {
if (strpos($key,"fb_sig")!==false) {
if ($i!=0) $fbvars.= "&";
$fbvars.= "$key=$value";
$i++;
}
}
?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<?=$_GET[friend_sel];?>
<fb:serverfbml style="width: 500px; height:20px;">
<script type="text/fbml">
<form id="addform" action="http://www.keywordintellect.com/facebook/iframeexample/serverfbml.php?<?=fbvars?>">
<fb:fbml>
<fb:friend-selector uid="<?=$user_id?>" name="newuid" idname="friend_sel"></fb:friend-selector>
</fb:fbml>
<input type="submit" value="Submit"/>
</form>
</script>
</fb:serverfbml>
<script type="text/javascript"> FB.init("<?=$appapikey?>", "xd_receiver.htm"); </script>
</body>
</html>
One day I will write something here...I promise. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an...
Tim White | December 5th, 2009 at 6:38 pm #
Thanks a lot for this, it really helped me out. Since my app runs in the facebook canvas thing, I set the target=”_top” attribute on my element. It prevents the resulting page from getting loaded in the XFBML nested iframe.
This method also works with selective XFBML element rendering, ie when using:
FB.XFBML.Host.addElement(new FB.XFBML.ServerFBML(document.getElementById(‘fbmlDivId’)));