Captain Obvious

Das Facebook Fan Widget ist schon was tolles, kann man so doch Seitenbesuchern direkt ermöglichen, Fan der Seite auf Facebook zu werden. Blöd nur, dass das eingebundene Ding (wie so viele eingebundene Sachen) den schönen, sauberen Code kaputt macht. Da gibt man sich Mühe, alles ganz ordentlich zu coden und plötzlich spuckt der W3C-Validator wieder HTML-Fehler aus.

Captain Obvious to the rescue!
Für Zockwork Orange suchte ich nach einer Lösung. Auf die Fanbox (so bescheuert ich die neue Mode, für jedes Privatblog eine Fan-Page einzurichten, finde, für so ein Projekt ergibt das mMn durchaus Sinn) wollten wir nicht verzichten, aber der nun unsaubere Code kratzte doch an meinem Ego, das muss doch anders gehen.
Alle Seiten, die ich kenne und die diese Facebook-Box in der Sidebar haben, beschmutzen ihren (hoffentlich) sonst so validen Code mit diesem unschönen Fehler.
Mit ein bisschen Suchen hier und ein wenig Basteln dort habe ich eine Lösung gefunden, die allen meinen Tests standhalten konnte und den HTML-Code valide macht. Yay!

Der original Code, den man von Facebook bekommt, sieht folgendermaßen (oder ähnlich) aus (kommt auf die Einstellungen an):
<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_GB"></script><script type="text/javascript">FB.init("786ff9b82351fcf748b165a166eb83ef");</script><fb:fan profile_id="175812740324" stream="0" connections="10" logobar="1" width="300"></fb:fan><script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_GB"></script><script type="text/javascript">FB.init("786ff9b82351fcf748b165a166eb83ef");</script><fb:fan profile_id="175812740324" stream="0" connections="10" logobar="1" width="300"></fb:fan>

Schön übersichtlich und kompakt, oder? Das fb:fan-Tag mögen “The Elders of the Internet” aka. das W3C gar nicht. Insgesamt 7 Fehler verursacht die Facebook-Box. Doch verzweifelt nicht, es gibt eine einfache und viel schlankere Lösung. Und sie validiert sogar.

<!--[if !IE]><!-->
<object data="http://www.facebook.com/connect/connect.php?id=175812740324&connections=10&stream=0" type="text/html" class="facebook_fans">
</object>
<!--<![endif]-->
<!--[if IE]>
<iframe src="http://www.facebook.com/connect/connect.php?id=175812740324&connections=10&stream=0" class="facebook_fans" allowtransparency="true" frameborder="0"></iframe>
<![endif]-->

Damit ihr glaubt, dass das gleiche Ergebnis erzeugt wird, hier mal zum Vergleich beide Code-Schnipsel direkt eingefügt.
Einmal das obere (nicht valide) von Facebook (was bei mir manchmal noch den Amazon-Code aus meiner Sidebar mit anzeigt. Ein weiterer Grund, das nicht zu nutzen):

Und zum Vergleich das valide untere (was bei mir aus unerklärlichem Grund manchmal einen Fan zu wenig anzeigt):

Die Parameter sind relativ einleuchtend. connections=10 heißt, es werden 10 Fans angezeigt, hier gebt ihr einfach an, wie viele Fans angezeigt werden sollen. Den Stream-Parameter kann man auf 0 oder 1 setzen, je nachdem, ob die letzten Wallposts in der Box angezeigt werden sollen (1 = true, 0 = false). Logobar ist der Parameter für den blauen Balken mit dem Facebook-Schriftzug (auch hier 1 = true also wird angezeigt, 0 = false, wird weggelassen). Die ID ist die Seiten-ID, die steht auch im original Code unter profile_id=”id=175812740324″. Die Zahl kopieren und für ?id=”175812740324″ einfügen.

Achtung: alle diese Parameter müssen zwei Mal eingegeben werden, da der Code aus zwei Teilen besteht. Ein object für alle Browser außer IE, ein iFrame für den IE. Das iFrame ist nicht valid, wird aber nur im IE angezeigt und der W3C-Validator benutzt keinen IE-Useragent, d.h. er sieht den entsprechenden Code gar nicht.
Ganz wichtig noch, der Klasse für das object (ich habe sie .facebook genannt) die Höhe der Box mitgeben, ansonsten wird sie u.U. abgeschnitten. In dem Beispiel also .facebook{height:270px;} (oder direkt style=”height:270px;” im object und im iFrame).

Mal einen letzten Blick auf den Code werfen!

Und was sagt der W3C-Validator dazu (nicht vergessen, den Seiten-Cache zu löschen!)

Mission: Valider Facebook-Code ausgeführt.
Einen Grund für den fehlenden Fan habe ich nicht finden können, das sollte aber nicht so tragisch sein, so lange es bei einem bleibt (der fehlt auch nur manchmal, irgendwas läuft da bei Facebook falsch).

Nachtrag: ein noch viel einfacherer Weg ist, das Zeug als JavaScript auszugeben. Funktioniert leider aber nur, wenn JavaScript aktiviert ist (danke an Niklas für den Hinweis).


<script type="text/javascript">
/* <![CDATA[ */
document.write('<fb:fan profile_id="175812740324" stream="0" connections="10" logobar="1" width="290" height="270"><\/fb:fan>');
/* ]]> */
</script>


Hier das Ergebnis:

Bei deaktiviertem JavaScript sieht man das aber gar nicht, gleiches gilt für den original Code von Facebook. Einzig die object/iFrame-Lösung ist immer valid und wird immer angezeigt.

Fragen, Tipps, Anregungen, Hinweise?