Facebook “Like” button in AJAX driven page - Firefox bug - ajax

Question

I have a Facebook like button that is loaded using ajax.
The button works, but strangely in firefox it doesn't appear.
<fb:like href="#Model.Url" show_faces="true" height="30" width="400" ></fb:like>
In Firefox the html produced comes with the height = 0px. Why?
<span style="height: 0px; width: 400px;">
<iframe id="f2b3cbcbf388e" class="fb_ltr " scrolling="no" name="f3cdf7e205a545e" style="border: medium none; overflow: hidden; height: 0px; width: 400px;" ....
This doesn't happens on Chrome.
Related to facebook I only have this before close body tag
<script> (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/pt_PT/all.js#xfbml=1&appId=00000";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>

Answer 1

I'm still investigating the cause, but in my case, I think it is because the containing div is hidden at the time of the XFBML parse. Still looking for a better solution but this can be fixed by clearing the added height css manually like so:
FB.XFBML.parse(document, function(){
$('.fb_button_container iframe').css('height','');
$('.fb_button_container .fb-like > span').css('height','');
});
this uses jquery... you could easily not use it if you prefer.
Also in this case I had added the like button inside of a container with class "fb_button_container" -- that is not something auto-generated.

Answer 2

If I have more than 1 Facebook like button per page, he has a strange behavior.
I moved the button to the details page instead of the list page and this solved my problem.

Answer 3

I had the same problem. Button was rendered correctly in all other common browsers except Firefox. Somehow the span's inline style was set to 0px in Firefox. Thanks to theozero I finally managed the button to be rendered correctly. Like theozero I had the Facebook Like Button placed within a div that is hidden with JS on page load. With theozero's answer I found Facebook's documentation of the FB.XFBML.parse and placed their re-parse function exactly at the end of their originally provided Facebook JavaScript SDK (last line):
(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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.XFBML.parse();
And voilà the button was rendered!
EDIT: Too happy too soon. That only worked, cause immediately on page load I unhid the div containing the button. I than put the parse function into the JS that unhides the div. That works. It does. But now the element isn't toggling smoothly anymore... Argh! Facebook! Hole!
EDIT: So! Now it's done. Had to call the re-parse as callback on the slideToggle function, to re-parse the element when the toggling action was finished. .slideToggle('slow', function(){ FB.XFBML.parse(); }); Sure, the like button visibly pops up then suddenly, but I can live with that, although I could let the button fade hin somehow.

Answer 4

It took me an entire day to figure it out, but being logged in on Facebook with a "test user" renders the like button invisible. In my case, I was always logged in with my test user on Firefox, while logged out / logged in with my regular Facebook user in Chrome (and I initially thought this was a browser issue).
However, the solution was as easy as loggin off the test user.
It is specified in the FB docs that not all features are enabled for test users (and the like button is one of those features), but I'd thought that it would at least get rendered.
Anyway, I hope this helps someone.