Kai vs. FBML, Round 1

As I mentioned in my previous post, you really need to have a static landing page on your company Facebook Page. I started reading about FBML markup language and soon got lost in all the details about how to access the Facebook ‘social objects’, user information etc. Until someone, somewhere mentioned that you can just write regular HTML and ignore all the Facebook specific tags unless you need them. D’oh.

Now it’s not quite as simple as that. There are few special cases I had to cover (and learn the hard way) before the landing page was all ok.

1. Image caching

The Accepted Way of handling images is to host them externally and access them with the full URL in IMG tags on your FBML page. No problem, I uploaded all my images to the BigCommerce server hosting my storefront and I was good to go. Worked like a charm.

Now, Facebook caches the images, which I noticed when I went and updated it on my hosting server and nothing changed in Facebook. What you have to do is to add a dummy parameter at the end of the image URL and change it every time you update the image. This makes Facebook think the image URL has changed (well, technically it has changed even though it is still pointing to the same image file) and will re-cache it.

It doesn’t matter what you put in as the parameter, it is not used for anything. I used date as the dummy parameter like this:

<img src=”http://www.silverfirejewelry.com/templates/__custom/images/fb-banner01.jpg?ver=20101027“>

Now every time you update the image file on your server, you need to remember to go and change the parameter value. Annoying, but it works.

2. CSS circus

You can not link to external CSS sheets from your FBML code. Oops, Facebook changed their implementation and now you can. Oops, now it doesn’t work with Internet Explorer. Oh, now they fixed it and it works with everything. Oh, Internet Explorer does not read the internal CSS in your FBML document anymore?

So this is another annoying ‘feature’ — how Facebook handles CSS seems to change every now and then. Only sure-fire way of ensuring your CSS is always read is to use inline CSS, i.e. embedding your style definitions in your HTML tags like this:

<div id=”textbox” style=”width: 480px; height: 130px;”>

This is not very maintainable and really works only for small pages. As of this writing FBML seems to play nice with external stylesheets with every browser, but this can change in the future (and has changed in the past). See this article for a very good summary of the situation.

As with the images, host the stylesheet on your web server and link to it from your FBML document like this:

css?ver=20101029″ rel=”stylesheet” type=”text/css” />

Note that you’ll need to use the same dummy parameter as with the image files, as Facebook does cache the style file too.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s