Facebook喜欢和发送插件弹出剪辑

Question

Facebook喜欢和发送插件弹出剪辑

Kob*_*ahy 7 facebook clipping send flyout facebook-like

我正在实现一个Facebook应用程序,显示为粉丝页面中的选项卡.

该应用程序有一个产品详细信息页面,其中包含like,send和comments插件.

问题是当点击发送和喜欢按钮时,弹出对话框(点击按钮后弹出的窗口)被iframe的左边缘剪切(应用程序是从右到左的语言).

从图形设计角度来看,按钮的位置无法更改,也不允许滚动条.应用程序必须是520px宽,不多也不少.

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

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

Answer 1

apf*_*box 6

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

一些代码

如果你仔细看看facebook提供的弹出窗口,你会看到它附带了一些样式: Facebook样式

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

例如:如果要完全隐藏like按钮的注释弹出窗口,可以使用此CSS:

.fb_edge_comment_widget.fb_iframe_widget {
    display: none;
}

Run Code Online (Sandbox Code Playgroud)

如果您现在想要移动它,则无法使用,.fb_edge_comment_widget.fb_iframe_widget因为元素属性(由JavaScript设置)将覆盖您的CSS.你必须使用较低的span一个元素:

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

Run Code Online (Sandbox Code Playgroud)

此代码将弹出窗口向左移动300px:

移动了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>

Run Code Online (Sandbox Code Playgroud)

那是正确的.Facebook将弹出窗口移动到iframe中,因此您无法再使用CSS进行样式设置. (6认同)

归档时间：	14 年，1 月前
查看次数：	4898 次
最近记录：	10 年，1 月前