像按钮评论弹出窗口一样移动/定位Facebook

Question

我需要移动与facebook喜欢按钮相关联的弹出式评论框。我知道这个问题已经被提出和解决了无数次。

之前问过：Facebook Like Widget on Fan page, Comment area out of visible area

与我的问题相同的屏幕截图：http://twitpic.com/4q7ggi

这里的不同之处在于，我相信Facebook在过去的几个月里已经改变了实现，这样Like Button和comment popup都包含在一个iframe中。我预计他们可能会这样做，因为这是防止恶意网站通过自动点赞内容来利用用户的唯一可靠的方法。然而，这意味着我不能应用CSS来重新定位注释框。

我使用的是facebook的like button实现，这与HTML5官方参考资料中的like button http://developers.facebook.com/docs/reference/plugins/like/使用的是一样的。要查看示例，请再次单击facebook参考页面上的like按钮，然后检查评论弹出元素。您将看到like按钮和评论弹出窗口都包含在相同的iframe中。

Answer 1

这在过去对我来说是有效的。

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget span iframe {
    /* Now you can apply css here */
    bottom:0!important;
}

Answer 2

您不能更改iframe内注释框的CSS，因为这违反了same origin policy

该策略允许在源自同一站点的页面上运行的脚本在没有特定限制的情况下访问彼此的方法和属性，但会阻止跨不同站点的页面访问大多数方法和属性。

将消息发送到框can be changed with CSS，因为它不在iframe中。

Answer 3

这对我来说很有效，下面是一个fiddle示例。我所做的就是用css做一个简单的修改：

.fb_edge_widget_with_comment span.fb_send_button_form_widget {
  top:100px!important;  /*for example*/
  left:100px!important;        /*for example*/
}

​希望这能有所帮助。