CODEWITHSUNDEEP
facebookinternet-explorerxfbmlfacebook-javascript-sdk
Awais Qarni
Awais Qarni

Reputation: 18006

FB.XFBML.parse not working in IE

Hi there I am using Facebook like button on my web. All my content is loaded via ajax and I have come to know that if you want to use facebook like button with ajax loaded content you should use FB.XFBML.parse(). I have used this and it is working well is firefox and chrome but it is not working in IE. I am checking with IE 8 yet. I have searched the solution and found here to add xmlns:fb="http://www.facebook.com/2008/fbml" in my html tag. I did but it is not fixed yet. My code looks like

  layout.php

 <div id="fb-root" style="display:none"></div>
    <script>
        window.fbAsyncInit = function() {
        FB.init({
          appId      : 'APPID', // App ID
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });

        // Additional initialization code here
      };

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

    </script>

And this is how I am using XFBML.parse 

 $(".fblike").each(function(){
  FB.XFBML.parse($(this).get(0));
  //because having multiple likes button on same page.
});

And here is my like button

 <div class='fblike'><fb:like send='false' layout='button_count' width='100' show-faces='false' href='www.myurl.com?ref=facebook' ></fb:like></div>

How to make it work with IE8 and IE9? Where am I wrong and how to fix this problem?

Regards,

Upvotes: 2

Views: 3334

Answers (2)

jurev
jurev

Reputation: 1597

This works for me on all browsers (tested on IE6+, Chrome, FF, Opera, Safari).

Instead of showing a hidden FB button I dynamically append the FB button HTML code in a DIV wrapper where I want it to show:

<div id="fbWrapper"></div>

<script>
    $("#fbWrapper").append("<div class='fblike'><fb:like send='false' layout='button_count' width='100' show-faces='false' href='www.myurl.com?ref=facebook' ></fb:like></div>");
    FB.XFBML.parse($("#fbWrapper").get(0));
</script>

Or, if you want to show the FB button inside of previously hidden panel, first make the panel visible, then append the FB button HTML code:

<div id="myPanel" style="display: none">
    Follow us on Facebook:
    <div id="fbWrapper"></div>
</div>

<script>
    $("myPanel").show();
    $("#fbWrapper").append("<div class='fblike'><fb:like send='false' layout='button_count' width='100' show-faces='false' href='www.myurl.com?ref=facebook' ></fb:like></div>");
    FB.XFBML.parse($("#fbWrapper").get(0));
</script>

Upvotes: 1

brainondev
brainondev

Reputation: 1117

In my experience, if you try to run FB.XFBML.parse() wrapped in something that's hidden before this call, it will not work on IE and Firefox.

This will not work:

<div id="wrapper" style="display:none">
    <fb:like id="like_button" ... ...></fb:like>
</div>

<script>
FB.XFBML.parse(document.getElementById('like_button'), function() {
    $('#wrapper').show();
});
</script>

Could use something like this instead:

<div id="wrapper" style="display:block; height:0px; overflow:hidden;">
    <fb:like id="like_button" ... ...></fb:like>
</div>

<script>
FB.XFBML.parse(document.getElementById('like_button'), function() {
    $('#wrapper').animate({height:'30px'}, 300) 
});
</script>

Hope this helps someone else.

Upvotes: 6

Related Questions