From Facebook Developer Wiki

[edit] This page should be reorganized!

This is main page on the FBML. However the content here is extremely unorganized and fragmented. This should be enriched with content and divided in sections to explain step by step how FBJS should be used. If you UNLOCK the page we could contribute. Also there is no mention to JS API

Vote here for unlocking it: Chris C.

[edit] FBJS Bugs/Feature Requests/Help

We've setup a BugZilla installation for reporting Platform-related bugs: http://bugs.developers.facebook.com/. Please direct all bug reports and feature requests there.

If you have general FBJS questions, the Platform Developer Forum is a good resource.

[edit] Wishlist

For events, the property charCode is the Mozilla equivalent of keyCode in IE -- for the KeyPress event. This property should be accessible. --651300624 23:37, 7 May 2008 (PDT)

Getting these two pieces of the puzzle working in FBJS will allow many applications to ditch their servers altogether and rely upon the client and Facebook's DataStore API to create sophisticated applications using only static HTML. This presents an exciting opportunity for plugin developers; without a server you can guarantee that as long as Facebook's architecture will scale to millions of users (I think it can... ;o) then the developers's appplication can also scale with no costs involved:

• Allow direct access from FBJS to the DataStore API.
• Verify that one of the XSL Stylesheet transformation APIs for Javascript works within the FBJS sandbox.

--536286910 03:38, 23 November 2008 (PST)

My app ID should not be prepended to the built-in class Array. I can't use it now. --651300624 23:37, 7 May 2008 (PDT)

• Don't need to use "new Array();". You can construct a new array using: var myarray = []; --536286910 03:38, 23 November 2008 (PST)

It should be possible to call Date.now(), but my app ID is prepended to the class name. --651300624 23:37, 7 May 2008 (PDT)

• Please add a elementByClassName function -- 511600025 12:07, 18 June 2008 (PDT)

Is there a function similar to window.open() in javascript.

• Allow non-deffered (automatic without "activating" the div) javascript execution on page load for non-canvas (profile) pages for specific javascript statements. If there are security issues with this method, at least allow one specific JS command on load: an Ajax request to fill a div. This would allow developers to stop relying on costly cronjobs and server side processing to update their users' profile boxes with profile.setFBML and instead allow Ajax to fill the content dynamically. It would also mean that profile boxes could be far more dynamic, versatile and user specific, which should be Facebook's goal. -- 3:47, 13 September 2008 (EDT)

• Include in the example a simple Ajax preloader! --565413697 11:52, 14 December 2008 (PST)

• Implement setAttribute(attr, val) function. Otherwise, how do I set the content attribute of a fb:request-form based on the value (onchange) of a select element that I put inside the request-form to allow for users to send different types of requests?

[edit] Creating FBML Elements

The article says that document.createElement limited to fb:swf, but it has supported other elements for a while. --phil 08:19, 23 February 2008 (PST)

Yeah! This article had always stopped me trying, but I saw another guy's FBJS dynamically adding <li> tags inside an unordered list just the other day. I want to know the full capabilities. - Robin 02:44, 1 April 2009 (PDT)

I spoke with the engineer who created FBJS and he verified that the only FBML tag we support is fb:swf. You can create any HTML element, which supports the <ul> observation. If you're able to create other FBML tags, please let me know and we can follow up here. Thanks. -- Pete (563683308 12:43, 3 April 2009 (PDT))

[edit] setTextValue

The article says that setTextValue removes child nodes - This worked in FireFox but killed Internet Explorer - Use removeChild() Martin L 18:53, 15 May 2008 (PDT)

Sample code looks like this:Sumit

      var root = document.getElementById('my_root');
      var childCount = root.getChildNodes().length;
      while(childCount-->0){
          root.removeChild(root.getLastChild());
      }

[edit] setInnerXHTML

setInnerXHTML requires that there be a containing element for whatever content is passed in (unlike setInnerFBML, which can have multiple elements at root level). This is very problematic on some circumstances, for example if replacing the content of a <select></select> with multiple <option> elements they can not be contained inside another element or it breaks the rendering of the options. it would be great if this functionality/behavior could be addressed. Kevin

setInnerXHTML has bug while dealing with "table" as content on IE (works on firefox though). I had to remove the entire table structure and move to a css based 2-column design. For details on how to do this, look at CSS2-Tableless Forms -Sumit

Other way would be to wrap this table with in <div>...</div> tags. Other thing i noticed that all the data received from an ajax call get custom attribute/value pairs stripped off. best bet is to use classes based instead of inline styles. So for example <div style="width: 10px">...</div> would not work however <div class="10pxwidth">...</div> would work. -Sumit

Adding table content dynamically is problem in ie (works fine in FF). The solution to this is Thead,Tbody,Tfoot tags are mandatory for table.--Venu

[edit] Select Elements

If you have a <select> element on your page, you can access the options array using the FBJS command getOptions().

When it comes to dealing with the options objects found in this array, I haven't found an FBJS equivalent of the text property. Some of the other FBJS properties seem to work, however, like getId().

--Courtland 06:33, 18 May 2008 (PDT)

this should be updated here http://wiki.developers.facebook.com/index.php/FBJS

[edit] Ajax on public canvas

It is important to know that Ajax does not work when a user is viewing a page through a public canvas (i.e. the user is not logged in to Facebook). Ajax fails silently in this case - no onerror is thrown and the app's server is never hit with the Ajax request. Worse there's no indication to the user that they need to login before performing the action and no way for the App developer to know that the user is not logged in and warn the user (it is not possible to distinguish between the user not being logged in to facebook and the user not being logged into the App). This means that any page that uses Ajax needs to "require login" to view. This ensures that the user is logged into facebook but also, unfortunately, requires that they login to the app as well (something that might not always be desired or needed if it were not for this bug). You can see the status of this bug (1009) in the tracker - does now

--Kevin 18 Aug, 2008

[edit] Undocumented FBJS Features

I have discovered, that some of the object properties, not listed in article can be used to manipulate objects. For example you may set cell property colspan and rowspan using setColSpan and setRowSpan as shown below.

This code works:

<script>
function setColSpan(){
   document.getElementById('mycell').setColSpan("2");
}
</script>
<table id="myTable" border="1">
<tr> <td colspan="1" id="mycell">my big cell 1</td> </tr>
<tr> <td>cell 2</td><td>cell 3</td> </tr>
</table>
<form><input type="button" onclick="setColSpan()" value="Change colspan"></form>

--alvin 03:29, 19 September 2008 (PDT)

[edit] setStyle/getStyle behaving differently across various browsers

the setStyle method appears to work differently in Firefox to the way it does in Opera, Internet Explorer and Safari.

When using setStyle('background', '#cccccc'), getStyle('background') returns #cccccc in the others but in Firefox it returns

rgb(204, 204, 204) repeat scroll 0% 0%.

I'm not sure if this is documented anywhere but this stumped me for quite a while when my code wasn't behaving correctly in Firefox.

[edit] Reading Request Parameters from Javascript

There's no document.getLocation() method. Is there any way at all of getting request parameters passed into the canvas_url? I'm posting: http://.../friends.jsp?myfriend=123456

Can I get hold of myfriend=123456 is FBJS? At the moment, I'm reading the value off the URL on the server side; I'd prefer to read it off on the client (browser) side.

In javascript i can set/retrive the hash value of an URL using the window.location.hash or document.location.hash property. I need similar kind of operation using FBJS also. So that, i can easlity set and retrive the vaule after '#' in the URL.

[edit] FBJS 2.0

Can anyone point me in the direction of finding out more about FBJS 2.0? - 193700405 04:09, 10 March 2009 (PDT)