CODEWITHSUNDEEP
htmlcssfacebookfirefoxfacebook-like
Danconia
Danconia

Reputation: 563

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

Upvotes: 2

Views: 1882

Answers (6)

MistaPrime
MistaPrime

Reputation: 1677

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

Upvotes: 0

rgin
rgin

Reputation: 2311

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

Upvotes: 1

NYCity
NYCity

Reputation: 115

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

this should work.....good luck

Upvotes: 0

Federico J. &#193;lvarez Valero
Federico J. &#193;lvarez Valero

Reputation: 889

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.

Upvotes: 1

Danconia
Danconia

Reputation: 563

Ok, got it to work. I removed the class

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

Upvotes: 1

ultranaut
ultranaut

Reputation: 2140

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.

Upvotes: 3

Related Questions