移动/定位Facebook喜欢按钮评论弹出窗口

Question

我需要移动与facebook类按钮关联的弹出式注释框。我知道这个问题已被提出并且解决了无数次。

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

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

这里的不同之处在于我相信Facebook在过去几个月内已经改变了实施方式，因此Like Button和评论弹出窗口都包含在一个iframe中。我希望他们可能会这样做，因为这将是防止恶意网站通过自动喜欢内容来利用用户的唯一可靠方法。但是，这意味着我无法应用CSS来重新定位注释框。

我正在使用HTML5之类的按钮实现，这与类似按钮http://developers.facebook.com/docs/reference/plugins/like/的官方Facebook参考上使用的相同。要查看示例，请再次单击Facebook参考页面上的“类似”按钮，然后检查注释弹出元素。你会看到同一个按钮和评论弹出窗口都包含在同一个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*/
}

希望这有帮助。