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">
Related
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>
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 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..