Question

看起来这不再适用了。也许Facebook停止尊重“css”属性？这对任何人都有效吗？

Answer 1

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

您仍然可以customize the appearance of the Fan Box使用自己的外部CSS，但目前还不清楚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 Fan Box的所有浏览器中。 所以，尽量尝试，你可能无法让你的Facebook Fan Box在所有浏览器中看起来都一样。

Facebook粉丝盒停止尊重“css”属性？

1 个答案: