I recently gave this brief presentation, both to the UI development group at my office and the Atlanta Facebook Developers group. It's sort of a quick-start primer for UI devs just starting to work with Facebook apps. It covers the differentiation between static fbml tabs, app tabs, and canvas pages. It points out lots of gotchas that might trip up beginners. I hope to follow this up with a video that can more clearly show how to build quick apps and tabs for UI devs.

1. Front-End
Development for
Facebook
(it doesn’t have to make you want to kill yourself)

2. FBML & HTML
Most front-end development done with regular
html and css
FBML (Facebook markup language) provides special
tags to add FB-specific functionality
Example: To display a friend selector:
<fb:multi-friend-selector actiontext="Select
friends" rows="3"/>
You’ll probably use very little FBML (if you’re lucky)

3. Styling FB Elements
Some Facebook-generated elements can be styled
via css.
Standard share buttons can be re-styled quite a
bit, by overriding FB’s own classes:
.uiButtonMedium { padding:0; }
.fb_button_text { display:none !important; }
You can add your own colors, backgrounds, and
change its dimensions.
Some are more stylable than others. Just play.
Stuff that’s in an iFrame...forget it.

4. HTML Tips
Some tags can’t be used at all:
body, html, head, iframe
Did I mention you can’t insert iFrames in tabs? They
work fine on canvas pages.
No relative references of any kind, including images,
css and js files.
Relative hyperlinks okay, provided you’re linking to a
page in Facebook.
In tabs, all your images will be cached. Cache-buster:
photo.jpg?version=2
Image maps don’t work (beats me)

5. CSS Tips
Can include external css files, but only 2. Don’t use
@import.
External css files will be cached. Changes will require
cache-busting:
facebook.css?version=2
CSS included inline is not cached.
Keep your css files separate, but include them inline
via php to avoid caching and avoid the 2-css-file limit:
<style type="text/css">
<?php echo file_get_contents("/path/to/css.css") ?>
</style>
Background images will still get cached.

6. More CSS Tips
Many CSS “hacks” are considered invalid and will be
stripped completely.
Includes the “star hack” for IE
@font-face is determined invalid and will be stripped.
So for now, can’t use new webfonts within tabs or
FBML canvas pages (canvas iframes are fine)

7. JavaScript Tips
Quite a bit of JavaScript can be used within Facebook
(if you do it their way).
Can’t include external js files in FBML, including jQuery
FBJS is augmented (crippled) version of JavaScript
Certain native JS methods can’t be used at all:
alert(), document.write()
Many native JS methods have their own FBJS
equivalents:
obj.value = ‘blah’ -> obj.setValue(‘blah’)
obj.className = ‘blah’ -> obj.setClassName(‘blah’)
Within a canvas iFrame, go nuts.

8. Page types in Facebook
ie, where does a UI developer do their stuff?
Static FBML tabs
Application tabs
Canvas FBML pages
Canvas iFrame pages

9. Page types in Facebook
Static FBML tabs
Just paste in all your html, fbml and (inline) css
and javascript into a field.
Everything still needs externally hosted
To add, do a search for ‘s tatic fbml’ and select ‘ dd
a
to page’. Select a page you admin
Go to that page and click ‘edit page’. Find the static
FBML app and ‘edit’.
Paste in your code and save.
Edit app settings and add it as a tab to your page

10. Page types in Facebook
Application Tabs
Similar to Static FBML tabs. Same limitations
apply.
Code is pulled into the tab from your own external
URL
Benefits are:
Easier updates
Can use any back-end code prior to render (PHP,
Ruby, .NET)
Code can be in version control

11. Page types in Facebook
Canvas FBML Pages
Canvas pages are anything with apps.facebook.com
as their URL.
FBML Canvas pages have many of the same
limitations as tabs.
You can include iFrames via: <fb:iframe>
You can include external js files, but they will be
cached, just like css files. The js must be FBJS-
compliant.
Still can’t include jQuery, but can do whatever you
want within an iFrame

12. Page types in Facebook
Canvas iFrame Pages
Created by setting ‘canvas type’ to ‘iFrame’ within
your application’s settings.
The app’s canvas pages will all be iFramed now,
using the ‘canvas url’ specified in app settings.
These pages can be normal pages, built like you’d
build them for any “normal” website.
If you need to utilize Facebook functionality
(shares, likes, etc) you’ll need to either use the
Javascript or PHP SDK’s to hook into the FB API.

13. Roadmap Update Alert!
Some of what I just told you might soon be a lie
August 19th, 2010, FB updates the developer
roadmap. In Q4 they’ll be making page tabs iFramed
If they don’t screw it up, this will be HUGE for UI devs
“We don't recommend FBML for new developers. If
you aren't already using FBML, you should instead
implement your application within an iframe.
“The one exception: if you absolutely must create an
application that appears as a tab on a Facebook
Page, you will need to use FBML for now; tabs do not
currently support iframes directly. We will be
transitioning tabs to iframes later this year.”

14. Reference Links
Official Facebook
http://developers.facebook.com/docs/
http://developers.facebook.com/docs/reference/fbml/
http://developers.facebook.com/docs/fbjs
http://developers.facebook.com/roadmap
Shameless Plugs
http://fbmhell.com
http://ihatemarkzuckerberg.com

15. Questions?
Bueller?