7

我正在实现一个 Facebook 应用程序，该应用程序在粉丝页面中显示为选项卡。

该应用程序有一个产品详细信息页面，其中包含喜欢、发送和评论插件。

问题是当单击发送和喜欢按钮时，弹出对话框（单击按钮后弹出的窗口）被 iframe 的左边缘剪裁（应用程序是从右到左的语言）。

从图形设计的角度来看，按钮的位置不能改变，也不允许滚动条。应用程序必须是 520px 宽，不多也不少。

是否有任何选项来控制弹出的位置以防止其剪裁？有没有其他方法可以防止剪辑？

我在这里搜索了类似的问题，但没有成功。

4

2 回答 2

6

由于这些按钮在您的页面中包含 HTML 结构，因此它们可以通过 CSS 设置样式。因此，您可以使用 CSS 移动弹出对话框。

一些代码

如果您仔细查看 facebook 提供的弹出窗口，您会发现它附加了一些样式： Facebook 样式

您现在唯一要做的就是通过 CSS 将此弹出窗口移动到正确的位置。

例如：如果你想完全隐藏like按钮的评论弹出，你可以使用这个CSS：

.fb_edge_comment_widget.fb_iframe_widget {
    display: none;
}

如果您现在想移动它，则不能使用，.fb_edge_comment_widget.fb_iframe_widget因为元素属性（由 JavaScript 设置）将覆盖您的 CSS。您必须使用跨度较低的一个元素：

.fb_edge_comment_widget.fb_iframe_widget > span{
    right: 300px;
}

此代码会将弹出窗口向左移动 300 像素：

移动了 300px

这不是最漂亮的解决方案（请注意框顶部的小箭头现在指向任何内容），但它有效。

完整的测试代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css">

        .fb_edge_comment_widget.fb_iframe_widget > span{
            right: 300px;
        }

        #wrap {
            width: 650px;
            margin: 0 auto;
        }

        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="fb-root"></div>
            <script>(function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=336384849737745";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>

            <div class="fb-like" data-href="http://www.google.de" data-send="true" data-width="500" data-show-faces="false"></div>
        </div>
    </body>
</html>
于 2012-03-05T10:50:36.657 回答
0

这不是您问题的确切答案。似乎您根本无法控制弹出窗口。我很高兴通过将我的 fb 按钮代码放在仅与按钮一样高的 div 中并设置溢出：隐藏来完全摆脱弹出窗口。然后弹出窗口根本不可见。

<div class="fb-wrap">
<div class="fb-like" data-href="http://www.facebook.com/YOURURL="false" data-width="200" data-show-faces="false" data-colorscheme="dark"></div></div>

<style>
.fb-wrap {
height: 36px;
overflow: hidden;
}
</style>
于 2012-12-02T10:00:46.327 回答