Facebook 'Like' Button: Internet Explorer Issue

I've recently been given the task of implementing the Facebook 'Like' button to the business listings on a suite of websites using the XFBML method instead of the iFrame. The methods are described on Facebook's developer site as well as in many tutorials. While testing the feature, it was discovered that it not display in Internet Explorer. After some research, I discovered that this is due to Facebook using their own mark-up, and the namespace must be defined for rending in Internet Explorer. The following needs to be added into the HTML tag: xmlns:fb="http://www.facebook.com/2008/fbml". (If you are using Facebook OpenGraph, you will need to add the namespace for this too.)

However, for the work that I am doing, I do not have access to change the HTML tags, and the Facebook 'Like' button was not working in the expected manner. The button would not display randomly when the page and cache was refreshed, despite the page containing the correct source code. I believe that what is happening is that the page loads and the Javascript is in the middle of loading while the <fb:like> tag is executed. (This problem only occurs in Internet Explorer.) For a workaround, I encased the <fb:like> tag to print in the Javascript tags. Sure, it is messy, but it solves the problem.  

Unless the HTML tag cannot be edited, I completely recommend using the correct Facebook namespace instead.

<div id="fb-root"></div>

<script>

  window.fbAsyncInit = function() {

    FB.init({ 

    appId: '123456789',

    status: true, 

    cookie: true, 

    xfbml: true});

  };

  (function() {

    var e = document.createElement('script');

    e.async = true;

    e.src = document.location.protocol + '//connect.facebook.net/sv_SE/all.js';

    document.getElementById('fb-root').appendChild(e);

  }());

</script>

<script>

//<![CDATA[

<fb:like href="http://MYURL" layout="standard" show_faces="true" width="400" action="like" font="segoe ui" colorscheme="light" />

//]]>

</script>