This case seems unbelievable.
I have two versions of a fbml page to display a list of users to invite. The two pages return identical html. The only difference is that one has a url like http://mydomain/user/myFriends and the other has a url http://mydomain/facebook/myFriends.
One version works great and the other gets stuck returning a 404 when the browser tries to get serverfbml from facebook. This is try in both IE and Firefox.
What's even weirder is that if I use the firefox firebug debugger and click on the url for the get for serverfbml and ask it to load it in a separate tab, I still get the same exact behavior. But I can look at the source loaded by firefox for both pages and see that it is INDENTICAL.
Here's the page's html.
<!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" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="/css/common.css"/>
</head>
<body id="page-facebook" class="facebook page-facebook-showInviteFriends logged-in ">
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<fb:serverFbml width="760" height="346" style="width: 760px; height: 346px;">
<script type="text/fbml">
<fb:fbml style="width: 324px; height: 346px;">
<fb:request-form
action=""
method="POST"
invite="true"
type="Sample Name"
content="<fb:req-choice url='' label='Join Now!'></fb:req-choice>
">
<fb:multi-friend-selector
condensed="true"
showborder="true"
actiontext="Invite your friends"
email_invite=false
import_external_friends=false
exclude_ids=""
unselected_rows="10"
selected_rows="3"
/>
<fb:request-form-submit import_external_friends="false" label="null" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
</html>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '130456257111111',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://sample.foobar.com/static/html/channel.html'
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<script type="text/javascript" src="/js/facebook.js"></script>
</body>
</html>
I figured out the problem. The app is registered with a canvas page of mydomain/facebook. Because the other page has a url that is not under /facebook the call fails. This is really poor error messages from Facebook. Nowhere obvious in the doc does it make it clear that it is a requirement that all content fetched must be under the canvas url pattern.
So I fixed it by changing my official canvas url to be a root path and changing how the default url gets mapped to my app.