Since these buttons include HTML structure in your page, they are stylable via CSS. So you can move the popup dialogs with CSS.
Some Code
If you take a closer look at the popups presented by facebook, you will see, that it has some styles attached to it:
![Facebook Styles]()
The only thing you now have to do is moving this popup via CSS to the correct position.
For example: if you want to hide the comment popup of the like button completely, you can just use this CSS:
.fb_edge_comment_widget.fb_iframe_widget {
display: none;
}
If you now want to move it, you cannot use .fb_edge_comment_widget.fb_iframe_widget since the element properties (set by JavaScript) will override your CSS. You have to use the span one element lower:
.fb_edge_comment_widget.fb_iframe_widget > span{
right: 300px;
}
This code will move the popup by 300px to the left:
![Moved by 300px]()
This is not the most beautiful solution (note the small arrow at the top of the box now points to nothing), but it works.
Complete test code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.fb_edge_comment_widget.fb_iframe_widget > span{
right: 300px;
}
#wrap {
width: 650px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<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/de_DE/all.js#xfbml=1&appId=336384849737745";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.google.de" data-send="true" data-width="500" data-show-faces="false"></div>
</div>
</body>
</html>
