当前位置：文江博客话题详情

Facebook 点赞和发送插件弹出剪辑

发布于 2024-12-28 01:39:51 字数 308 浏览 1 评论 0原文

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

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

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

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

是否有任何选项可以控制弹出按钮的位置以防止其被剪切？还有其他方法可以防止剪辑吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼波传意 2025-01-04 01:39:51

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

一些代码

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

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

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

.fb_edge_comment_widget.fb_iframe_widget {
    display: none;
}

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

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

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

Moved by 300px

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

完整测试代码：

<!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>

Since these buttons include HTML structure in your page, they are stylable via CSS. So you can move the popup dialogs with CSS.

Some Code

If you take a closer look at the popups presented by facebook, you will see, that it has some styles attached to it:
Facebook Styles

The only thing you now have to do is moving this popup via CSS to the correct position.

For example: if you want to hide the comment popup of the like button completely, you can just use this CSS:

.fb_edge_comment_widget.fb_iframe_widget {
    display: none;
}

If you now want to move it, you cannot use .fb_edge_comment_widget.fb_iframe_widget since the element properties (set by JavaScript) will override your CSS. You have to use the span one element lower:

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

This code will move the popup by 300px to the left:

Moved by 300px

This is not the most beautiful solution (note the small arrow at the top of the box now points to nothing), but it works.

Complete test code:

<!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>

回复收藏 0 原文

海之角 2025-01-04 01:39:51

这不是你问题的准确答案。看来你根本无法控制弹出窗口。我很高兴通过将我的 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>

It's not an exact answer to your question. It seems you cannot control the flyout at all. I was happy to get rid of the flyout completely by putting my fb button code in a div that's only as high as the button and set the overflow: hidden. Then the popup's not visible at all.

<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>

回复收藏 0 原文

~没有更多了~