how to make Facebook like button's popup box to appear on the left

Question

html to show like button:

<div class="fb-like" data-href="https://www.facebook.com/TheGloopal/?fref=ts" data-layout="button" data-action="like" data-show-faces="false" data-share="false" style='float:right;'></div>

BUt the popup when clicked on the fb like, appear on the right. But I want it to appear to the left as the button placed on the right.

I referred to this:Facebook send button flyout

and tried the following but doesn't work,

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
   left: -45px !important;
}

score 0 · Answer 1 · answered Dec 23 '15 at 07:28

0

its in the html button code:

<div class="fb-like" data-href="https://www.facebook.com/TheGloopal/?fref=ts" data-layout="button" data-action="like" data-show-faces="false" data-share="false" style='float:right;'></div>

you need to change where it says style='float:right;' to style='float:left;'

answered Dec 23 '15 at 07:28

Dylan L.

1,243
2
16
35

I added this ( style='float:right;' ) actually to place the button on the right. I already tried ( style='float:left;' ). This only positions the like button on the left but popup still appears off the site. – 112233 Dec 23 '15 at 07:37
try appending "position: absolute;" to the style – Dylan L. Dec 23 '15 at 07:42
that doesn't make it appear to the left – 112233 Dec 23 '15 at 08:00
Or is there a way to make it a popup that appears in the center to solve the issue? – 112233 Dec 23 '15 at 08:02

Amitesh Kumar · Answer 2 · 2015-12-23T07:33:22.187

0

try this:

<div class="fb-like" data-href="https://www.facebook.com/TheGloopal/?fref=ts" data-layout="button" data-action="like" data-show-faces="false" data-share="false" style='float:left;'></div>

edited Dec 23 '15 at 07:33

answered Dec 23 '15 at 07:28

Amitesh Kumar

3,051
1
26
42

no need to change the CSS. Just needs to change the style inside the html tag. – Dylan L. Dec 23 '15 at 07:30
@AmiteshKumar, the like button has to be on the right. I prefer the popup to appear to the left. – 112233 Dec 23 '15 at 07:35
put that pop up div float left. – Amitesh Kumar Dec 23 '15 at 07:38
That's the thing, how do I do that, I'm not sure of the popup class. – 112233 Dec 23 '15 at 07:39

score 0 · Answer 3 · answered Dec 23 '15 at 08:10

This solves the matter. I added below in the css

.fb_iframe_widget iframe {
    position:absolute;
    right:0px;
    background:#fff; /* in your case you may want to add a white background */
    transition: all .5s; /* completely optional, but adding a transition makes for a nice effect */
}

how to make Facebook like button's popup box to appear on the left

3 Answers3