Facebook Like Button Not Showing Up In Firefox

Question

I'm using the following code for my like button

<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>

Some users have experienced the like button not showing up. Noted in 3.6.17 but observed in other versions. I'm somewhat familier with the firefox iframe bug, but I was currious if anyone has any work arounds for the facebook like button.

Toothless

Answer 1

Like buttons that are rendered with javascript (<div class="fb-like"/> and <fb:like/>) get height=0 if they are initially hidden (display:none).

To work around this, create the element with javascript after the container is displayed, and then run:

FB.XFBML.parse();

Example:

result.show();
var like_box = $(".fb-like-inactive", result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();

Stalder

Perfect, no-hacky solution – Dowable

Answer 2

This CSS solved it for me

.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}

Dissociation

Answer 3

This is still an issue, as can be seen here (also contains fix): http://codepen.io/wiledal/pen/cGnyq

Firefox does not draw the Facebook-like if the div is hidden at the time of parsing. In the example above I delay the showing of a div after different times. You can see that a like-button shown after 500ms does not get rendered in Firefox.

I managed a work around which does not cut off the comment dialog after liking, simply by using min-height and min-width instead of set values that was previously proposed.

.fb-like span, .fb-like iframe {
  min-width: 100px !important;
  min-height: 20px !important;
}  

Chartreuse

Answer 4

I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.

Seko

Note that a share button can still work (show) if using your own image, and calling a function to do a window.open to https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=.... – Comment

Answer 5

Can you try calling the like button like so:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&amp;xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>

And let me know if you're still seeing issues.

Campos

Answer 6

Leaving an answer because I can't leave comments yet...

Oli's nice CSS hack looked like it worked initially:

.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}

but it clipped the comment box that tried to pop up when we actually clicked the like button.

Per's delayed parse solution seems to do the job; here's a bit more detail. In our case we had the like button in a drop down menu, which looked like:

<ul>
  <li class="control_menu">
    <span>menu name</span>
    <ul style="display: none;">
       <li><div class="fb-like-inactive" data-href=...></li>
       ...
    </ul>
  </li>
  ...
</ul>

with code that shows the drop down ul when the user hovers over the control_menu element. We used this code to handle the delayed parsing:

$(document).ready(function() {
  $('.fb-like-inactive').closest('.control_menu').hover(function() {
    var inactive = $(this).find('.fb-like-inactive');
    if (inactive.length && (typeof FB != 'undefined')) {
      inactive.removeClass('fb-like-inactive').addClass('fb-like');
      FB.XFBML.parse(this);
    }
  });
});

It finds the fb-like-inactive buttons, then looks up the tree to find the containing control_menu elements, then attaches an event to the control_menu elements to detect when the user hovers over them. When it detects a hover for a particular menu element, it looks for inactive like buttons within that element, marks them as normal fb-like, and then parses just the content of that element.

I hope this saves someone some time.

Wendiwendie

Answer 7

I just spent an hour on this and on a much more basic level, you need to know that the Facebook buttons will not render when testing your page locally.

It may seems obvious but it will only work when rendering from a webserver.

Minim

Answer 8

Per's solution is based on the XFBML version of the fb button and I wasn't sure how to do this with the "html5 version" or if it is really possible but I found a CSS/JS solution that doesn't clip content instead so here it is:

html

<button class="like-button">I like this stuff</button>

<!-- This is a hidden like-box -->
<div class="social-share aural">...stuff...</div>

CSS:

html body .aural {
    position: absolute;
    font-size: 0;
    left: -9999px;
}

jQuery:

$('body').on("click", '.like-button', function(e) {
    var $socialShare = $('.social-share');
    $socialShare.css({'font-size':'1em'});
    var sw = $socialShare.width();
    $socialShare.animate({left: sw-80}, 400);
});

You may have to use !important rule (in both css and js) or nest the .aural class depending on the rest of your css. If it doesn't work I'd suggest trying to change the default layout so it doesn't override .aural or nest .aural and as a last resort use !important..

Teno

Answer 9

I had the same problem but the culprit was setting tracking protection in about:config to true.

This tip turned me on to the idea initially: Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster

Towering

Answer 10

My solution is completely different to any of the above.

I have a character animation in my page, and one of the elements has the id="body" (which is perfectly reasonable) however this seemed to kill the FB script.

As soon as I renamed my id, the share started working again; I can only presume there was some kind of conflict, as id'ed elements can be referenced as global variables.

I found this out through the usual process of removing elements until things worked, so I'm fairly sure it was this.

Pekoe