Eine neue Version des beliebten fbValidation-Scripts ist ab sofort verfügbar. Es wurden ein paar Schwachstellen der Version 2 behoben welche die Ausführung anderer JavaScripts blockierte (z.B. Google Maps via API).
Einleitung
Dieser Artikel basiert auf unseren vorherigen Artikel FBML in XHTML 1.1 – Version 1.0 und FBML in XHTML 1.1 – Version 2.0.
Da es in Version 2 unseres Scripts leider Fehler beim ausführen anderer JavaScripts gab, welche beim laden der Seite genutzt werden, haben wir nun hier die Lösung.
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.
Im Prinzip ist es eine Verbesserung der Version 1.
Mit dieser Version lassen sich z.B. Google Maps (via API) und andere JavaScripte wieder beim öffnen der Seite ausführen. Dennoch ist diese Version besser als die erste, da wir hier wiederum nur eine JavaScript Datei haben, welche geladen und verarbeitet werden muss und keine CSS-Styles gesetzt werden müssen.
Die Vorbereitung
Wir gehen von einer Seite aus, welche kein fbValidation Script der vorherigen Versionen nutzt (wenn ja, raus damit). Außerdem sollten die Facebook Social Plugins schon funktionieren und laufen. Das JavaScript SDK von Facebook solltet ihr vor dem schließenden <body>-Tag eingebunden haben.
Also, dann ran an den Speck!
An sich müsst ihr nur eine Sache erledigen, und zwar binden wir unsere fbValidationV3.js (in Version 3.0) vor unseren Facebook JavaScript SDK Aufruf ein.
Und zwar so:
...
<script type="text/javascript" src="js/fbObjectValidationV3.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 fbValidationV3.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:
<span class="fbreplace"> <!-- FBML <fb:like></fb:like> FBML --> </span>
Der <span>-Tag ist notwendig, kann aber auch durch ein <p> oder <div> ersetzt werden – lediglich die Klasse „fbreplace“ muss enthalten sein. Daher könnt ihr euren Button je nach Bedarf anpassen (inline, block, paragraph, …). Es würde wohl sogar in Listen funktionieren!
Anstatt dem <fb:like>-Button könnt ihr natürlich auch den Share-Button, die Fanbox oder die Kommentar-Box von Facebook einbinden.
Ich hoffe, dies hat für euch zur Lösung des bekannten Problems geführt.
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
Wenn nicht, schlagt in den Kommentaren Alarm!
Vielen Dank für die Aufmerksamkeit!
