使用框数布局使 Facebook 喜欢按钮评论弹出窗口锚定在右侧

Posted 2023-03-05

【中文标题】使用框数布局使 Facebook 喜欢按钮评论弹出窗口锚定在右侧

【英文标题】：Make the Facebook like button comment popup anchored on right with box count layout

【发布时间】：2014-08-15 18:33:38

【问题描述】：

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

这是我的实际页面布局。看起来是我想要的。

但是，一旦我单击“赞”按钮，评论弹出窗口就会从左侧锚定并位于窗口之外。真可惜。

我想要的只是让弹出窗口从右侧而不是左侧锚定 我尝试了所有版本的按钮。 IFRAME 版本不显示注释框但无法正确对齐。 html5 和 XFBML 正确对齐，但它们都显示了窗口外的弹出窗口。

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

有没有干净的方法：

将此弹出窗口定位到右侧 在实际的浏览器弹出窗口中打开弹出窗口 (window.open()) 隐藏弹出窗口

有没有办法做到这一点？ Google +1 按钮可以完美地完成这项工作，无需添加大量代码。

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

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

【问题讨论】：

你好，尼古拉斯！您找到问题的答案了吗？

不幸的是，没有。 Facebook 小部件是一个 iframe，因此我们无法控制它。我所做的是将小部件放在一个带有溢出的容器中：隐藏所以弹出窗口不显示但它很脏：twittercats.com

也许你可以让它粘在左边，一旦点击它就向右移动。 （听起来很难，但为什么不试试……）。

【参考方案1】：

试试这个

<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