Sie befinden sich hier:
» 
» 
21.07.2011

Facebook „gefällt mit“-Button W3C-valide für XHTML-strict

Kategorie(n): Facebook Tipps

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:

/* <![CDATA[ */
(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>';

  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);
}());

window.fbAsyncInit = function() {
  FB.init({appId: 'deine_app_id', status: true, cookie: true, xfbml: true});
};
/* ]]> */

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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

22

Kommentare:

09.Dezember2011

Danke für die Info. Hat super geklappt smile

10.Dezember2011

Freut mich, dass ich dir dadurch helfen konnte.

Gruß Harry

26.November2012

Vielen Dank!
Ich war schon länger auf der Suche nach einer einfachen Variante, den Like-Button auf meiner Seite zu integrieren, ohne dass der W3C meckert.
LG
Maria