Facebook Like Button (<fb:like>) Height Always 80px

Question

Why is the height of my Facebook Like button (technically the iframe that gets generated) always getting set to 80px? Example page is here: http://www.davidkasper.net/test.html I am using the javascript sdk and have had it work on other pages but for some reason the height will not change dynamically on this one! I can even do something like <fb:like style="height:40px"> and that will indeed set the visible height, but the iframe will still be 80px, whereas I can see it changing in the demo at http://developers.facebook.com/docs/reference/plugins/like

Solution 1

I finally found the answer for this!!

The problem was having the wrong base domain set for the app that I specified in the FB.init javascript.

  window.fbAsyncInit = function() {
    FB.init({appId: '**131226520233112**', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());

See the difference between http://davidkasper.net/test.html vs http://davidkasper.net/test2.html

By the way I would never have discovered this without the URL Linter from Facebook http://developers.facebook.com/tools/lint/ Clearing all the errors it detected solved the problem!

Solution 2

The iframe being generated is allowing space for showing facebook profile pictures. Add the show-faces="false" attribute and it will collapse the height.

<fb:like show-faces="false"></fb:like>

Solution 3

I fix this problem with css

#fb-bar iframe{min-height:80px !important;}

where #fb-bar is wrapper for < fb:like >. In html

<div id="fb-bar">
  <fb:like href="link"></fb:like>
</div>

Solution 4

David,

I was having the same problem too. I simply put the fb:like tag inside of a DIV with an ID of 'facebook-like'. Then I setup a CSS rule to limit the height and/or width of any iframe that exists in the 'facebook-like' DIV. Worked for me!

View more solutions