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

Question

Why is the height of my Facebook Like button (technically generated by an iframe) always set to 80 pixels? Example page here: http://www.davidkasper.net/test.html I use javascript sdk and worked on other pages, but for some reason the height will not dynamically change this! I can even do something like <fb:like style="height:40px"> and it will really set the visible height, but the iframe will still be 80px, whereas I can see how this changes in the demo to http: // developers.facebook.com/docs/reference/plugins/like

Answer 1

I finally found the answer for this !!

The problem was that the application did not have the correct base domain application specified by me in javascript FB.init.

  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 Linter URL from Facebook http://developers.facebook.com/tools/lint/ Clearing all the errors I found solved the problem

Answer 2

The generated iframe allows space for displaying facebook profile images. Add the show-faces = "false" attribute and it will destroy 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 the wrapper for <fb: like>. In html

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

Answer 4

David

I also had a problem. I just put fb: as a tag inside a DIV with the identifier "facebook-like". Then I set a CSS rule to limit the height and / or width of any iframe that exists in a div, similar to facebook. Worked for me!

Answer 5

From the reference it says

The most important social plugin is the Like button, which allows users to send 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 several options Like button, including include names and profile pictures of friends of the user who also liked the page. Here's a button for the Facebook developer site ...

For me, this means that you should just use an 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 box next to "Show faces." This will reduce the height to 35 pixels.