• Save
Front-End Development for Facebook
Upcoming SlideShare
Loading in...5
×
 

Front-End Development for Facebook

on

  • 7,133 views

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 ...

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.

Statistics

Views

Total Views
7,133
Views on SlideShare
6,253
Embed Views
880

Actions

Likes
4
Downloads
0
Comments
0

5 Embeds 880

http://www.ihatemarkzuckerberg.com 872
http://webcache.googleusercontent.com 2
http://www.linkedin.com 2
https://www.linkedin.com 2
http://www.pinterest.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Front-End Development for Facebook Front-End Development for Facebook Presentation Transcript

  • Front-End Development for Facebook (it doesn’t have to make you want to kill yourself)
  • 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)
  • 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.
  • 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)
  • 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.
  • 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)
  • 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.
  • Page types in Facebook ie, where does a UI developer do their stuff? Static FBML tabs Application tabs Canvas FBML pages Canvas iFrame pages
  • 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
  • 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
  • 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
  • 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.
  • 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.”
  • 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
  • Questions? Bueller?