1

看起来这不再起作用了。也许 Facebook 不再尊重“css”属性？这仍然适用于任何人吗？

4

1 回答 1

3

Facebook 已弃用Fan Box（2009 年推出），转而使用新的Like Box。虽然每个功能都相似，但它们使用不同的 JavaScript API。

您仍然可以使用自己的外部 CSS自定义 Fan Box 的外观，但目前尚不清楚 Facebook 将继续支持该功能多久。

下面是一些示例 FBML 代码，展示了 Fan Box 如何接受外部 CSS：

<div id="fb-root"></div>
<fb:fan
    profile_id="104818966496"
    backgroundshow_faces="true"
    stream="false"
    header="false"
    connections="8"
    css="http://example.com/css/stylesheet.css?1310162522">
</fb:fan>

<script>
    // Initialize Facebook JavaScript SDK
    // http://developers.facebook.com/docs/reference/javascript/FB.init
    window.fbAsyncInit = function() {
      FB.init({
        appId: '136570223089806',
        xfbml: true
      });
    };

    // Asynchronously Load Facebook Fan Box Social Plugin
    (function () {
      var e = document.createElement('script');
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
      e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

需要记住的一些事项：

  • 您的自定义 CSS 将通过 Facebook 的内容呈现服务器进行过滤，并且需要面向公众。（这意味着，您必须将 CSS 文件上传/编辑到 Web 服务器，以测试它在进行更改时的外观）。
  • 建议在开发过程中将查询字符串附加（和更新）到您的 CSS，因为 Facebook 会大量缓存您的 CSS。进行更改后，更新您的查询字符串变量以指示 Facebook 获取您的样式表的新副本。

Facebook 将使用您的应用程序 ID 创建的“命名空间”为您的所有 HTML/CSS/JS 元素添加前缀。通过这样做，Facebook 确保您的 CSS 无法操纵标准的 Facebook 元素和布局。

请注意，并非所有 CSS 属性和选择器都是允许的，Facebook 将从您的 CSS 中删除许多 CSS3 规则。

但最令人沮丧的是，Facebook 似乎删除了允许某些供应商前缀而不允许其他供应商前缀。例如，Facebook 删除了 Webkit 供应商前缀 ( -webkit-border-radius)，但允许使用 Mozilla 前缀 ( -moz-border-radius)。恼人的！

这意味着圆角、阴影和其他供应商特定的 CSS 可能不会出现在您的自定义 Facebook 粉丝盒的所有浏览器中。所以，尽你所能，你可能无法让你的 Facebook 粉丝盒在所有浏览器中看起来都一样。

于 2011-07-09T04:52:50.170 回答