Facebook XFBML Like-Button für WordPress

Gestern hatte ich in meinem kurzen Vergleich: Facebook: Like vs. Share-Button schon meinen Wechsel auf den Like-Button von Facebook angekündigt. Eigentlich stellte sich für mich nur die Frage, ob ich den Button in der XFBML-Variante einbaue oder nicht. Die Entscheidung viel dann doch relativ schnell auf die weitaus flexiblere XFBML-Variante. Schließlich will man den Nutzern die Möglichkeit geben den Inhalt nicht nur zu „Liken“, sondern auch zu kommentieren. Emanuel Kluge hat auf seinem Blog schon einen gutes Tutorial zur Einbindung des Facebook-Like-Buttons in der XFBML-Variante geschrieben. Jedoch sind mir während des Einbaus zwei Kleinigkeiten aufgefallen. Ein Grund für mich das Tutorial um zwei Punkte zu erweitern. Für erfahrene Nutzer von WordPress dürfte die Integration des Buttons keine fünf Minuten dauern, denn viel brauchen wir eigentlich nicht um die Version zum laufen zu bringen.

Must have’s

Zwingend notwendig für den Einbau sind lediglich eure User-ID & Application-ID. Die User-ID bekommt ihr einfach und schnell unter:

graph.facebook.com/euer.name

Eine entsprechende Application-ID für euer Projekt könnt ihr unter:

http://developers.facebook.com/setup/

generieren. Solltet ihr nach der Eingabe eurer Domain die Fehlermeldung  „Invalid Url“ erhalten, braucht ihr nicht zu verzweifeln. Wahrscheinlich habt ihr den Gleichen Fehler gemacht wie ich und eure Domain auf folgende Weise eingegeben: „www.domain.tld“. Die Lösung ist einfach und simpel zugleich und lautet: „www.domain.tld/“. Es ist schon erstaunlich welche Fehler das weglassen eines / so haben kann 😉 Nachdem ihr jetzt hoffentlich beide ID’s zusammen habt, kann es mit dem eigentlichen Einbinden des Like-Buttons losgehen.

Meta Property & JavaScript

In die header.php (innerhalb des <head>-Tags) fügt ihr folgende Codezeilen ein und erstzt die jeweiligen Platzhalter mit euren ID’s, somit weiß Facebook wer der Inhaber des Blogs ist, wem der Blog gehört und um welchen Artikel es sich handelt:

<?php if ( is_single() ) : ?> <meta property=“fb:admins“ content=“eure_user_id“ /> <meta property=“fb:app_id“ content=“eure_app_id“ /> <meta property=“og:site_name“ content=“<?php bloginfo(’name‘); ?>“ /> <meta property=“og:title“ content=“<?php echo get_the_title(); ?>“ /> <meta property=“og:type“ content=“article“ /> <? endif; ?>

In die Datei footer.php (vor dem schließendem <body>-Tag) kommt der zweite Teil des Scripts. Vergesst auch hier nicht den Platzhalter „eure_app_id“ durch die jeweilige ID auszutauschen.

<?php if ( is_single() ) : ?> <div id=“fb-root“></div> <script src=“http://connect.facebook.net/de_DE/all.js“ type=“text/javascript“> </script> <script type=“text/javascript“> window.fbAsyncInit = function() { FB.init({appId: ‚eure_app_id‘, status: true, cookie: true, xfbml: true}); } </script> <?php endif; ?>

Emanuel hat wahrscheinlich vergessen darauf hinzuweisen das der Ursprüngliche Code natürlich die US-Version des Buttons lädt und somit auch die Sprache innerhalb des Facebook-Like-Buttons auf Englisch ist. Eine Änderung auf Deutsch ist kein Problem und wurde in dieser Variante schon vorgenommen. Wer dennoch lieber die Variante auf Englisch haben will, muss einfach in dem Footer-Code die Stelle „de_DE“ durch „en_US“ ersetzen. Theoretisch dürfte eine Sprachanpassung für alle von Facebook unterstützten Länder somit kein Problem sein.

Der Facebook-Like-Button

Das einzige was euch jetzt noch fehlt ist der Facebook-Like-Button an sich. Den Code könnt ihr selbst nach Lust und Laune in der single.php platzieren:

