在 fbml iframe 中将主体背景设置为透明答案

【问题标题】：Set background of body to transparent in fbml iframe在 fbml iframe 中将主体背景设置为透明
【发布时间】：2011-08-26 05:03:38
【问题描述】：

我正在寻找一种解决方法，允许我从默认情况下为白色背景的 fbml iframe 内的 body 标记中删除背景。

我尝试了访问 fbml iframe 的不同方法，但不幸的是，facebook 拒绝了任何将某些内容放入框架的尝试。

这里报告了这个错误，但并没有太多改变它：http://bugs.developers.facebook.net/show_bug.cgi?id=12621

任何聪明/讨厌的方法来解决这个问题？

【问题讨论】：

标签： javascript html css fbml

【解决方案1】：

您可以使用使 iframe 中的背景透明

colorscheme=transparent

而不是dark 或light :)

【讨论】：

【解决方案2】：

除非您的网站在facebook.com 上运行，否则您无法访问该iframe 中的任何内容（请参阅same origin policy）。

如果 Facebook 没有让您选择更改它，那么您就不能。

【讨论】：

【解决方案3】：

我在一个项目中使用的一个 Facebook 小部件遇到了相反的问题（背景是透明的，我需要一个彩色的）。我所做的是将小部件包装在我归类为“facebook_badge”的容器 div 中，然后访问它，然后通过 CSS 访问 iframe，如下所示：

.facebook_badge iframe {
   background: #fff;
}

从它的声音来看，它们与它们的小部件和诸如此类的东西并不一致，但它可能值得尝试和玩弄（理论上，您可以使用 iframe body 访问主体，但我还没有测试过它）。您至少可以通过 iframe 本身将其设置为与您的背景相匹配的纯色。

【讨论】：

FBML 服务器标签会扫描您的代码并丢弃任何未经授权的脚本 - 甚至是简单的 alert();
这不是脚本。您将 CSS 放入您自己的 CSS 文件中。我已经用这里的小部件完成了它：rockshortvine.com。就像我说的，它们似乎与他们的小部件以及你能做什么和不能做什么不一致，所以我只能告诉你我对我使用的小部件做了什么。
是的，抱歉回复错误。无论如何，你没有机会覆盖 iframe 内的 css，所以这样的选择器不起作用。

【解决方案4】：

Facebook 小部件默认具有内置透明度？

因此 ARIA 属性：AllowTransparency="true",

我的网站上有一个点赞按钮运行良好 - 它不验证但验证是 just a tool。

你也可以使用方形FB样框：

<iframe src="http://www.facebook.com/plugins/like.php?href=http://mutant-tractor.com/&amp;layout=box_count&amp;show_faces=false&amp;width=65&amp;action=like&amp;font=segoe+ui&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:55px;height:60px;" allowtransparency="true"></iframe>

FBML 赞按钮： http://www.shinyface.com/2010/08/16/adding-facebook-like-buttons-to-your-website/

【讨论】：

默认情况下他们确实内置了它，甚至在元素上设置了 - 问题是包含 facebook api 的 iframe 内的主体被来自 facebook 的外部样式表覆盖。甚至将样式标签放在里面也不会覆盖它 - 这是一个记录在案的 facebook 错误，现在 2 个月没有解决方案，我正在寻找一个黑客/解决方法。
当然你可以使用 FB SDK 并构建你自己的？我发现的最佳解决方案是使用上面的“方形”框；演示：mutant-tractor.com 见左侧边栏。

【解决方案5】：

推荐插件中有一个类似的错误。你可以在这里投票：http://bugs.developers.facebook.net/show_bug.cgi?id=19459

同时，您可以使用具有透明背景的Activity插件。

【讨论】：