Ihr habt Social-Plugins von Facebook, wie den Teilen, Gefällt mir, und Empfehlen Button, per FBML in eure Website eingebunden? Und nun stellt ihr fest, dass diese Elemente nicht XHTML 1.1 valide sind?
Wir haben diese ebenfalls eingebunden und dennoch ist unsere Website komplett XHTML 1.1 valide. Heute zeigen wir euch wie das funktioniert.
Update
Es ist eine neue Version mit verbesserter Technik, geringerer Dateigröße und vereinfachter Integration verfügbar. Nutze diesen Artikel und somit die neue Technik: Facebook XFBML in validem XHTML 1.1 – Version 4.0.
Da wir davon ausgehen, dass ihr die Social-Plugins von Facebook schon erfolgreich eingerichtet habt, gehen wir darauf nicht näher ein. Weitere Informationen dazu findet ihr hier: Facebook Developers Soziale Plug-ins.
Zunächst sei gesagt, diese Anleitung zur Validierung bezieht sich auf die Social-Plugins die per FBML (Facebook Markup Language) eingebunden und mittels des JavaScript SDK gerendert werden.
Zum Verständnis was verändert wird
Wir binden jedes Social-Plugin in ein HTML-Element (z.B. ein <p>) ein. Dieses HTML Element wird mit dem CSS-Befehl display:none; gekennzeichnet, damit es nicht angezeigt wird. Das darin befindliche Social-Plugin wird auskommentiert, wodurch nichts mehr angezeigt und somit vom W3C-Validator auch nichts mehr bemängelt wird.
Da unsere Plugins sowieso nur bei aktiviertem JavaScript funktionieren (per JavaScript SDK gerendert), nutzen wir nun JavaScript zum Entfernen des Kommentares und des CSS-Befehles display:none;.
Somit wird der Button nachträgich sichtbar und vom JavaScript SDK gerendert. Das Ergebnis bleibt gleich, nur ohne meckeren des W3C-Validators.
Also legen wir los
Zunächst benötigen wir folgende zwei JavaScript Dateien. getElementsByClassName.js und unsere selbst kreierte fbObjectValidation.js.
Die getElementsByClassName.js binden wir wie folgt in unseren <head>-Bereich ein (Der Pfad muss ggf. angepasst werden):
... <head> <script type="text/javascript" src="js/getElementsByClassName.js"></script> ... </head> ...
Die fbObjectValidation.js binden wir wie folgt vor dem schließenden <body>-Tag ein (auch hier muss ggf. der Pfad angepasst werden):
... <script type="text/javascript" src="js/fbObjectValidation.js"></script> </body> </html>
Nun haben wir alle notwendigen Dateien eingebunden und können uns an das anpassen der Social-Plugins machen. Ihr könnt auf folgendem Weg alle möglichen Social-Plugins per FBML einbinden:
<p class="fbreplace" style="display:none;"> <!-- FBML XXX --> </p>
Hier ein Beispiel mit dem beliebten Like-Button („Gefällt mir“-Button):
<p class="fbreplace" style="display:none;"> <!-- FBML <fb:like></fb:like> --> </p>
Den Klassen-Namen „fbreplace“ müsst ihr ebenfalls in euer HTML-Element, in dem sich euer Social-Plugin befindet, eintragen. Dies ist eine Markierung zum Ersetzen.
Ihr könnt auch <span> oder <div> anstatt dem <p> nutzen. Es muss lediglich auf „display:none;“ stehen und der Klassen-Name muss eingebunden sein.
Auf diese Weise lassen sich nun alle Facebook Plugins XHTML valide per FBML und dem JavaScript SDK einbinden. Darunter beispielsweise:
- Teilen Button (Share Button)
- Gefällt mir (Like Button)
- Empfehlen (Recommend Button)
- Fanpage
Ich hoffe es hat euch weiter geholfen, auf dem scheinbaren Standard zu bleiben.
Rechtliches
Das Script kann privat sowie kommerziell frei integriert und modifiziert werden. Die Verbreitung und Veröffentlichung ist ohne schriftliche Genehmigung nicht zulässig.
Anbei noch ein Empfehlen Button, den ihr hoffentlich nutzt.
Bis dahin!
