XFBML Like button not rendering in IE9

Question

I've been trying to troubleshoot this issue for a while with no success.

I've got a contest page set up at https://mantry.com/giveaway/, on which I have two Facebook Like buttons (these have been used in lieu of the Facebook Like Box because I was having issues with the well documented edge.subscribe event not firing).

Basically, everything is working in Mozilla, Chrome & Safari, but in IE9 / IE8, the fb:like buttons are not rendering.

I've declared my xml name space as follows:

<script>
window.fbAsyncInit = function() {
FB.init({
  appId      : '274762932654075', // App ID
  channelUrl : '//mantry.com/channel.php', // Channel File
  status     : true, // check login status
  xfbml      : true  // parse XFBML
});

FB.XFBML.parse(document.getElementById('fb1'));
FB.XFBML.parse(document.getElementById('fb2'));

// Additional initialization code here
FB.Event.subscribe('edge.create', function(href) {
    if(href == 'http://www.facebook.com/themantry'){
        social[0] = 1;
    };
    if(href == 'http://www.facebook.com/<?php echo get_post_meta( $post->ID, 'contest_fb', true);?>'){
        social[1] = 1;
    };
    socialClick();
});

};

// Load the SDK Asynchronously
(function(d){
 var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 ref.parentNode.insertBefore(js, ref);
 }(document));
</script>

I tried both with and without the FB.XFBML.parse(), neither worked for me.

The fb:like elements, in case it is relevant are as follows:

<fb:like href="http://www.facebook.com/themantry" send="false" width="450" show_faces="false" font="" data-layout="button_count" id="fb1"></fb:like>

Any ideas would be greatly appreciated, and happy to elaborate on anything I might have omitted. Thanks in advance!

Answer 1

I figured out what was wrong here, thought I'd post in case anyone else is running into the same issue as me.

I had the like buttons in a div that was hidden, which only became visible once the user had connected to Facebook. Looks like there is issues with parsing FBML on hidden elements, so I ended up moving FB.XFBML.parse(); to fire after the elements became visible.

i.e.

$('.fb-connect').hide();
$('.fb-boxes').fadeIn(200,function(){
        FB.XFBML.parse();
    });

Now it is working correctly in IE9.