fbml not getting parsed/rendered on ajax response - facebook

I am developing a facebook app (using iframe).
I have a situation where my page is fully loaded and it shows the fbml content (request-form) properly, but then on some action, I make ajax call to fetch updated fbml content from server (php). It brings the code, but that fbml is not getting parsed/rendered, and the enclosing div remains blank.
Following is the fbml that i am fetching using ajax:
<fb:serverfbml width="615">
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="some value"
.......//other code.....>
<fb:multi-friend-selector
.......//other code.....
/>
</fb:request-form>
</fbml>
</script>
</fb:serverfbml>
After ajax response, the enclosing div remains blank, but in firebug i could see following code in it:
<div id="enclosing_div_id">
<fb:serverfbml width="615"> </fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="some value"
.......//other code.....>
<fb:multi-friend-selector
.......//other code.....
/>
</fb:request-form>
</fbml>
</script>
</div>
Though, it's not getting rendered on my page.
Please guide.
Thanks
==============================
UPDATE:
I have checked all of following, but they don't seem to be working in my case.
FB.XFBML.parse();
if ( FB.XFBML.Host.parseDomTree )
setTimeout( FB.XFBML.Host.parseDomTree, 0 );
FB.XFBML.parse(document.getElementById('invite_new_div'), function() {
alert('I rendered');
});
Please note I've not used FBJS in my app so far.

It looks like you're just putting the fbml code into your div and not pulling in the output content which should have been rendered on the facebook server and presented to you as standard html. The browser doesn't know how to render fbml so that is why you just see an empty div.
Update: After you have posted the FB js code it makes sense. According to this artice:
http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
You can only render the following fbml tags:
* fb:activity
* fb:add-profile-tab
* fb:bookmark
* fb:comments
* fb:friendpile
* fb:like
* fb:like-box
* fb:live-stream
* fb:login-button
* fb:recommendations
* fb:serverFbml
* fb:profile-pic
* fb:user-status
As you can see the form element is not listed as one of them. This might be your problem.

Related

XFBML Send Invitation Preview Dialog Box got cut off by iframe size

