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..
Related
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.
In the my facebook app i m using fb request form there i want to know that user has send friend request to any one or just skip the page.
code is
<fb:serverFbml width= "620" style="float:center">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action='<?php echo $config["base_url"]."?action=3;?>'
target="_top"
method="POST"
invite="true"
type="....some thing"
content="...some thing"
>
<fb:multi-friend-selector target="_top"
showborder="false"
actiontext="----" rows='4' cols='4' max='1' import_external_friends = "false">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
as the developer document says that if user either send the request or skip the request page it will go to action URL . Is there any thing to differentiate between these two case.
Please ignore any English grammar mistake.
Thanks in Advance.
The information you're looking for is most likely included in the server response, check it.
Btw, FBML is going to be deprecated very soon, so if this is a new application, you better switch to the JavaScript SDK.
Hi
I am working on an iframe based facebook application, I want to develop an auto complete friend selector, but I think it is already provided by facebook? So is that already exist or I need to use JQuery autocomplete? In any case please tell that what facebook provides to developers? What is the best way to do that?
Take a look here. You will find many examples including friend selector, and you can run them from your browser
There also exist two JQuery Plugins you might be interested in. The first is an autocomplete plugin which includes a Facebook theme and the second is a full friend selector plugin. I already used both on production:
http://loopj.com/jquery-tokeninput/demo.html (see the facebook theme)
http://labs.thesedays.com/blog/2011/06/20/the-missing-facebook-interface-component-for-friend-selection/
Friend selector still exists - albeit rather clunky - Check out serverFbml which serves as a wrapper of the legacy friend-selector
Example:
<fb:serverFbml style="width: 755px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="<URL for post invite action, see fb:request-form docs for details>"
method="POST"
invite="true"
type="XFBML"
content="This is a test invitation from XFBML test app
<fb:req-choice url="see fb:req-choice docs for details."
label="Ignore the Facebook test app!" />
">
</fb:request-form>
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to use Facebook." />
</fb:fbml>
</script>
</fb:serverFbml>
I'm using the facebook multi-friend-selector in my facebook page which is loading all my friends in an iFrame. But after selecting a friend from the list and sending an invitation then redirection is not happening correctly to the corresponding callback URL.
I just struck up with this issue, can anybody please help me to fix this issue.
My code for the multi-friend-selector is:
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="http://gelofactory.com/dev/SPIN/SXSW/share.php" method="POST" invite="true" type="Download" content="Sharing">
<fb:multi-friend-selector showborder="false" bypass="cancel" email_invite="false" import_external_friends="false" actiontext="Share with your friends." cols="3" rows="3" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Thanks,
Siva
Are you getting any errors? anyway, here are some suggestions:
Please consider using the new Requests Dialog
Make sure you are using the Canvas URL in the action parameter: http://CANVAS_URL/path/to/share.php
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">