Fb:serverFbml on Canvas Iframe

Are you lost after reading Facebook’s documentation on <fb:serverFbml />? You’re not alone. While trying to embed an invitation request in an iframed canvas application, it proved unhelpful but I found this work around. FBML is being phased out and the documentation is hardly helpful any longer. However, it’s still a somewhat useful tool and you can still get it to work. Technically this example is xFBML, a subset of FBML that was implemented for the now defunct Facebook Connect. If you are working with the new JavaScript library this example will get the iframe to render.

Instead of doing something like this (which won’t work):

<div id="serverfbml">
   <fb:serverFbml>
      <script type="text/fbml">
         <fb:fbml>
            <!-- your request or whatever here -->
         </fb:fbml>
      </script>
   </fb:serverfbml>
</div>
 
<script type="text/javascript">
   FB.XFBML.parse(document.getElementById('serverfbml'));
</script>

Try this:

<div id="serverfbml">
   <?php
      $fbml = htmlentities('<!-- your request or whatever here -->');
      print '<fb:serverfbml fbml="' . $fbml . '"></fb:serverfbml>';
   ?>
</div>
 
<script type="text/javascript">
   FB.XFBML.parse(document.getElementById('serverfbml'));
</script>

Not only is the code cleaner, it actually works with the new JavaScript (ie non-Connect) library. Also notice that I pass the wrapper div as a parameter, this is to speed up processing by saving the client from parsing the full DOM to find the FBML you want parsed.

Note the example assumes you’ve created the FB client already. I’d love to hear of any alternative ways people might be doing this.

Update (2/18): The new Requests 2.0 feature makes this largely obsolete. Learn more about issuing the new requests.

This entry was posted in Facebook Development, xFBML and tagged , , . Bookmark the permalink.

10 Responses to Fb:serverFbml on Canvas Iframe

  1. stoefln says:

    i managed to get a javascript-only version running:

    String.prototype.htmlEntities = function () {
    return this.replace(/&/g,’&’).replace(//g,’>’);
    };

    var postUrl = App.baseUrl;
    var fbml = ‘ ‘;
    fbml = fbml.htmlEntities().replace(/”/g,”‘”);
    $(‘#invite-box’).append(”);
    FB.XFBML.parse();

  2. stoefln says:

    my last post got formated completely wrong. For a correct version, please look it up here:
    http://www.ajado.com/blog/embedding-a-xfbml-facebook-friend-invite-request-form-javascript-only/

  3. Erik says:

    @stoefln this is a very similar approach, thanks for sharing

  4. Matt Dunlap says:

    Trying to get the multi-friend-selector with AJAX would not work with normal fbml, but your solution did.

    Thanks

  5. Jeremy says:

    This code helped me get a invite friends form working on a page, but suddenly yesterday it stopped working. Is serverfbml.php down now (it shows a 404 but I heard it can 404 because of errors–though even the basic fbml test code that worked before is not working now)? Is anyone else having problems with this?

  6. Jeremy says:

    Just wanted to post an update to my last question. I managed to get it working after all, it was a problem with something unrelated.

  7. Bruno says:

    serverfbml.php is returning 404, but returns an HTML as a body…

  8. Pingback: Tweets that mention Fb:serverFbml on Canvas Iframe | AF-Design -- Topsy.com

  9. Erik says:

    I recommend switching to the Request 2.0 tool which leverages the JavaScript SDK to make these requests in the future. http://af-design.com/blog/2011/02/17/using-facebook-requests-to-promote-a-website/

  10. _b1 says:

    JS SDK return mystical request_ids not user ids. For most tasks I cant use it – only for requests.
    FB devs create plugins only for own goals.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>