Facebook Like-Button für WordPress mit XFBML

Im April zeigte ich euch, wie ihr den ‚Gefällt mir‘-Button (Like-Button) von Facebook in euer WordPress-Blog einbaut sowie wie ihr mit den passenden Meta-Daten in eurem Header auch Statistiken über die Nutzung dessen auf Facebook einsehen könnt. Im dritten Teil zum ‚Gefällt mir‘-Button möchte ich euch zeigen wie ihr diesen mittels XFBML-Tag in euren Blog integriert und vor allem nicht direkt, sondern erst nach dem eigentlichen Content ladet (asynchrones nachladen).

Die Grundlagen
Solltet ihr den Button nach der zuletzt gezeigten Methode via iframe eingebunden haben, entfernt als erstes diese Daten aus euren Templates und vergesst dabei auch den Header nicht. Habt ihr dies erledigt, meldet ihr eure Seite für den ‚Gefällt mir‘-Button bei Facebook Developers an. Achtet bei der Eingabe darauf hinter der Domain/URL ein Slash (/) einzugeben, da euch ansonsten die Anmeldung in den Wahnsinn treibt. Nach der Registrierung werden euch eure Schlüssel für diese App angezeigt. Die AppID ist dabei sehr wichtig, da ihr diese im nächsten Schritt benötigt.

Der Code
In der folgenden Code-Box findet ihr den passenden Quelltext für euren Blog. Diesen bindet ihr in euer Template (bspw. Artikelansicht/single) ein. In der Zeile appId tragt ihr eure aus dem vorhergehenden Schritt ein. Ersetzt dabei alle Nullen durch eure Ziffern.

<fb:like show_faces="false"></fb:like>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '000000000000000',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Die Individualisierung
Nun verwendet ihr den ‚Gefällt mir‘-Button so, wie ich ihn zum Beispiel auch hier im Blog eingebunden habe. Natürlich könnt ihr diesen auch für euren Blog anpassen. So lassen sich beispielsweise die Avatare/Profilbilder der FB-Benutzer anzeigen, die den Button angeklickt haben, sowie sich der Text hinter dem Button auf einzig die Anzahl der ‚Likes‘ beschränken. Solltet ihr das Verlangen nach mehr bzw. weniger Informationen an diesem Button haben, folgen jetzt noch ein paar Beispiele.

Ersetzt im Code die fb:like-Zeile durch folgenden Code um…

Die Avatare/Profilbilder der Benutzer anzeigen, denen der Artikel gefällt:

<fb:like show_faces="true"></fb:like>

Zeige den Button ohne Text, sondern nur den Counter für die Anzahl der Likes an:

<fb:like layout="button_count"></fb:like>

Anstatt dem hellen (Standard), ein dunkles Button-Design verwenden:

<fb:like colorscheme="dark"></fb:like>

Den Standard-Like-Text durch Recommend ersetzen:

<fb:like action="recommend"></fb:like>

Natürlich und richtigerweise lassen sich diese Einstellen auch miteinander kombinieren. So würde beispielsweise ein Empfehlungs-Button mit Standard-Layout, angezeigten Avataren/Profilbildern, einer Breite von 450 Pixel sowie im dunklen Design folgendermaßen in der fb:like-Zeile aussehen:

<fb:like layout="standard" show_faces="true" width="450" action="recommend" colorscheme="dark"></fb:like>

Um euch einen kleinen Überblick über die Grundfunktionen zur eventuellen Kombination zu verschaffen, hier eine kurze Liste:

layout="standard" // --> Übliche Ansicht mit Text.
layout="button_count" // --> Anzahl der Likes ohne weiteren Text.

show_faces="true" // --> Avatare/Profilbilder der Benutzer anzeigen, denen dieser Artikel gefällt.
show_faces="false" // --> Avatare/Profilbilder nicht anzeigen.

width="450" // --> Breite des gesamten Elements einstellen. Für Standard-Layout sind 450 Pixel auch der Standard.

action="like" // --> Der Button zeigt 'Like' bzw. die jeweilige landesübliche Übersetzung ('Gefällt mir').
action="recommend" // --> Recommend anstatt Like.

colorscheme="light" // --> Helles Design der Box/Button.
colorscheme="dark" // --> Dunkles Design der Box/Button.

font="lucida grande" // --> Als Schrift wird Lucida Grande verwendet. Alternativ gibt's auch Arial, Segoe Ui, Tahoma, Trebuchet MS und Verdana.

Im obenstehenden Code ist übrigens die asynchrone Lademethode bereits eingefügt, ebenfalls grundsätzlich die deutsche Sprachvariante.