Saturday, August 7, 2010

Example

This is an example of how you can use this extension in HTML5 (assume all code is in the body element):

<h3>Members</h3>
<embed data-fb="login-button" data-show-faces="true" />
<h3>Recent activity</h3>
<embed data-fb="activity" data-site="***" data-width="200" data-header="false"
data-border_color="#fff" data-recommendations="false" />
<div id="fb-root"></div>
<!-- the JavaScript API -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<!-- the extention script from this article -->
<script src="/scripts/fb.js"></script>
<script>
//<![CDATA[
FB.init({apiKey: '***', appId: '***', status: true, cookie: true, fbml5: true});
//]]>
</script>


This would be the equivalent XHTML code:

<h3>Members</h3>
<fb:login-button show-faces="true" />
<h3>Recent activity</h3>
<fb:activity site="***" width="200" header="false"
border_color="#fff" recommendations="false" />
<div id="fb-root"></div>
<!-- the JavaScript API -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<!-- the extention script from this article -->
<script src="/scripts/fb.js"></script>
<script>
//<![CDATA[
FB.init({apiKey: '***', appId: '***', status: true, cookie: true, fbml5: true});
//]]>
</script>

3 comments:

  1. Thanks so much for your blog posts! I'll be keeping watch for more FBML5 updates. :)

    ReplyDelete
  2. Looking good, but how could I include the facebook opengraph meta head info as well without using invalid code?

    ReplyDelete
  3. Interesting idea. I think you should consider sending a pull request to facebook/connect-js: https://github.com/facebook/connect-js/

    ReplyDelete