2

看看这个页面： http ://www.allyou.com/static/weekly-circulars/

当您单击 Grocery Circular Roundup 标题旁边的 Like 按钮时，Like 小部件会在右侧打开，因此关闭按钮会在内容井的边缘被切断。

Facebook 小部件被切断

但是，当用户缩小浏览器宽度时，相同的小部件会自动向左打开，以便适合页面。

即使用户的浏览器非常宽，有没有办法强制小部件向左打开？我无法通过从内容区域删除溢出：隐藏来解决这个被切断的关闭按钮问题，因为这与其他广告客户的要求相冲突。

4

6 回答 6

5

不幸的是，您不能真正让弹出/弹出窗口独立于按钮移动，因为一旦单击按钮，它就会在 iframe 中打开小部件，并且您将无法在不玩的情况下影响 iframe 的内容同源政策。显然有一些方法可以规避同源政策，但对于这样的事情来说，这可能比它真正值得的更令人头疼。

但是，您可以通过在单击按钮时移动整个小部件来防止意外切断。只需添加以下 CSS：

.fb_iframe_widget iframe {
    position:absolute;
    right:0px;
    background:#fff; /* in your case you may want to add a white background */
    transition: all .5s; /* completely optional, but adding a transition makes for a nice effect */
}
于 2013-08-28T15:11:24.823 回答
0

尝试将此样式添加到您的页面：

<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
}
</style>
于 2013-09-01T16:17:13.340 回答
0

实际上，您不能将任何其他样式应用于来自其他域的 iframe（例如您的情况下的 Facebook）。

但是您可以尝试添加一些 CSS 代码来默认重新设置此 iframe 的宽度：

iframe { width: 310px; }

请尝试应用它，我认为这应该可以解决此问题。我猜 Facebook 的插件内容会自动调整其宽度以适应 iframe 的宽度。

于 2013-08-27T20:37:30.820 回答
0

我设法通过脚本集成的类似按钮（“HTML5”而不是“IFRAME”实现）实现了这一点——但是这是一段时间前（超过 2 年），所以我不确定他们的标记是否已经改变。此方法依赖于将 Facebook 标记直接注入您的页面以进行 CSS 控制。我使用的代码如下：

/* Facebook Like integration */

.facebook-like {
    height: 24px;
    margin: 8px 12px 0;
    width: 47px;
}

.facebook-like .decoration {
    display: none;
}

div.fb-like > span:first-child iframe.fb_ltr {
    width: 47px !important;
}

.fb_edge_comment_widget {
    margin: 10px 0 0 -346px;
}

.fb_edge_comment_widget span {
    overflow: hidden;
    position: relative;
    width: 393px;
}

.fb_edge_comment_widget iframe {
    margin: -10px 0 0;
}

这导致的问题之一是丢失了框顶部指向“赞”按钮的小三角形。我重新创建它如下：

.fb_edge_comment_widget::after {
    background: url(data:image/gif;base64,R0lGODlhCQAGAJECAP///zMzM////wAAACH5BAEAAAIALAAAAAAJAAYAAAIOlI8XaQGLHHhq2iXtDAUAOw%3D%3D) no-repeat;
    content: '';
    display: block;
    height: 6px;
    position: absolute;
    right: 30px;
    top: -5px;
    width: 9px;
    z-index: 99999;
}

…然而，这在代码中被注释掉了，有一个小注释解释说，如果网站以纯 HTTP 提供服务并且用户已将 Facebook 配置为强制 HTTPS，则不会出现共享对话——此时三角形会破坏外观. 现在我相信 Facebook 无论如何都会强制使用 HTTPS，所以我不确定该技术是否有效。不过值得一试，我想！

于 2013-09-02T11:37:53.677 回答
0

无法正确移动它，但可以在不裁剪的情况下减小宽度。这是那些几乎没有被使用的被遗忘的 JavaScript gem 之一。我不确定 id 是否是动态的并且不断变化，但是：

//grab the iframe
iframe = $('#f2576b984')[0]

//...the gem "contentWindow", which takes the iframe as a window element
if_as_window = iframe.contentWindow

//document element can go straight to this step by equaling it to iframe.contentWindow.document
if_as_document = if_as_window.document

//use jquery to find the div and change width
$(if_as_document).find('#u_0_6').width(300)

它适用于您的示例页面，但就像我说的那样，ID 可能会发生变化，因此如果页面一致，则可能是使用 $.eq() 的情况。

于 2013-08-28T03:27:54.973 回答
0

想法：将点赞按钮放入 iFrame，将点赞按钮放置在 iFrame 的右侧，并为 iFrame 设置与弹出框的宽度和高度相等或稍高的宽度和高度。通过这种方式，您可以“告诉”Facebook 该页面在“赞”按钮的右侧结束，Facebook 将相应地在左侧显示弹出窗口。

警告：您将无法在 iFrame 下方的任何元素上接收点击事件。因此，您需要使用鼠标悬停和鼠标移出事件来操作 iframe 的 z-index 按钮。这意味着，该方法不适用于移动设备。但由于您有一个专门的移动网站（也包括平板电脑），因此该解决方案可能适合您。 更新：我还没有针对这个问题的完整解决方案。

工作示例（尝试按钮和锚点）：

父.html

<!doctype html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        iframe {
            z-index: -1;
        }
        .top-layer {
            z-index: 1;
        }
    </style>
</head>
<body>
    <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/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <div class="wrapper" style="position: relative; overflow: hidden; width: 600px; height: 800px; margin: 0 auto; z-index: 0; background-color: yellow;">
        <a onclick='window.alert("click");' style="position: absolute; left: 200px; top: 100px;">click me</a>
        <fb:like style="position: absolute; left: 360px;" href="http://www.allyou.com/static/weekly-circulars/" send="false" layout="button_count" width="140" show_faces="false" fb-xfbml-state="rendered" class="fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
        <iframe style="position: absolute; width: 600px; left: -160px; height: 600px; top: 50px;" src="child.html" frameborder="0"></iframe>
    </div>
</body>
</html>

child.html

<!doctype html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body>
    <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/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <fb:like onmouseover="$(parent.document).find('iframe').addClass('top-layer');" onmouseout="$(parent.document).find('iframe').removeClass('top-layer');" style="position: absolute; right: 0;" href="http://www.allyou.com/static/weekly-circulars/" send="false" layout="button_count" width="140" show_faces="false" fb-xfbml-state="rendered" class="fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
</body>
</html>
于 2013-08-28T20:15:00.717 回答