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

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 2

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 3

Try to Generate css on serverside and integrate with your html page.

Answer 4

How can you unlike something that you previously liked thru this link?

Answer 5

David, did you find any solution?

Thanks Guya

Answer 6

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 7

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

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

Answer 8

I've ran into the same problem. It is clear that this is must be easy to achieve as there are many sites with like button with dynamic with AND show_faces=true.

Do you have any solution?

Answer 9

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 10

i put this code in my site and it works!! but it doesn't work if i put it in my facebook page....why??? how i can do it to work???

Answer 11

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>