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.
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();
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/
@stoefln this is a very similar approach, thanks for sharing
Trying to get the multi-friend-selector with AJAX would not work with normal fbml, but your solution did.
Thanks
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?
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.
serverfbml.php is returning 404, but returns an HTML as a body…
Pingback: Tweets that mention Fb:serverFbml on Canvas Iframe | AF-Design -- Topsy.com
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/
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.