Remove white space beneath Facebook comments plugin

Question

Take a look at the this link. Scroll down a bit and you should see a Facebook comments plugin with an embedded Google map right beneath it.

My problem is, there is a ton

Answer 1

I am using FbComments plugin for Wordpress and there you can set the customisation options. This solved the problem for me.

Where it asks Comment box style AND Whole comment box style enter the height you want. It should be 72px. So you enter height:72px; in the space provided. Don't forget the ;

Answer 2

Don't set the height to auto, set the overflow...

Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.

Pop these changes in your $().ready function - this works fine for me.

Answer 3

I had this problem on Mobile browsers. Facebook added this auto detect for mobile devices. It loads a different version of the plug-in that is full of bugs. Just set the mobile flag to false to force it to use the regular version that does not have bugs. This saved me. I hope it helps you.

Answer 4

I was suffering from the same problem. The extra white space only shows up when there are no comments yet. So you just simply do the following:

1.) Swap back to the old markup, because step 2) is not supported by HTML5

2.) Make a new div #commentcount, in which you will load the count of comments. You can hide it with display:none;.

3.) Insert the following code to #commentcount: <fb:comments-count href=http://example.com/></fb:comments-count>, where example.com is the exact URL of where you're commenting. In most cases this will be $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"] (PHP), or the appropriate HTTP header variables in other languages.

4.) Store the comment count in a variable in JavaScript. You can reach the count easily, It's inside the #commentcount div in a span element. If you're not sure about this, check chrome dev tools or firebug, it will show you the rendered structure. (as facebook may change it eventually)

5.) Write a nice javascript code to update the facebook comment container div if(commentcount==0). Add a style of: height:110px; overflow:hidden;.

6.) Load the comment count frequently so if someone comments, you can drop the hidden overflow and fixed height, and they can see the new comment. You can do this using setInterval().

It works!

An easier alternative solution: You can set the style="background-color:#f5f5f5;" for the comments box if you have for example a site with F5F5F5 background color. The comments box colour will blend into your site. It looks nice.

Answer 5

Turn off mobile parameter. For exemple:

<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10"  mobile="false"></div>

Answer 6

There are several contributing factors:

• .fbFeedbackContent has min-height: 165px
• the loaded iframe has height: 200px
• there is an empty span tag within the fb:comment tag

Addressing any or all of these should get you started. You may need to use !important to override some of the CSS.