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

Answer 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!

Answer 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>

Answer 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>

Answer 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!

Answer 5

From the reference it says

The most important social plugin is the Like button, which enables users to post pages from your site back to their Facebook profile with one click. You can add a Like button to any page with an iframe tag:

<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

There are a number of options for the Like button, including the option to include the names and profile pictures of the user's friends who have also liked the page. Here is a like button for the Facebook Developers site...

To me that indicates you should just use the iframe and set the width/height properties in the style tag...

<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
        scrolling="no" frameborder="0"
        style="border:none; width:300px; height:25px"></iframe>

Answer 6

Go to http://developers.facebook.com/docs/reference/plugins/like

Uncheck the 'Show Faces' checkbox. This will reduce the height to 35px.