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,
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.