Why does this XFBML markup embedded within an iframe'd facebook application not display anything?

问题

I've been trying to get this application working on Facebook, but nothing seems to render within the application except

"Hi this is some sample text."
A box stroked in red.  "I am My photo " and a default silhoutte of a Facebook user
as the photo.

The following is the source code of the canvas frame:

<!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>Cutting Masala Chai Invitation</title>
</head>
<body>

<script type="text/javascript"
    src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>

Hi this is some sample text.

<fb:serverfbml style="border: 1px solid red; min-width: 700px;min-height: 400px">
    <script type="text/fbml">
        <fb:fbml>
            <fb:request-form 
                action="http://www.cuttingmasalachai.com/facebook" 
                method="POST" 
                invite="true" 
                type="Cutting Masala Chai" 
                content="&lt;fb:name uid=&quot;605869619&quot; firstnameonly=&quot;true&quot; shownetwork=&quot;false&quot; /&gt;wants to invite you share stories and vote for celebrities for the book Cutting Masala Chai,&lt;fb:req-choice url=&quot;http://apps.facebook.com/cuttingmasalachai&quot; label=&quot;Add Cutting Masala Chai&quot; /&gt;"> 
                <fb:multi-friend-selector 
                    max="20" 
                    actiontext="Invite your friends to Cutting Masala Chai." 
                    showborder="false" 
                    rows="5">
                </fb:multi-friend-selector>
            </fb:request-form>
        </fb:fbml>
    </script>

</fb:serverfbml>

I am <fb:name uid="605869619" firstnameonly="true" shownetwork="false"></fb:name>
My photo <fb:profile-pic uid="605869619"></fb:profile-pic>



<script type="text/javascript"> 
    FB_RequireFeatures(["XFBML"], function(){

        console.log('fb_requirefeatures function got called');
        FB.Facebook.init("0acf016613ca171e9665f128d318fd75", "/facebook/xd_receiver.html"); 
    });
</script>
</body>
</html>

Application settings:

Canvas Mode: IFRAME
Canvas Callback URL: http://www.cuttingmasalachai.com/facebook
Canvas URL: http://apps.facebook.com/cuttingmasalachai
URL to xd_receiver.html: http://www.cuttingmasalachai.com/facebook/xd_receiver.html
Connect URL: http://www.cuttingmasalachai.com/facebook
Base Domain: www.cuttingmasalachai.com

I'd be grateful for any help. Thank you.

回答1:

A couple other people were facing the same problem:

Facebook Forum Discussion about this problem.

The problem was with the Connect URL and the base domain I was using and a LITTLE bit of PATIENCE.

Propagating settings to servers takes a few minutes on Facebook. I just needed to wait a bit more after setting the connect url and base domain to these:

Connect URL: http://www.cuttingmasalachai.com/
Base Domain: cuttingmasalachai.com

Hope that helps anybody that comes across this problem. Cheers. Also, 5 beers for adougherty and krisoye from the forums for posting the problem and providing solutions.

回答2:

I've read on the wiki that the accepted path of xd_receiver.html depends on the browser, and Firefox accept the full path, while IE Opera and Safari want a path relative to the current page (like "xd_receiver.html" or "../xd_receiver.html" ).

I have to thank you because your hint on setting the URL and basedomain in Connect saved my day :-)

Ciao, Roberto

回答3:

I had a very similar problem, and it turned out to be caused by fbml not being enabled by default. Instead, iframes applications are.

I turned it on (there's a radio choice fbml/iframe) in my application settings and discovered there's a reason: iframes are faster.

Documentation on iframes anyway is getting scarce and intermixed with pages talking only about facebook connect (it's very similar, if not the same, in many aspects, yes)

Fbml documention seems to be the best one, now. (And fbml applications look good with less effort)

回答4:

Settings in application in connect connect url like your Canvas Callback URL (http://www.baseurl/name/), Base Domain without www (baseurl) and this in javascript help.

<script type="text/javascript"> 
    FB_RequireFeatures(["XFBML"], function() {
        console.log('fb_requirefeatures function got called');
        FB.Facebook.init("you_application_id)", "invite_friends.tpl"); 
    });
</script>

Add this to the end of file where is

<fb:serverfbml style="border: 1px solid red; min-width: 700px;min-height: 400px">

All my code is in file invite_friends.tpl.

来源：https://stackoverflow.com/questions/1142020/why-does-this-xfbml-markup-embedded-within-an-iframed-facebook-application-not

标签

google-app-engine

facebook

facebook-iframe