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.

Answer 1

Try adding this style to your page:

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

Answer 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.