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

Question

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

Answer 1

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...

Answer 2

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">

Answer 3

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/

Answer 4

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.