gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 05:20:13 32 4
gpt4 key购买 nike

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

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

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

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

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

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

最佳答案

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

一些代码

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

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

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

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

关于Facebook 点赞和发送插件弹出式剪辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8957009/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com