tags:

views:

2932

answers:

4
+2  Q: 

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"&gt;
<html xmlns=http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"&gt;
<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"&gt;&lt;/script&gt;

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&amp;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.

+3  A: 

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.

yesudeep  2009-07-17 11:35:49
And then stuff happens.Turns out the page renders ONLY in Safari and Chrome.Firefox (on every computer I have access to) shows *nothing*.
yesudeep  2009-07-17 20:22:43
So does anybody have a solution to this problem?
yesudeep  2009-07-19 14:56:53
thank you! if you are developing an application that stays within facebook using an iframe, it never comes to mind why you would set your connect url.
AdamB  2010-02-14 03:51:53
+1  A: 

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

RobM  2009-08-09 15:34:24
A: 

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)

ZJR  2009-10-25 02:34:40
A: 

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.

FB_RequireFeatures(["XFBML"], function(){ console.log('fb_requirefeatures function got called'); FB.Facebook.init("you_application_id)", "invite_friends.tpl"); });

Add this to the end of file where is ........ All my code is in file invite_friends.tpl.

rafael kaz  2010-03-03 19:37:10

related questions

.html() jQuery method bizzare bug -   resolves to empty space locally, but not on production.
cron jobs on google appengine
How do I get the key value of a db.ReferenceProperty without a database hit?
Is Google App Engine a worthy platform for a Lifestreaming app?
Sure Google Appengine scales, but is it also fast?
Feedback on using Google App Engine?
Delete all data for a kind in Google App Engine
How can I unit test responses from the webapp WSGI application in Google App Engine?
How to think in data stores instead of databases?
How do you access an authenticated Google App Engine service from a (non-web) python client?
Google App Engine: how can I programmatically access the properties of my Model class?
Upload files in Google App Engine
How do you design data models for Bigtable/Datastore (GAE) ?
Anyone out there using web2py?
Which python framework is best for web development in google app engine?
How can I access App Engine through a Corporate proxy?
What's a good way to find relative paths in Google App Engine?
Any good AJAX framework for Google App Engine apps?
Python: No module named core.exceptions
Project structure for Google App Engine
Google App Engine: Is it possible to do a Gql LIKE query?
How to get the correct Content-Length for a POST request.
Deleting an Google App Engine application
Django Templates and variable attributes.
Graphing JavaScript Library