I struggled for almost a day to get a skeleton iframe facebook app to render xfbml and wanted to spare others the gut wrenching experience.

URLs:
Canvas Callback URL :http://{app host}/
Connect URL :http://{app host}/
Canvas URL :http://apps.facebook.com/{app name}/

Setting the connect URL is very essential even though you are not developing a connect application per se. I guess facebook uses this to do cross domain requests.

Welcome page:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<?php
require_once 'facebook.php';

$appapikey = '<app key>';
$appsecret = '<secret key>';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
?>

<head>
  <title></title>
</head>
<body>
  This is the the the
  <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
  This is you: <fb:name uid="<?php echo  $user_id?>"></fb:name>
  <script type="text/javascript">  
    FB.init("<app key>", "xd_receiver.htm");  
  </script> 
</body>
</html>

Do not change the position of the JavaScript in the above code.

xd_receiver.htm:

<!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.js?2" type="text/javascript"></script>
  </body>
</html>

Facebook php client library can be downloaded from here.

Once rendered, you should see a link which takes you to your facebook home page.

Facebook app, PHP, Programming

, ,

March 7, 2010

8 Comments