Wie binde ich einen Facebook Button valide ein

Facebook Logo
Da dachte ich, ich habe es endlich geschafft, schaue in den WC3 Validator, checke nach und bekomme schon wieder ein graues Haar... Facebook Button...
Also gehe ich erneut auf die Suche im Netz. Neue Wege, neue Möglichkeiten.

Und hier nun meine gefundene Lösung:

 

Man binde an der Stelle, wo man den Facebook Button haben möchte, folgenden Code ein:

 
<div id="fb_iframe">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.webadrett.de
&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=recommend
&amp;font=verdana&amp;colorscheme=light&amp;height=25" scrolling="no"
frameborder="0" style="border:none; overflow:hidden; width:100px; height:25px;">
</iframe>
</div>

<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href=www.webadrett.de
&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=recommend
&amp;font=verdana&amp;colorscheme=light&amp;height=25" scrolling="no"
allowtransparency="true" frameborder="0" style="border:none; overflow:hidden;
width:100px; height:25px;"></iframe>
<![endif]-->

Kurz zur Erklärung:

Leider gibt es (wie so häufig) Probleme mit dem allseits beliebten IE, egal in welcher Version, weshalb man beim Einbinden des Facebook Buttons hier mit extra Hacks arbeiten muss.

Der erste Teil enthält den Code für alle gängigen Browser (Firefox, Opera, Chrome, Safari) und im Zweiten benutzen wir den Hack für den IE. Nun müssen wir „nur noch“ im CSS-Style den <div id="fb_iframe"> wieder ausblenden.

Wenn man eine spezielle CSS-Datei für den IE hat, dann dort rein, ansonsten mit in die Standart CSS-Datei:
 
*+html #fb_iframe {display:none;}

Und leider braucht der IE8 noch eine Extrabehandlung:

 
/* IE8 only*/
html>/**/body #fb_iframe {
display /***/: none9;
}

Jetzt hat man seinen Facebook Button. Natürlich kann man auch hier wieder alle möglichen Einstellungen im Code vornehmen, so wie man es braucht...

 

Als nächstes Ziel steht der Twitter Button auf dem Plan. Ich hoffe, ich werde nicht arm bei meinem Friseur...

Produkt

Logo check&review

check&review ist das Kamerasystem und die Software für alle möglichen Spaltlampen* für hochauflösende Augen-, Augenabschnitts- oder Fluoreszenzaufnahmen in Bild und Video.
 
Das Abspeichern in Patientenverwaltungssysteme ist bereits durch Schnittstellen möglich.
 
Optisch wurde das Kameragehäuse den entsprechenden Spaltlampen angepasst.
 
Schauen Sie sich die Impressionen an unter: Software

* z.B. die Spaltlampen, Operationsmikroskope oder der Nachbau von Zeiss, Topcon, Haag-Streit oder Rodenstock.