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

问题

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;
}

回答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.

回答2:

Ok, got it to work. I removed the class

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

回答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.

回答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; }

回答5:

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

this should work.....good luck

回答6:

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

来源：https://stackoverflow.com/questions/12829157/facebook-share-window-when-you-like-a-page-getting-cutoff

标签

html

css

facebook

firefox

facebook-like