<script src=“http://connect.facebook.net/de_DE/all.js#xfbml=1″></script> <fb:like show_faces=“true“ width=“450″></fb:like>

Sofern ihr keine Fehler gemacht habt und alle Dateien an ihrem richtigem Platz sind, lädt sich der Button je nachdem wo ihr ihn platziert habt.

Noch ein kleiner Tipp am Rande, aufgrund der mäßigen Ladezeit würde ich den Button aus Gründen der Usability nicht über dem Artikel platzieren. Über dem Artikel kann der Like-Button schnell übersehen werden, es macht mehr Sinn in am Ende zu platzieren, so dass der Leser ihn nach dem Lesen sieht und nicht lange überlegt sondern einfach Klickt und sich hoffentlich freut das er den Beitrag nicht nur „Liken“ kann, sondern auch noch ein Kommentar dazu verfassen kann.

Zukunft des Like-Buttons?

Ich gehe jetzt noch stärker als vorher davon aus, dass der Share-Button schneller verschwindet als gedacht. Der Facebook-Like-Button hat eine verschwindent geringe Hemmschwelle und mit der XFBML-Variante hat der Nutzer zudem die Möglichkeit ein Kommentar zu dem Beitrag zu hinterlassen. Somit kommt die Platzierung auf der Timeline dem alten Share-Button sehr nahe.

Ihr seid natürlich herzlichst dazu Eingeladen den Like-Button auf Herz & Nieren zu prüfen und ihn hier direkt auszuprobieren 😉

About whit3h4t

Lars Nutzenberger (Google+) | 1980er | Hamburger | CEO | EX-SEO | Blogger | Nerd | passionierter Linkdieb und OnPage-Nörgler | Gegen den Strom Schwimmer | Studienabbrecher | Googlefreund | Teufelskerl & Freund

