2012-11-06 41 views
20

我需要移动与Facebook像按钮关联的弹出评论框。我明白这个问题已经被问及解决了无数次。移动/位置Facebook赞按钮评论弹出

以前问:Facebook Like Widget on Fan page, Comment area out of visible area

截图同样的问题,作为我的:http://twitpic.com/4q7ggi

这里的区别是,我认为Facebook已经改变了过去数个月内实施,使双方的Like按钮和评论弹出窗口包含在一个iframe中。我预计他们可能会这样做,因为这是防止恶意网站通过自动喜欢内容来利用用户的唯一可靠方法。但是,这意味着我无法应用CSS来重新定位评论框。

我使用的HTML5像按钮实现,这是相同的用于像按钮http://developers.facebook.com/docs/reference/plugins/like/官方Facebook的参考。要查看示例,请再次单击Facebook参考页面上的类似按钮,然后检查评论弹出元素。你会看到类似的按钮和评论弹出包含在同一个iframe中。

+0

我有同样的问题 –

+0

嗨,我有同样的问题..你设法解决这个? – ddb

回答

1

这对我有用,这里是一个fiddle的例子。所有我做的是一个简单的修改使用CSS:

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

希望这会有所帮助。

+0

我没有注意到这个移动评论框。 – rjksn

+0

我觉得它像一个蜜罐:) - 我必须说的原始的一个 –

0

我检查了Facebook的例子,我看到这个评论框:http://screencast.com/t/fRQyUzqek

我检查,并应用于花式这个类:

.-cx-PRIVATE-pluginCommentFlyout__full { 
    top: 100px!important; 
    left: 100px!important; 
} 

而感动的评论框。不过,我直接在检查器中这样做了,所以当您在CSS中使用它时,您可能还需要包含父级选择器以确实具体。

希望这会有所帮助!

2

您不能更改iframe中的评论框的CSS,因为它是same origin policy的冲突:

政策允许来自同一站点发起的互相访问的网页运行脚本方法和属性,但没有具体限制,但会阻止访问不同网站上的页面上的大多数方法和属性。

发送消息给can be changed with CSS,因为它不存在于iframe中。

4

这在过去对我有效。

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