如何删除“Facebook 社交插件”文字？答案

【问题标题】：How to remove the "Facebook social plugin" text?如何删除“Facebook 社交插件”文字？
【发布时间】：2011-02-02 01:59:44
【问题描述】：

我正在使用 cmets facebook social plugin 当我嵌入它时，该脚本创建了一个 iFrame，其中包含文本“Facebook 社交插件”，底部带有 facebook 徽标（如下图所示）。

我使用 Firebug 检查了该元素，并尝试在我的 CSS 文件中将其类设置为 display:none;。但是 - 这并没有隐藏它（我怀疑这是因为它在它自己的 iFrame 中）。如何使用 CSS 或 jQuery（或任何其他方法）禁用该文本？

谢谢！

【问题讨论】：

也许你可以用一个小心放置的
覆盖它。但我会阅读服务条款，看看是否允许屏蔽归属。
你应该看到这篇文章，但要注意法律问题：stackoverflow.com/questions/13317626/div-on-top-of-iframe

标签： jquery facebook css fbml

【解决方案1】：

你把事情复杂化了。小的 CSS 更改...

.fb_iframe_widget{overflow: hidden;}
.fb_ltr{margin-bottom: -20px;}

完成！

旁注 - 我同意有关法律问题的警告。你真的不应该这样做。

【讨论】：

谢谢。我决定把它留在那儿以遵守 FB 的使用条款。
@yuval 删除 Facebook 社交插件文本的法律问题是什么？它是在哪里声明的？
我认为任何文明国家都不能阻止人们修改他们浏览器上显示的内容。这是一个类似的笑话，试图在某些国家/地区禁止广告拦截器。

【解决方案2】：

您只能控制插件开发人员（此处为 Facebook）提供给您的选项。大多数插件开发人员不允许修改他们的代码，Facebook 就是其中之一。我建议您坚持 Facebook 为您提供的内容。

阅读以下内容：

【讨论】：

【解决方案3】：

如果它是 iFrame 的 CSS 问题，那么您将无能为力（例如：覆盖它）。它是从另一个站点加载的，因此您无法控制它。

【讨论】：

【解决方案4】：

我也遇到了这个问题。我通过使用内联样式设置 iframe 的高度并将溢出设置为隐藏来修复它。

示例：iframe 为 185 像素。添加这个内联：

style="overflow:hidden; height:160px;"

【讨论】：

【解决方案5】：

请参阅.contents() method 描述中的 iframe 示例。

您可以轻松访问 DIV（或其他）并为其修改 CSS，或以任何其他方式进行操作。

【讨论】：

嗨，这当然只有在 IFRAME 的内容与主页在同一个域中时才有效，在你的情况下这不是真的，所以恐怕它不应该工作。对不起！我怀疑 IDE 精心定位的 DIV 隐藏元素的方法是唯一的方法。

【解决方案6】：

.fb_iframe_widget {overflow: hidden;}
div.fb-comments.fb_iframe_widget span {margin-bottom: -35px;}

【讨论】：

【解决方案7】：

CSS

.facebookOuter { width:248px; padding:10px 0px 10px 10px; height:230px; overflow:hidden; } .facebookInner { height:250px; width: 238px; overflow: hidden; }

和喜欢的盒子

<div class="facebookOuter"> <div class="facebookInner"> <div class="fb-like-box" data-width="250" data-height="300" data-href="http://www.facebook.com/myhumourbook" data-border-color="dodgerblue" data-show-faces="true" data-stream="false" show_border=false data-header="false"> </div> </div> </div> <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>

【讨论】：

【解决方案8】：

如果你玩弄盒子的尺寸，你可以让它自己消失，而且你甚至没有在技术上违反他们的条款，因为你没有使用自己的 hack 修改他们的代码。 =)

例子：

这个尺寸是 310x382。您仍然可以看到它正向上戳，但本质上它已经足够隐蔽，以至于任何人只是瞥一眼您的页面都不会真正注意到它。而且由于大多数冲浪者倾向于快速阅读...

【讨论】：

【解决方案9】：

我使用以下代码来摆脱它。它似乎是最新的工作。只需根据自己的喜好更改 margin-bottom。

.fb_iframe_widget {
    overflow: hidden;
}

.fb_iframe_widget span {
    margin-bottom: -30px;
}

【讨论】：

【解决方案10】：

其他解决方案具有将事情推倒的副作用。这是一个考虑下拉的 Less/Sass/SCSS 解决方案：

div.fb_iframe_widget span {
  overflow: hidden;
  margin-top: -32px;

  iframe {
    top: 32px;
  }
}

他们已将 iframe 设置为 position: absolute，大概是为了减少您完成此操作的机会。这使得顶部易于设置，瞧。

他们还将 iframe 设置为溢出：隐藏，因此如果您愿意，可以使用较短的样式进行攻击，最终在 cmets 框的底部有较大的间隙：

div.fb_iframe_widget iframe {
  box-sizing: border-box;
  padding-bottom: 32px;
}

咀嚼。

【讨论】：