Comments

  1. Wo genau sehe ich jetzt eigentlich auf deiner Seite das Ergebnis? Oder hast du den Button wieder ausgebaut und mit der „rechten“ Like Box ersetzt?

  2. whit3h4t says:

    Moin Oliver,

    ja der „Like“-Button fiel der Ladezeit zum Opfer … Jedoch wird der Button wieder eingeführt, sobald ich mit dem neuem Theme fertig ist 🙂

  3. Hallo.

    Funktioniert bei mir nicht.
    Es wird immer nur auf den gesamten Blog verliked. Und nicht auf den einzelnen Post.

    Weisst du vielleicht hilfe?

    Markus

  4. whit3h4t says:

    Hallo Markus,

    versuch es doch mal ohne das Meta-Tag og:url, dann sollte es eigentlich funktionieren.

    Achso und ich würde die raten deine ganzen CSS- & JQuery-codes in externe Dateien zu entlagern…

    Grüße
    Lars

  5. Hi.
    Werd ich versuchen.

    Den Tipp mit dem Auslagern kann ich nicht so einfach ausführen. Ist ein vorgefertigtes Template.
    Bin schon glücklich, wenn ich verstehe, wo ich da die Codeteile einfüge…
    Markus

  6. Markus says:

    HAllo Lars.

    Jetzt hab ichs versucht.
    Auf den Single-Post-Pages ist jetzt ganz oben der FB-Button zu sehen.
    Liked trotzdem immer noch den ganzen Blog…
    Vielleicht muss ich auch noch was anderes rausnehmen…

    Markus

  7. whit3h4t says:

    Moin,

    ich sehe es aber finde den Fehler nicht wirklich auf die schnelle^^

  8. Markus says:

    Hallo nochmal.
    Hab mal kurz auf das Standardthema umgeschaltet gehabt.
    Mein Thema verwendet nämlich eigenen Strukturen. Footer.php und Single.php werden nicht verwendet…
    Hab alles eingebaut, wie du es beschrieben hast.
    Und immer noch liked es nur den ganzen Blog…

    Na gut. Funktioniert halt nicht.

    Markus

  9. whit3h4t says:

    Moin Markus,

    was wie wo? Funktioniert doch alles wie es soll. Ich gehe mal stark davon aus, dass du es zwischenzeitlich hinbekommen hast? Bei mir liked FB jedenfalls den Artikel…

  10. Hey,

    erstmal danke für die Anleitung, von der Funktionalität her ist alles top.

    Allerdings gibts eine eig. winzige optische Angelegenheit, welche mich nun schon seit 3 Stunden beschäftigt und für solch eine winzige Angelegenheit doch verdammt nervt.

    Ich hab gerade noch einen Tweet- und Google+1-Button hinzugefügt, am ende der single.php, eben genau da, wo der FB-Button auch ist. Tweet- und Google-Button schaffen es auch problemlos miteinander zu harmonieren, einzig und allein der FB-Button hat anscheinend eine Extrawurst nötig und meint sich selbst versetzt darzustellen (zu weit links, zu weit unten).

    Nachdem ich nun gesucht hab, probiert hab (Problem: Ich bin zwar nicht zu blöd etwas mit einer Anleitung zu verändern, bin aber sehr wohl zu blöd dafür, selbst zu erkennen wo evtl. Fehler sind) und absolut nichts geholfen hat, hab ich durch zufall bemerkt, dass hier alle 3 Knöppe auf einer Höhe sind …

    Da gibts eig. nur noch eine Frage die sich mir stellt: Wie? 🙁

    Gruß
    Sascha

  11. whit3h4t says:

    Moin Sascha,

    ein Blick in dein Blog sagt mir das du die drei Button alle in eine Box legst und diese via text-align rechtsbündig setzt. Meiner Meinung nach eher suboptimal. Ich würde jeden Button in einen eigenen Container packen und diesen via float:right nach rechts setzen und mit margin die Abstände der einzelnen Container zueinander festlegen…

    Ansonsten einfach mal Rechtsklick und meinen Seitenquelltext anschauen 😉

    Grüße
    Lars

  12. Hey,

    danke für die schnelle Antwort. Auf die Idee mit dem Quelltext hätte ich auch selbst kommen können, mein Kopf und die Wand haben sich dafür schon getroffen.

    Das ganze sieht so schon mal wesentlich besser aus. Zuerst war ich noch ein bisschen verwirrt, warum nun dieser Standardtext „Dieser Eintrag wurde am …“ viel zu hoch angezeigt wurde und quasi direkt neben den Buttons stand … 3 simple Zeilenumbrüche haben dann aber auch das beseitigt …

    Also, danke nochmal für die schnelle Hilfe 🙂

    Gruß
    Sascha

  13. whit3h4t says:

    Moin Sascha,

    öhm ich hätte einen Tipp was die breaks angeht^^ Geb in deinem style.css dem Container unter den Buttons (.widecolumn .postmetadata) einfach die Anweisung clear:right; und schon wird der Platz der drei Buttons beachtet und der Abstand richtig dargestellt.

    Ist auf jeden Fall konformer als br und wohl auch für die ganzen Browser besser geeignet 😉

  14. Und nochmal danke 🙂

    Ich hab mich noch nie ernsthaft mit css beschäftigt … Sieht definitiv noch ein bisschen besser aus ^^

Trackbacks

  1. […] zu einem der Top Post hier auf Promete. Vor einiger Zeit bin ich dann auf den Artikel von Lars Facebook XFBML Like-Button für WordPress gestoßen. Darin beschreibt Lars einen unschlagbaren Vorteil wenn man die XFBML verwendet. Dank […]

  2. […] scheint sich langsam aber sicher von dem Share-Button abzuwenden und legt einem nun vehement den Like-Button ans Herz. Was ich davon nun halten soll weiß ich auch nicht so recht, schließlich war ich bislang […]

  3. […] für eben diesen interessieren und ihn gerne einbinden möchten, schauen sich einfach folgendes Tutorial für das Einbinden des Like-Buttons […]

  4. […] war überhaupt nicht schwer die Like Box mittels XFBML einzubauen, dank der Anleitung die ich auf whit3h4t.de gefunden habe, die zwar für den Like Button geschrieben wurde, aber auch den Einbau aller anderen […]

Speak Your Mind

*

Kommentare werden moderiert. Es kann etwas dauern, bis dein Kommentar angezeigt wird.