Front-End Development for Facebook


Published on

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.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Front-End Development for Facebook

  1. 1. Front-End Development for Facebook (it doesn’t have to make you want to kill yourself)
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Page types in Facebook Canvas FBML Pages Canvas pages are anything with 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. 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. 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. 14. Reference Links Official Facebook Shameless Plugs
  15. 15. Questions? Bueller?