Facebook Gotchas
We just did a little refresh of our Facebook profile box, and I learned a couple things along the way that would have been nice to know ahead of time:
- I knew that Facebook caches all referenced images, but I didn’t know that they will resize any referenced image larger than 400px down to 400px.
- If an image is inaccessible for any reason (404, timeout, etc) it will be replaced with a blank image and cached, so you will need to change the name of the image when doing iterations.
- FBML includes <fb:narrow> and <fb:wide> for providing different content to the two available profile columns, and this will work even with the Ajax-y reloading of a user moving the box. However, Facebook rewrites your css so that you don’t mess up the page, and the drag-n-drop doesn’t affect this, so don’t put css in these two tags. Instead, put your HTML in the tags, with different classes/ids.
if you’re curious, the reason for the annoying caching of the blank image when your server 404s (or otherwise errors) is that without doing that, its possible for a developer to make a profile counter app by always serving up a 404 so that there is a ping every time the box is rendered.