如何删除“Facebook社交插件”文本？

Question

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

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

谢谢！

Answer 1

你的事情太复杂了。小CSS改变......

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

完成！

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

Answer 2

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

阅读以下内容：

1. Brand Permissions Center
2. Facebook Platform Policies

Answer 3

如果这是iFrame的CSS问题，那么你就无法做任何事情（例如：覆盖它）。 它从另一个站点加载，因此您无法控制它。

Answer 4

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

示例：iframe为185px。添加此内联：

style =“overflow：hidden; height：160px;”

Answer 5

请参阅.contents() method的说明中的iframe示例。

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

Answer 6

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

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

Answer 8

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

示例：

此尺寸为310x382。你仍然可以看到它正在抬头，但基本上它已经足够隐藏，任何只是浏览你的页面的人都不会真正注意到它。而且由于大多数冲浪者倾向于加速阅读...

Answer 9

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

.fb_iframe_widget {
    overflow: hidden;
}

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

Answer 10

其他解决方案会产生副作用。这是一个考虑下拉的Less / Sass / SCSS解决方案：

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

  iframe {
    top: 32px;
  }
}

他们已经将iframe设置为position: absolute，大概是为了减少你将其取消的机会。这使得顶部很容易设置，瞧。

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

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

的Chomp。