Can FBML be used within an iFrame Facebook app?

Question

I am working on writing a small Facebook application just for fun and learning. Unfortunately, the Facebook developer documentation, wiki, and samples leave much to be desired.

If my application is an iFrame app (PHP), can I use FBML within the page or do I need to use the XFBML? If I need to use XFBML, is there a repository of snippets somewhere that I could look through?

I am looking to add a friend selector box. For example, welcome to the app, pick an object, send it to 20 friends.

You would think a friend selector would be a stock component for Facebook apps, but apparently not.

I can use FBQL and CSS to define my own, but wouldn't standards and consistency be nice?

Is there a definitive, from the ground up, easy to follow Facebook app developers tutorial that covers the FBML tags, the XFBML tags and what goes where with examples?

Answer 1

I think in every answer I make to a Facebook question, I pretty much mention that "Facebook documentation sucks, so don't feel bad if you can't find something."

The answer is yes, you can definitely use FBML in an IFrame application. I do it routinely. Facebook is blurring the lines between IFrame apps and FBML apps with XFBML, which is great. Basically, XFBML is just regular FBML, except that it is parsed and rendered via the Facebook Connect javascript libraries. Because of this, you see a bit of a delay before an FBML control is rendered, but generally this isn't a big problem.

I'll give you an example of loading a friend selector straight from one of my IFrame apps. You'll see that it's surrounded by fb:serverfbml tags, which you need to render several of the more complicated FBML tags. The FBML items that don't need a fb:serverfbml tag around them are listed on the XFBML wiki page.

Anyway, some code:

<fb:serverfbml style="width: 650px;"> 
<script type="text/fbml">
    <fb:fbml> 
     <fb:request-form
      action="http://my.app.com/invite/sent"
      method="POST"
      invite="true"
      type="My App Name"
      content="You should use My App Name.  All the cool kids are doing it.
       <fb:req-choice url='http://apps.facebook.com/my-app'
       label='<?php 
                     echo htmlspecialchars("That sounds sweet!",ENT_QUOTES);
                     ?>'
       /> 
      " > 
      <fb:multi-friend-selector
       showborder="false"
       actiontext="Invite your friends to use My App Name."
       exclude_ids="1234556,465555"
       rows="3"
      /> 
     </fb:request-form> 
    </fb:fbml>
</script> 
</fb:serverfbml>

Escaping quotes gets a bit tricky with all the nested tags, so you have to watch that. You can see my example is from a PHP app, and I left an htmlspecialchars() escape call in there just for illustrative purposes (even though that particular string doesn't need escaping).

Anyhow, if you've got Facebook Connect already installed for your IFrame app, then this should work with a bit of tweaking. If you don't have Facebook Connect going yet, then follow the Rendering XFBML instructions on the XFBML wiki page.