facebook like & send button flyout direction

Question

How can I set the direction of the facebook "flyout" on the like or send button. We currently float our facebook social plugins on the right side of the page. But, when someone opens the facebook "flyout" it opens right, expanding the page when ideally it would open to the left.

Example: http://compfight.com

I promise, we don't need you to like the site:) Any help would be greatly appreciated.

<div class="side-right">
    <fb:like href="http://compfight.com" send="true" layout="button_count" width="150" show_faces="false" action="recommend" font="" class=" fb_edge_widget_with_comment fb_iframe_widget">
</div>

The class side-right has a float:right; and text-align:right attached to it.

score 7 · Answer 1 · answered Nov 11 '11 at 19:01

7

Try adding this style to your page:

<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
}
</style>

answered Nov 11 '11 at 19:01

Andrew

71
1
2

score 2 · Answer 2 · edited Aug 16 '13 at 20:24

2

You can HIDE the flyout if need be, as in Firefox where the flyout can push the content out of position (we had a LIKE button in a jQuery slider in a sidebar, and each LIKE clicked was pushing the sidebar image out of the frame.

Using Andrew's CSS from the post above, I found that a simple display:none did the trick.

<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
    left: -300px !important;
    display:none;
}
</style>

That precented our content from being forced upwards and out of frame.

edited Aug 16 '13 at 20:24

answered May 21 '12 at 08:16

Gareth

21
1

this didn't work for me, I've had issues with all the other CSS-based solutions for styling the facebook flyout. You have to change things using JavaScript in the end. – Aug 22 '13 at 23:47

score 1 · Answer 3 · answered Jul 11 '14 at 03:26

1

No support for this at the moment as everything is within an iframe and out of your app's control.

Subscribe to the official bug to get updates on the issue:

https://developers.facebook.com/bugs/1420124294938118/

answered Jul 11 '14 at 03:26

People looking for an answer to this question should subscribe to the issue. I don't really know how the FB bug fixing works, but having more people talk about it there should speed up this fix, right? – rgin Oct 02 '14 at 04:13

score 0 · Answer 4 · answered May 08 '13 at 16:04

0

does not do it automatically?

http://jsfiddle.net/Zf7mY/

example with

.fb-like { float:right; }

answered May 08 '13 at 16:04

Nicola De Lazzari

204
2
7

score 0 · Answer 5 · answered Aug 05 '14 at 09:31

0

I just added fb like to div with overflow:hidden...

Add comment to your like is not so important to destroy your web design, you want that like, comment is just bonus ;-)

answered Aug 05 '14 at 09:31

Jaroslav Štreit

415
1
5
16

score 0 · Answer 6 · edited May 23 '17 at 11:45

0

You can't customize the location of the fly out window but see my alternative here. Facebook send button flyout

edited May 23 '17 at 11:45

Community

1
1

answered Jun 22 '11 at 19:09

Thomas Welton

148
1
5

facebook like & send button flyout direction

6 Answers6

Linked