i been stressed with this thing all day. so i made a invitation apps on my facebook fans page, to get people suggest or invite to their fans about my fan page.
my xfbml code are like this
<div id="fb-root" style="overflow:auto;">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : '2071839326xxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:serverFbml width="520">
<script type="text/fbml">
<fb:request-form
action="http://www.facebook.com/pages/Nikolius-Web-Development-Tutorial/190882787595987"
method="POST"
invite="true"
type="Nikolius-Web"
content="Undang Temen bergabung di Nikolius-Web <fb:req-choice url='http://www.facebook.com/pages/Nikolius-Web-Development-Tutorial/190882787595987' label='Go' />"
>
<fb:multi-friend-selector actiontext="Undang Temen bergabung di Nikolius-Web" rows="3" cols="3" showborder="true" />
</fb:request-form>
</script>
</fb:serverFbml>
</div>
the problem is when i click the send invitation button, and a dialog confirmation comes up. the dialog box got cut off in the right side like in this picture
any ideas how to resolved this problem. when i see the manchester united fan page that have the same apps, the dialog box just show normaly. already tried this whole day but still struggle to get this right. :(
sorry for my english. hope you guys know what i mean.
FBML is being deprecated very soon. I would suggest rewriting your app using the latest Facebook APIs. It's possible that the latest dialogs don't crop while shown as a page tab app.
You can replace the width in tag fb:serverFbml width="520" to fb:serverFbml width="420" that will be work as required.

jQuery UI and invite form

I am using the following invite code on my facebook app:
<fb:serverFbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action='http://localhost:8080/home'
method='POST'
invite='true'
type='MyApp'
content='Click here'
<fb:multi-friend-selector
actiontext="Invite your friends to join">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
It works fine when I am using it inside a DIV, but if I try to use jQuery UI and turn the DIV into dialog(), when a user opens the dialog it is empty (the fb:serverFbml tag does not generate the invitation form).
Has anyone encountered this issue?
Thanks,
Joel
I think it won't work.
The quick and dirty solution is: use an iframe instead of a div.
Which platform you are using??(Iframe or FBML??)
I am also facing the same problem. Then i shift to fbml application and use FB:Dialog to do the same and I got it working..

How to embed iframe in facebook?

An associate of mine maintains a facebook page for the company we work for.
The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.
The associate who does facebook is not a programer so he asked me to build something.
I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.
We want to embed this page on facebook using an iframe.
First we just tried entering the iframe, which did not work,
then we found a tutorial and tried to embed the iframe the way it says like this:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1
Then we get a JS error like this:
Uncaught reference error:
a325461252_link_1 not defined
But every once in a while it will work but 99% of the time we get this error.
I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.
Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.
Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.
I just tested the following and it worked:
<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
<fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>
<fb:js-string var="location_two">
<fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:
<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />
Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.
BTW: To programmatically add iframes in Facebook you can use JavaScript like so:
<script type="text/javascript">
var Iframe = document.createElement('iframe');
Iframe.setStyle('smartsize','true');
Iframe.setStyle('frameborder','yes');
Iframe.setStyle('scrolling','no');
Iframe.setStyle('include_fb_sig','true');
Iframe.setStyle('width','500px');
Iframe.setStyle('height','500px');
Iframe.setSrc("http://www.msn.com");
document.getRootElement().appendChild(Iframe);
</script>
Good Luck!

Facebook, iframe app, fb:request-form, action attribute problem

I'm making a facebook iframe application
I'm making a request form with my own form data. What should I do in order to process the data?
If I put action="http://apps.facebook.com/[appName]/abc.php" , i.e.
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="http://apps.facebook.com/[appName]/abc.php" method="post" type="abc" content="abc">
<textarea name="pm" fb_protected="true" ></textarea>
<fb:multi-friend-selector showborder="false" max="35" actiontext="test" email_invite="true" bypass="cancel" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Then the result is funny... A facebook page inside the facebook app's iframe !
but if I put action="http://[my own domain / facebook connect url]/abc.php" , i.e.
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="http://[my own domain / facebook connect url]/abc.php" method="post" type="abc" content="abc">
<textarea name="pm" fb_protected="true" ></textarea>
<fb:multi-friend-selector showborder="false" max="35" actiontext="test" email_invite="true" bypass="cancel" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Then the result page will be rendered WITHOUT facebook template (that means losing all top facebook banner and bottom facebook bar like the facebook chats etc)
Anyone knows what's wrong?
Thanks a lot for reading
The key to the target="_top" is that you have to place it on both the request form and the multi-friend-selector in order for it to work on submit and cancel, respectively.
The request-form needs target="_top" so that the form will load in the top frame when submitted, but the cancel functionality is controlled by the multi-friend-selector, not the request-form. Ergo, you need target="_top" on the multi-friend-selector as well so that the cancel action will load in the top frame.
Now, I just wish Facebook would allow a "none" action for cancel that would just hide the frame...
NEW Answer:
Facebook has started phasing out FBML and is strongly encouraging developers to switch to Requests 2.0. Using the new FB.ui({method:'apprequest',...}); in the JavaScript SDK is an easier way to do this. It also supports off-Facebook pages http://af-design.com/blog/2011/02/17/using-facebook-requests-to-promote-a-website/
OLD Answer:
I found that passing the FBML as an attribute for fb:serverfbml worked.
<fb:serverfbml fbml=" {HTML Escaped FBML Here} " ></fb:serverfbml>
I posted about my findings here: http://af-design.com/blog/2010/11/23/fbserverfbml-on-canvas-iframe/
The way I handled this was to have my form processor page emit no output except an "< fb:redirect >" that pointed back to the main app.
How did you use this < fb:redirect > ?
ok I found it try adding target="_top"
http://apps.facebook.com/myapp' label='Join Now' />"
action="http://apps.facebook.com/myapp"
target="_top"
invite="true">

Can I use Facebook's fb:friend-selector in an iframe?

I'm trying to use Facebook's fb:friend-selector FBML tag, but my application is running in an iframe. Is it possible to use this tag in an iframe? If so does anyone have any examples?
Yes, this is definitely possible, but you have to use Facebook Connect and XFBML. Specifically, you want to use the fb:serverfbml tag to get fb:friend-selector working. I have an iframe app whereby I use all of this and the fb:friend-selector in the standard "invite friends to your app" context, and it works great.
Here is the body of my template file, which gets output inside the body of my iframe:
<fb:serverfbml style="width: 650px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://example.com/invite/sent"
method="POST"
invite="true"
type="My App"
content="Try out my app!
<fb:req-choice url='http://your-facebook-canvas-url'
label='<?php echo htmlspecialchars("Accept button text",ENT_QUOTES); ?>'
/>
" >
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to try My App."
exclude_ids="<?php echo $excludeIds; ?>"
rows="3"
/>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
In the footer of the page, I have the standard Facebook Connect code, which will load and render the fb:serverfbml contents:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>
That should be all you need (fill in your own options where applicable, of course). You'll have to set up Facebook Connect to work with a cross-domain receiver file. I suggest following the rendering XFBML steps.
The question in this thread is still relevant but the answer is out of date. You should use the new javascript SDK. This should replace the second code snippet posted by zombat
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out
}
});
</script>
more info here: http://www.clickonchris.com/2010/11/facebook-javascript-sdks/
Since that are a lot of questions about the friend-selector within an iframe.
Guys the correct sintax now is <fb:serverfbml width="650px">
one MAJOR and IMPORTANT point that gets missed is that many of you (including me) stick in scripts just about anywhere... but the "FB" load.js file needs to be loaded IMMEDIATELY after the body tag.
at least this is what I found to make everything work and humm accordingly. I found it on a post on some other site (wasn't sure if I should post it here or not...) but it came after spending countless hours, doing the above aforementioned - as well as following every other 1,2, 3 step punch into getting the iframe to size properly...
and now i've gotten it to work :)