Archive for the ‘Facebook’ Category

Facebook Application Workflow

Wednesday, November 11th, 2009

This must be a gripe for anyone working on the platform: The workflow is just awful. My Gripe/Solution list for frustrated folks learning the ropes:

  • “I just want to make a custom profile Tab, why is this so hard?”
    • Use the (seemingly) little-known Static FBML App from Facebook. Use basic FBML and HTML, on a tab.
  • “My CSS won’t show up on my app/page/tab when I refresh it!”
    • Facebook caches all externally referenced CSS files. When you change the file and save it, make sure the link increments by one:
      style.css?v=1.0
      changes to
      style.css?v=1.1.
      They use version numbers to tell if they need to re-cache.
  • “I can’t set up a local dev environment!”
    • You’re right. Test HTML locally, use the Dashboard for smaller API calls, but for testing larger pieces of the app you’ll need to push code to Facebook before you can really see how it works. They do sometimes take up to 5 minutes to propagate changes, however, so make some visual cue that you have a new version up so you’re not guessing if it’s the bug fix, or the bugged version.

Facebook Photoshop Template

Thursday, November 5th, 2009

I’ve been doing a lot of work on the Facebook platform these days and kept finding myself presenting comps with personal information mistakenly included! I had taken screenshots of the various “chromes” that a designer has to create for a fan page, tabbed view, canvas view, friend pickers, dialogue boxes… The list of designs was huge and they all had my targeted ads in the rail and my name and message count sprayed about. Nonsense, I say!

So I made an anonymized .PSD that I’d like to share. Highlights include:

  • Generic names for all application areas
  • Pleasant image placeholders that are the same size as those on Facebook
  • Text treatments that are as close as possible to what Facebook shows you (it appears that Safari and Photoshop don’t quite render Tahoma identically)

This will be updated as I take on more projects that necessitate generic templates; let me know what you’d like to use most.

The generic-ized application template

The generic-ized application template



Download the template->