Facebook Like on IE7 – Blame FBML

One time I’ve been assigned to fix a problem with Facebook like button on IE7. Although I was already trying to fix that before, I dig deeper since that certain page with 10 Facebook like button just hang on IE7. One can notice several operations on the background by simply looking at the status bar finding a lot of requests with fb_xd_fragment appended on the URL.

Early hacks

Weeks before, I tried optimizing Facebook like buttons using several techniques found on the internet such as using a custom channel, defer loading of the script, etc. I tried digging through the Facebook like documentation finding ways to optimize my page (make it load fast) for Internet Explorer 7 but it seems that all my effort didn’t work.

Looking around some popular sites

Since it is already a serious issue, I tried looking at some popular sites that uses the Facebook like buttons. For example, Sulit – Buy and Sell Philippines uses more than 1 Facebook like button on its main page but doesn’t suffer the fb_xd_fragment massacre in IE7. When you try to search on the site using its search feature, you can see that all search result item has Facebook like button on it. It is even more than 10 I think but yet it doesn’t slow down the page.

Hacking the code

A simple INSPECT on the site’s HTML code reveals how they are cleverly doing it. Actually there is nothing special about it. We are using the Facebook like button’s FBML version while the rest of the world uses the iframe version. A friend of mine says that FBML was deprecated already (my bad – not me actually but the original developer).

Putting things together

First, I cleaned up the markup and removed the inclusion of external Facebook JavaScript file. Then I removed some of the FB.init() stuff in some pages. So basically, I’m starting a fresh install. This is what the Sulit guys are doing (I hope I’m not getting into trouble with this):

1. Create an empty link pointing to the plugin URL with settings on it.
2. Replace the link with an iframe using the original link’s URL as the iframe’s source.

They did it to defer loading of the Facebook like button. First, here is the empty link:

<a class="fblike-single" href="http://www.facebook.com/plugins/like.php?href={$your_page_abs_url|escape:url}&layout=button_count&show_faces=false&width=90&action=like&font&colorscheme=light&height=21"></a>

The portion that says {$your_page_abs_url|escape:url} – replace it with your URL encoded absolute URL for your page. I got that code since I’m using Smarty.

You can configure your version through Facebook’s like button documentation where you can generate your own iframe code. Try it here. You will be shown with an iframe code and an FBML code. Just take the iframe’s src since that is all we need. Use that src as the href value of our link as describe above.

Next, we will replace the link with an iframe via JavaScript but only after the page is fully loaded. We will put our JavaScript at the bottom of the page, usually just before the closing </body> and it looks like this:

<script>
//<!&#91;CDATA&#91;
$(function(){
	  $(".fblike-single").each(function(){
	    var t = $(this);
	    var info = t.attr("href");
	    t.replaceWith("<iframe src='" + info + "' scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:90px; height:21px;\" allowTransparency=\"true\"></iframe>");
	  });
});
//&#93;&#93;>
</script>

The code above simply targets all links with fblike-single and replace them all with iframe using the links href value as the new iframe’s src value. No more fb_xd_fragment problem.