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.

  • Pingback: Nachtrag: Facebook “Gefällt mir”-Button | Andi Licious' Blogosphäre()

  • Pingback: Facebook “Gefällt mir”-Button für Wordpress | Andi Licious' Blogosphäre()

  • Pingback: Linkeria (14. Juni – 22. Juni) » der tag und ich()

  • Vorstadtprinzessin

    ähhh lebst du noch? ;)

  • Vorstadtprinzessin

    shit mensch mein reader hat nicht angezeigt das es neue Artikel von dir gab und schwubs seh ich oben den Hinweis…leider zu spät! ;) okay du lebst….sehr beruhigend :D

  • John

    Hej,
    habe das Script installiert, bekomme jedoch nach Benutzung einen roten Fehler Schriftzug. Klickt man auf diesen wird gesagt, dass die URL nicht gefunden werden konnte.

    Der Link erscheint trotzdem sofort bei Facebook. Allerdings wird die vollständige URL zum Artikel angezeigt und nicht der Artikelname. Woran liegt das?

    Gruß John

  • Das lässt sich aus der Ferne so schlecht sagen, gerade wenn du nicht die iframe-Lösung benutzt. Wie ist denn der Link zu der Seite, auf der dieses Problem auftritt?

    Grüße, Andi

  • Richard

    Kann man eigentlich nicht die Schriftfarbe ändern?

    Passt sich farblich nicht an den Hintergrund an.

  • Pingback: Facebook erweitert den Like-Button & API | Andi Licious' Blogosphäre()

  • Markus

    Versuche seit Tagen eine App zu registrieren aber bekommen immer die Meldung:

    „Sorry, an error has occurred.
    We’re working on getting this fixed as soon as we can.“

    Kann das jemand bestätigen? Da findet man so einen guten Artikel der einem das erklärt und dann geht es nicht :-(

    • Hallo Markus,
      das spinnt bei Facebook von Anfang an schon rum … wenn du dann jedoch in deine Dev-Apps guckst, taucht die App auf. Zumindest so bei mir. Über folgenden Link kommst du auf diese Seite: http://www.facebook.com/developers/apps.php

      Grüße, Andi

      • Markus

        Danke Amdi. Hab geschaut und tatsächlich, ganze 9 mal taucht sie da jetzt auf :-)

        • Hast du es jetzt hinbekommen oder kann ich dir noch helfen?

          • Markus

            Danke Dir, hab es schon. Ist nur noch nicht Online da ich noch einiges am Design schrauben muss, da ich je nach Artikel Art eine andere Einbindung vornehme. Aber als ich dann meine Anwendung gefunden hatte, war der Rest ja relativ einfach. Danke nochmal :-)

  • Auroraz

    Hallo!

    Super Tutorial hier! Ich bin leider ein absoluter neuling und weiß nicht was du mit Template meinst.

    Soll ich im FTP Verzeichnis den Code in eine bestimmte .php Datei reinklatschen, oder in der Artikelbearbeitung in der Benutzeroberfläche?

    Vielen Dank

    • Aloha,
      erst einmal grundlegende Infos zu den Templates > http://codex.wordpress.org/Templates

      Und dann ist auf deinem Templates-Ordner bspw. die single.php gemeint. Man lernt zwar nur durch anwenden, doch würde ich dir erst einmal etwas lektüre empfehlen, wenn du noch nicht so weit drin bist. Oder deinen Blog einmal lokal installieren und etwas experimentieren. :)

      Viele Grüße, Andi

  • Pingback: Keywords & Search Strings: Mai 2010 | Andi Licious' Blogosphäre()

  • Echt netter Artikel als Tipp noch. für WP in die Single Post Php =) Schon ist der dynamische Button fertig ohne Plugin, im Header die Meta von Facebook rein.

    <fb:like href="“ send=“false“ width=“450″ show_faces=“false“>

  • Andreas

    Hallo Andi,
    habe zu deinem Tutorial noch zwei Fragen:
    – habe ich das richtig verstanden, man muss einen Facebook-Account haben, um den Code nutzen zu können?
    – ganz allgemein: „show faces“ hat doch nur eine Auswirkung, wenn man eine Fan-Seite bei facebook hat, oder?

    Viele Grüße
    Andreas