CODEWITHSUNDEEP
javascriptfacebookhtmlfacebook-like
James Glass
James Glass

Reputation: 4300

Facebook Like Button creating divs with CSS styles of -2000px, creating white boxes on site

I'm using the standard HTML5 FB Like plugin, and all seemed to be well - until I viewed a page on my site that is lengthy, and I noticed two boxes in the middle of my content, well away from the Facebook Like button. I've had the same issue with the XFBML version.

By looking at the code of the button that is generated, I can see that a div is created inside of div id="fb-root"> with its styles set to position: absolute; top: -2000px;.

If you go to connect.facebook.net/en_US/all.js, you can see that this is created and set on line 26, col 2282. It says: ga.style.position='absolute';ga.style.top='-2000px';

On pages less then this height, you don't see the boxes. But on pages longer then this, the boxes appear. Why? How can I get rid of these? What am I doing wrong?

The button code:

<div id="fb-root"></div>
<script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<my app id>";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-like" data-href="<my page>" data-send="true" data-width="200" data-show-faces="true" 
             data-layout="button_count" data-action="like" data-font=\"arial\"></div>

Upvotes: 0

Views: 1247

Answers (2)

Sean Kinsey
Sean Kinsey

Reputation: 38046

This will happen if you have placed the fb-root element inside an element with an absolute or relative position, as the -2000px would otherwise be relative to the body.

If you move the fb-root element directly into the body then this will no longer happen.

Upvotes: 1

Dylan
Dylan

Reputation: 505

try adding:

ga.style.backgroundColor='transparent';

or:

ga.style.visibility='hidden';

Upvotes: 0

Related Questions