Es ist wieder soweit. Eine neue und vielleicht letzte Version des beliebten Facebook Object Validation Scriptes ist verfügbar. Damit lassen sich XFBML Tags von Facebook (z.B. Like-Button) auch in XHTML 1.1 W3C-Konform einbinden. Lasst euch überzeugen, denn die Neuerungen sprechen für sich.
Was ist neu?
Dieses neue Facebook Object Validation Script stellt alle Vorgänger in den Schatten. Die Neuerungen betreffen den Rechenaufwand des Besuchers sowie die Dateigröße der JavaScript Datei.
Dateigröße: Wie schon in Version 2 ist die Dateigröße sehr gering – es sind gerade einmal 930 Byte. Hinzu kommen keine weiteren JavaScript Dateien.
Funktion: In der neuen Version wird nicht einfach alles ersetzt wie in unserem Vorgänger, der Version 2. Auch wird nicht nach einer zusätzlich angegeben Klasse gesucht wie in Version 1 und Version 3.
Es werden vordefinierte Standard-Tags gesucht (div, span, p, ul, li – Die Liste kann natürlich in der JavaScript Datei erweitert werden) und geschaut ob in den gefunden Tags ein <!– FBML xxx FBML –> existiert. Existiert nun kein XFBML Object in dem gefunden Tag, wird dieses verworfen und weiter gesucht. Existiert ein Object wird es sichtbar gemacht.
Die Vorteile
- sehr geringe Dateigröße (930 Byte)
- weniger Rechenintensiv da nur noch Elementemit XFBML Objekten bearbeitet werden
- weniger zusätzlicher Code beim Einbinden der Objekte
Update von alten Versionen
Solltet ihr schon eine alte Version (egal welche) in eurer Website eingebunden habe, so könnt ihr im Prinzip einfach die JavaScript Datei austauschen. Danach sollte es wie gewohnt funktionieren, denn auch in den alten Versionen gab es die Kommentar-Weise <!– FBML xxx FBML –>, und danach wird gesucht.
Die zusätzlichen Tags um ein Objekt könnt ihr euch demnach sparen, diese sind nun kein muss mehr.
Die fbObjectValidationV4.js könnt ihr euch hier herunterladen.
Einbinden in die Website
Solltet ihr noch keine alte Version des Scriptes genutzt haben, müsst ihr wie folgt vorgehen. Zunächst müsst ihr euch die fbObjectValidationV4.js herunterladen.
Das Facebook JavaScript SDK solltet ihr schon eingebunden haben. In unserem Beispiel ebenfalls am Ende der Website.
Nun müsst ihr diese JavaScript Datei ganz an das Ende eurer Website einbinden. Also vor dem schließenden body-Tag (</body>). Das ganze könnte dann ca. so aussehen.
...
<script type="text/javascript" src="js/fbObjectValidationV4.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'FACEBOOK-APP-ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/de_DE/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>Den Pfad zur fbValidationV4.js müsst ihr bekanntlich euren Gegebenheiten anpassen.
Habt ihr dies erledigt, könnt ihr eure Facebook Social-Plugins wie folgt in eure Seite einbinden:
<!-- FBML <fb:like></fb:like> FBML -->
<!-- FBML <fb:comments></fb:comments> FBML -->
Wie ihr seht ist also keine zusätzliche Klassen-Angabe mehr notwendig. Demnach auch kein zusätzlicher span-Tag oder ähnliches.
Anstatt dem <fb:like>-Button könnt ihr natürlich auch den Share-Button, die Fanbox oder die Kommentar-Box von Facebook einbinden. Eben alles was das Facebook JavaScript SDK und XFBML hergeben.
Download
Die benötigte JavaScript Datei könnt ihr hier herunterladen: fbObjectValidationV4.js.
Fragen & Probleme
Sollten Fragen oder Probleme mit der neuen Version auftauchen, bitte ich um ein Feedback via Kontaktformular oder per E-Mail an info@ka-mediendesign.de. Dafür schon mal herzlichen Dank!
Rechtliches
Das Script kann privat sowie kommerziell frei integriert und modifiziert werden. Die Verbreitung und Veröffentlichung ist ohne schriftliche Genehmigung nicht zulässig.
Für die validität der Facebook Meta-Tags könnt ihr folgenden Artikel befolgen: Facebook Meta-Tags in validem XHTML 1.1
Vielen Dank für die Aufmerksamkeit!
