Facebook „gefällt mit“-Button W3C-valide für XHTML-strict
Einen „gefällt mit“-Button auf einer Facebook-Seite zu integrieren, sollte nicht unbedingt das Problem sein. Man generiert sich auf den Facebook-Developer-Seiten den entsprechenden Code und kopiert ihn in seine Webseite. Wenn man sich aber als Ziel gesetzt hat, seine Seiten valide nach dem W3C-Standard zu gestalten und als DOCTYPE XHTML 1.0 Strict gewählt hat, muss man ein wenig mehr Aufwand investieren.
Ich habe mich hier für die XFBML-Variante (XFBML = Facebook Markup Language) entschieden, da sie perspektivisch gesehen mehr Möglichkeiten bietet.
Doch damit der „gefällt mit“-Button valide nach W3C ist, kann man den XFBML-Code nicht einfach in die Seite kopieren.
Man muss z.B. die gesamte „gefällt mit“-Button-Logik per Javascript am Ende der Webseite (direkt vor dem </body>-Tag) einbinden.
Hierzu wurde eine js-Datei mit folgendem Inhalt erzeugt:
(function() {
document.getElementById('fb-root').innerHTML = '<fb:like href="http://www.deine-domain.de' + location.pathname + '" send="false" width="450" show_faces="false" font=""></fb:like>';
window.fbAsyncInit = function() {
FB.init({appId: 'deine_app_id', autoLogAppEvents : true, xfbml: true, version:'v2.11',});FB.AppEvents.logPageView();
};
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/de_DE/sdk.js';
document.getElementById('fb-root').appendChild(e);
}());
/* ]]> */
www.deine-domain.de und deine_app_id stehen hier als Platzhalter und sind durch die entsprechenden individuellen Werte zu ersetzen.
Erläuterung des Skriptes für den „gefällt mit“-Button
Die Division <div id="fb-root"></div> wird an die Stelle in die Webseite eingefügt, an welcher der „gefällt mit“-Button erscheinen soll.
Der oben aufgelistet Quellcode wird in eine Datei geschrieben, die direkt vor dem </body>-Tag eingebunden ist.
:
<script type="text/javascript" src="js/facebook-min.js"></script>
</body>
Innerhalb der Datei wird der „gefällt mit“-Button durch
document.getElementById('fb-root').innerHTML=...
dynamisch in die Division id="fb-root" eingefügt.
Danach wird die Facebook-Connect-Library geladen und mit FB.init initialisiert.
Da der Seitenname durch die Variable location.pathname repräsentiert wird, kann der Code universell verwendet werden.
Sicherlich kann man den „gefällt mit“-Button auch anders einbinden, z.B. in dem man den DOM-Baum um einen Node erweitert. Von dieser Variante habe ich aber bewußt Abstand genommen. Hierzu vielleicht etwas in einem der nächsten Blockbeiträge.
