Facebookのファンボックスは "css"属性を尊重しませんでしたか？

Question

これはもう動作しません。たぶんFacebookは "css"属性を尊重することをやめましたか？これは誰のためにも機能しますか？

Answer 1

Facebookは新しいLike BoxのためにFan Box（2009年導入）を非難しました。それぞれの機能は似ていますが、異なるJavaScript APIを使用しています。

あなたは自分の外部CSSでまだcustomize the appearance of the Fan Boxにすることができますが、Facebookがこの能力をどれだけ引き続きサポートするかははっきりしていません。

ここでファンボックスは、外部CSSを受け入れる方法を示していますいくつかのサンプルFBMLコードです：

<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は、すべてのHTML/CSS/JS要素のプレフィックスに、アプリケーションIDを使用して作成された「名前空間」を付けます。こうすることで、FacebookはあなたのCSSが標準のFacebookの要素とレイアウトを操作できないことを保証します。

CSSのプロパティとセレクタはすべて許可されているわけではなく、Facebookから多くのCSS3ルールがCSSから削除されることに注意してください。

しかし、Facebookは他のユーザーを許可しないでいくつかのベンダーのプレフィックスを削除するように思われます。たとえば、FacebookはWebkitベンダーのプレフィックス（-webkit-border-radius）を削除しますが、Mozillaプレフィックス（-moz-border-radius）を許可します。迷惑！

これは、あなたのカスタムFacebookファンボックスのすべてのブラウザに丸い角、ドロップシャドウ、および他のベンダー固有のCSSが表示されないことを意味します。 だから、あなたがしようとすると、すべてのブラウザで同じようにあなたのFacebookのファンボックスを表示することができない場合があります。