使用框计数布局将Facebook按钮评论弹出窗口固定在右侧

时间:2014-06-25 09:10:32

标签: facebook button popup alignment comments

我正在尝试正确对齐Facebook按钮的评论弹出窗口。我正在使用盒数布局,以便我可以对齐右侧的所有Facebook / Twitter / Google + / Whatever按钮。

这是我的实际页面布局。看起来我想要。 My actual buttons layout, it looks fine

但是,一旦我单击“赞”按钮,注释弹出窗口就会从左侧锚定,并且不在窗口中。游民。 Crappy result

我想要的只是将弹出窗口从右侧而不是左侧锚定 Google's +1 button does it properly, so why not Facebook? 我尝试了所有版本的按钮。 IFRAME版本不显示评论框但无法正确对齐。 HTML5和XFBML已正确对齐,但它们都显示窗口外的弹出窗口。

我在Facebook's documentation中没有看到任何参数来调整注释弹出窗口的对齐方式或强制在真实的浏览器弹出窗口中打开注释弹出窗口。顺便说一句,这不能通过CSS调整,因为该死的弹出窗口是一个该死的IFRAME,即使我正在使用HTML5和XFBML标记。

是否有一个干净的方法:

  1. 将此弹出窗口固定在右侧
  2. 在实际的浏览器弹出窗口(window.open())
  3. 中打开弹出窗口
  4. 隐藏弹出窗口
  5. 有没有办法实现这一目标? Google +1按钮可以完美地完成工作,而无需添加大量代码。

    当然,简单的解决方案是将我的按钮移到左侧,但它很糟糕。

    任何帮助将不胜感激。谢谢:))

1 个答案:

答案 0 :(得分:0)

试试这个

<center>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FID_HERE&amp;layout=standard&amp;show_faces=false&amp;colorscheme=light&amp;width=50&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:30px;" allowtransparency="false"></iframe>

将ID_HERE替换为您的网页ID