Facebook Like and Send 插件弹出剪辑

Posted

技术标签:

【中文标题】Facebook Like and Send 插件弹出剪辑【英文标题】:Facebook Like and Send plugin flyout clipping 【发布时间】:2012-02-15 22:32:34 【问题描述】:

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

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

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

从图形设计的角度来看,按钮的位置不能更改,也不允许滚动条。应用程序的宽度必须为 520 像素,不多也不少。

是否有任何选项可以控制浮出控件的位置以防止其剪裁?有没有其他方法可以防止剪裁?

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

【问题讨论】:

好问题。我希望我知道你的答案。为你点赞这个q,希望能引起更多关注。 【参考方案1】:

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

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

<style>
.fb-wrap 
height: 36px;
overflow: hidden;

</style>

【讨论】:

【参考方案2】:

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

一些代码

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

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

例如:如果你想完全隐藏点赞按钮的评论弹出,你可以使用这个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 像素:

这不是最漂亮的解决方案(请注意框顶部的小箭头现在指向空),但它有效。

完整的测试代码:

<!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- data-show-faces="false"></div>
        </div>
    </body>
</html>

【讨论】:

您之前是否尝试过移动 Facebook 驱动的弹出窗口?给我一个你用来定位 facebook 驱动的弹出窗口的 css 名称的例子? 我必须承认,我之前只隐藏了这些弹出窗口。我尝试将代码示例放在一起。 没错。 Facebook 将弹出框移到 iframe 中,因此您无法再使用 CSS 对其进行样式设置。 @apfelbox 非常好的答案,刚刚救了我一个客户! :D

以上是关于Facebook Like and Send 插件弹出剪辑的主要内容,如果未能解决你的问题,请参考以下文章

iOS Phonegap Like 按钮 (phonegap-plugin-facebook-connect)

facebook发送按钮返回状态码200

使用 FB like 按钮分享 mp3

如何从facebook box_count中删除“评论框”?

iOS 'like' facebook 应用程序页面,怎么做? [复制]

在 iOS WebView 中添加 Facebook 的 Like 按钮