使 Facebook 页面插件响应（到处搜索，找不到解决方案）答案

【问题标题】：Make Facebook page plugin responsive (Searched everywhere and couldn't find a solution)使 Facebook 页面插件响应（到处搜索，找不到解决方案）
【发布时间】：2015-05-09 04:05:11
【问题描述】：

Facebook 似乎决定将点赞框更改为页面插件，并将最大尺寸限制为 500 像素。

脚本页面：http://akecheta.com/facebooklikeplugin-responsive.html

我的问题正是那个，我不能在likebox上使用全宽布局。到目前为止，这是我尝试过的：

 /* Fits the like box to the parent div, creating a fluid layout */
#u_0_0 > div {
  width: 100% !important;
}
/* Fits the background image to the like box */
.uiScaledImageContainer._2zfr {
  width: 100% !important;
}

/* Modifies the first background color of the fans part */
._h7l {
  background: #EE6C00 !important;
}
/* Modifies the second background color of the fans part */
._h7n {
  background: transparent !important;
}
/* Modifies the color of the text above the fans thumbnails */
/* Modifies the color of the text above the fans thumbnails */
._50f3 {
  font-size: 150%;
  line-height: 25px;
  color: #FFFFFF !important;
}

它在运行中运行得非常好，但后来我将这些更改保存到我的样式表中，什么也没发生。

页面加载时所有的类都发生了变化，但 id #u_0_0 仍然保持不变。就好像它不存在一样。

现在我正在想办法解决这个问题，因为我需要使用全宽布局的页面插件。

【问题讨论】：

能否发布您的网站或其他地方，让我们看看这个插件的实际实现？
这里akecheta.com/facebooklikeplugin-responsive.html
您的 CSS 在您在 devtools 中即时执行而不是在您将其放入样式表时起作用的原因是，正在加载插件的 iframe 无法由其外部的 CSS 设置样式。设置 iframe 样式的唯一方法是从 iframe 本身内部。由于您将其作为第三方插件加载，因此您需要寻找一种在 iframe 完全加载后将样式动态注入到 iframe 中的方法。有关您尝试做的更多方向，请参阅此问题：stackoverflow.com/questions/624979/…
谢谢，不只是我，但我相信您的帮助将帮助世界各地的许多其他人。这是一个开始的地方，因为 Google 没有太多关于它的信息。
@LanceTurri 将其发布为答案。以便可以将其标记为已解决（未解决但您知道我的意思）

标签： javascript jquery facebook css facebook-graph-api

【解决方案1】：

您的 CSS 在您在 devtools 中运行而不是在您将其放入样式表时起作用的原因是，正在加载插件的 iframe 不能由其外部的 CSS 设置样式。设置 iframe 样式的唯一方法是从 iframe 本身内部。由于您将其作为第三方插件加载，因此您需要寻找一种在 iframe 完全加载后将样式动态注入到 iframe 中的方法。

有关您尝试做的更多方向，请参阅此问题：Append a stylesheet to an iframe with jQuery

【讨论】：