Take the 2-minute tour ×

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

Here is the code: HTML

<div class="column-area">
    <div class="suscribe-social">
        <div class="up make-word-breakable">
                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);
            <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 class="down make-word-breakable"></div>


.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;
share|improve this question

6 Answers 6

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.

share|improve this answer
Hey @ultranaut, I tried doing that but it didn't work. I also tried doing overflow:visible for this same class to no avail. Any other suggestions?... I am surprised this would be this complicated. Thanks –  Danconia Oct 10 '12 at 22:30
Ah ok, I see, with the overflow hidden I can hide the box. That would work. Any idea on what I could do so that it fully shows? –  Danconia Oct 10 '12 at 22:33
Can you provide a link to your code? It's hard to say without seeing it in action. When you say it didn't work, does that mean it showed up the same as before you added that? –  ultranaut Oct 10 '12 at 22:33
That all depends on what else is happening on the page, like I said it's hard to say without seeing code. –  ultranaut Oct 10 '12 at 22:35
-1 on me for reading comprehension, I totally zeroed in on how to hide it, and missed your link. –  ultranaut Oct 10 '12 at 22:41
up vote 1 down vote accepted

Ok, got it to work. I removed the class

.fb-like iframe {
    width: 290px !important;
share|improve this answer

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.

share|improve this answer
.fb-like span{
width:450px !important; 

this should work.....good luck

share|improve this answer

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; }
share|improve this answer

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

share|improve this answer

Your Answer


