Facebook like button showing in Firefox but not showing in IE

Question

I have a Facebook like button on my page using the XBFML tag. I think the code is working, because it works in Firefox without a problem.

But in IE 8 (running in IE 7 compliant mode), the button does not show at all.

If I switch it all to the iFrame version of the like button it all works. But when I go with the XBFML tag it does not work.

Anyone run into anything like this?

Answer 1

Try adding the xmlns attribute to the HTML document for the FB namespace:

xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/"

This is another case where Firefox is being too forgiving vs IE.

Answer 2

the attribute: xmlns:fb="http://www.facebook.com/2008/fbml" is mentioned as a "must be used" in the Facebook Connect documentation. Some pointers here.

Answer 3

I think I have a slightly different implementation than you, but the same general issue of not seeing my Facebook social buttons in IE only. It turned out that it was because I had put the Facebook script tag at the bottom of my page. The solution was to move

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

so that it was before my button insertion:

<fb:like href="" send="true" layout="button_count" width="350" show_faces="true" font=""></fb:like>

Then the buttons started showing up in IE as well.

Answer 4

if(document.namespaces) {
    //IE
    document.namespaces.add("fb", "http://ogp.me/ns#");
    document.namespaces.add("og", "http://ogp.me/ns/fb#");

    if (typeof(console) != 'undefined' && console) {
        console.log("IE: OG and FB NameSpace added");
    } else {
        //Other Browsers
        var htmlRoot = jQuery(jQuery("html").get(0));
        if(typeof(htmlRoot.attr("xmlns:fb")) == "undefined") {
            htmlRoot.attr("xmlns:og",'http://ogp.me/ns#');
            htmlRoot.attr("xmlns:fb",'http://ogp.me/ns/fb#');
            if (typeof(console) != 'undefined' && console) {
                console.log("OG and FB NameSpace added");
            }
        }
    }

do NOT put this into a $(document).ready() function!