Getting Started with Facebook JS (FBJS)
I’ve only recently started developing Facebook Apps and being a strong front-end developer I was very confident that I would be able to pickup FBJS quickly like I have with many other Javascript Frameworks. My confidence what short-lived however, once I discovered that Facebook had a very restricting framework and cache system that would make JS programming something quite a bit less desirable than awesome frameworks like jQuery or Prototype
What you CAN’T do in FBJS
I learned very quickly, that Facebook JavaScript does not allow some very common native functions such as onload, arrays and alerts as well as access to many properties of the document or window level of the DOM. There are workarounds and alternative methods that you can use instead:
window.onload in FBJS
Instead of using window.onload to initialize your functions, use setTimeout.
setTimeout( function(){ }, 10 );
Even an empty setTimout at the beginning of your script will kick start your functions which would normally auto init (this seems to work fine in canvas, but not so much in tabs).
alert alternative for FBJS
Since you can’t use alert or document.write, use Facebook’s dialog box:
new Dialog().showMessage('Dialog', 'This is text');
document.write alternative for FBJS
Since you don’t have access to the document or window levels of the DOM, you’ll want to setup a little include for testing. I drop in this code when i want to quickly output:
<script>
function logOutput(){
var text = "This will be inserted into my log div";
document.getElementById('log').setTextValue(text);
}
</script>
<div id="log"></div>Trouble with JS Arrays in Facebook
For whatever reason, facebook also decided to rip out support for creating objects which also eliminated the way most of us make arrays:
// new Array() is not supported in FBJS var myarray = []; myarray[0] = 'stuff'; // or myarray['foo'] = 'bar'; // or myarray.push('another example');
More to come as I wrestle further with Facebook. Any tips or comments are greatly appreciated!
As @dominicdimarco from Room 214 says, “Facebook is a moving target.” I’m glad to see you digging into this Clay, and am even happier you are doing it with us.
I am looking to pay someone to make my script work with facebook.
I get a RUNTIME ERROR: Cannot allow external script.
Here is my script:
I convert it in the tools and get the runtime error message.
Is there anyway around this?
Thanks so much… I am a novice at this.
Earle
Online
For the onload trick, when you say “this seems to work fine in tabs, but not so much in canvas” are you sure you don’t have that backwards? Works fine in canvas, but not in tabs?
Yes, Tom I had that backwards and thank you for pointing out. BTW, i was reading your post on the F8/Facebook Widgets being down.. i think Facebook got hit with more of a load than they were truly prepared for, but I’ve noticed these services coming back online and working properly in the past couple days.
Thanks Clay – and yes, you’re right things are working much better now.
Very helpful information. I bookmarked it. Thanks.
Jessica S.
http://nocostwebsite.co.cc
Hey I wana to add facebook interaction in my site
http://www.bdchatsites.com how can i do this
@bdchatsites, i would start with Facebook widgets: http://developers.facebook.com/plugins
Yeah I’ve been doing some facebook apps too and I must say their FBJS is the most excruciating part, up until now I still can’t mange to make those pop up comments. Plus their documentation is not that user friendly