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:

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

<div class="side-right">
    <fb:like href="" 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.

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.

• javascript
• css
• facebook
• html

6 Answers 6

Try adding this style to your page:

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

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.

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/

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

does not do it automatically?

http://jsfiddle.net/Zf7mY/

example with

.fb-like { float:right; }

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