The dark art of facebook
Posted 22 Aug 2012 by Paul N / @BinaryPJ
Creating a new Facebook timeline and 'like me' offer page for the SIA taught me a bit more than I wanted to know…
(There's also a feature story on this campaign, showing how non-commercial organisations can still make an impact)
Learning 1: No mobile app. pages (out of the box)
Facebook does not currently support mobile for its app (e.g. 'like me') pages. Even as I type these words, I find it hard to believe. These pages are simply not visible either on Facebook's mobile app or via m.facebook.com. Even if you point your phone browser directly to www.facebook.com/ this redirects you to m.facebook.com.
So the only way to support mobile for these page is to build it outside of facebook.
Here’s how it works: a single link within facebook (e.g. from a pinned or highlighted feature) takes users to a "sniffer" page (hosted outside of facebook) which automatically detects the user's platform and either links to the facebook app. page (for desktop / tablet users) or goes to another non-facebook web page (i.e. outside facebook, again). This page is adapted for mobile and with the FB "Like" button embedded.
What a palaver. Quite why facebook won't natively support mobile app pages I don't know.
Learning 2: IE7 timelines look a bit rubbish (can be mitigated up to a point)
The new FB timeline has some problems in IE7. No show stoppers but many images look awful and it's a half-hearted implementation. That's mostly because facebook uses the CSS to scale these in-browser, rather than pre-scaling them, and IE7 does that scaling horribly.
For instance, here's the BV logo in facebook in IE7 (on the left) and Firefox (on the right).
On IE8 and up it looks fine. And you probably guessed that Chrome and recent versions of Firefox look fine too. It's the same for any cover logo image you try, at whatever image size or quality you use.
Okay IE7 may be only 2 - 4 % of the market but can't a company worth $100bn (depending when you read this!) with maybe heading for a billion-odd users find time to support them properly? (Even 2% of 800 million is 16 million people).
Some images, e.g. the big cover photo and pinned feature images will look fine in IE7 if you upload them at exactly the right size:
- Cover image should be exactly 850 wide x 315 high
- Pinned feature must be exactly 403 wide (height can vary)
If not, FB will resize them as above, and they will degrade on IE7.
But other images, like highlighted feature photos and the inset logo over the cover image (see above) are always resized by facebook, whatever you try (and we tried). And that means they look a bit rubbish on IE7.
And in all versions of IE that we tested (7, 8 and 9) there's a load of rather unsightly grey padding either side of highlight feature images (which you don't get on other browsers). Which is a shame...
Learning 3: Whoa! This is popular...
Even for a niche project like the SIA, things can go viral really fast. In no time, around 20% of the SIA "fans" were talking about the offer, sharing it, completing the offer form, etc. So it's crucial to allow for concurrency and sudden server load. And to build that into the test plan too, of course.
That's it for now. If FB correct any of these funnies, I'd love to know about it – or maybe you have some better work arounds... (comments welcome, below).