Facebook share window when you “Like” a page getting cutoff

Question

I am trying to add the FB like to my website. The like seems to work ok. However, when someone clicks the Like button (using Firefox on Mac Lion) a Share box appears which is show cutoff on my page. Ideally I would like the share box to fully appear so that visitors can share their like. If this is not possible then getting rid of the share box all together just leaving the "Like".

Here is how it looks:

facebook like http://www.sofiaandluis.com/public/facebook_like.png

Here is the code: HTML

<div class="column-area">
    <div class="suscribe-social">
        <div class="up make-word-breakable">
            <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=xxxxxx";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
            <div class="fb-like" data-href="https://www.facebook.com/pagename" data-send="false" data-width="300" data-show-faces="true" data-font="verdana"></div>
        </div>
        <div class="down make-word-breakable"></div>
    </div>

CSS

.column-area {
    width: 300px;
    display: block;
    box-sizing: border-box;
    float: left;
    margin-left: 2.127659574%;
}
.suscribe-social {
    border: 1px solid #E4E4E1;
    margin: 5px 0px 20px 0px;
}
.suscribe-social .up {
    padding: 10px;
    display: inline-block;
}
.make-work-breakable {
    word-wrap: break-word;
}

Answer 1

I haven't seen anything that indicates that that's configurable through the FB api, but I do believe this should work:

.fb-like {
    height: 20px;  // I think that's the button height, you might need to adjust
    overflow: hidden;
}

The comment box will still get loaded, it'll just be hidden. No idea if any sort of complications might arise there, though I'd doubt it.

Answer 2

Ok, got it to work. I removed the class

.fb-like iframe {
    width: 290px !important;
}

Answer 3

I think that FB box gets cutted because some parent element has "overflow: hidden" property.

This property may prevent FB box to exceed the size of that parent element.

Answer 4

This is pretty old but I'd like to add another answer on here that doesn't involve having an !important on our css. Which is--let's be honest--just doesn't look right.

.fb-like iframe { max-width:none; }

Answer 5

.fb-like span{
overflow:visible 
!important; 
width:450px !important; 
margin-right:-375px;
}

this should work.....good luck

Answer 6

Also, position:absolute; works on the holder element of the button.