Facebook-Like-Button per XFBML in WordPress-Blogs einfügen

Der Like-Button von Facebook zum Einbinden auf externen Websites ist ja nach wie vor in aller Munde und da ich gerade auf einem anderen WordPress-Blog einen solchen Button per XFBML eingebunden habe, möchte ich hier kurz vorstellen, wie das geht.

Als erstes braucht ihr eure User-ID und eine Application-ID für die Seite, auf der ihr den Like-Button einbauen möchtet. Die User-ID bekommt ihr, indem ihr folgendes in die Adress-Zeile eures Browsers eingebt:

graph.facebook.com/euer.name

Vereinfacht gesagt: Geht auf euer Facebook-Profil und ersetzt das www in der Adresse durch "graph". Auf der dann erscheinenden Seite, findet ihr eure User-ID.

Die Application-ID wiederum könnt ihr generieren, indem ihr auf folgender Seite euren Blog eintragt:

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

Nun sind die Grundvoraussetzungen erfüllt, der Like-Button kann eingebunden werden. Im folgenden Beispiel zeige ich, wie man das in der Einzelansicht eines Artikels macht. Dafür müssen wir im Kopf- und Fußbereich, sowie unterhalb des Artikels etwas Code eingeben.

Fangen wir mit dem Kopfbereich an:

HTML/PHP
<?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; ?>

Diese fünf speziellen Facebook-Meta-Angaben müssen in der header.php innerhalb der head-Tags gesetzt werden. Sie verraten Facebook wem der Blog gehört, um welchen Blog es sich handelt, wie er heißt, welchen Titel die aktuelle Seite hat und um welchen Inhaltstyp es sich handelt. Natürlich müsst ihr eure_user_id und eure_app_id durch die entsprechende ID ersetzen.

Als nächstes binden wir den nötigen JavaScript-Kram im Fußbereich ein:

HTML/JavaScript
<?php if ( is_single() ) : ?>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/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; ?>

Das wird in die footer.php direkt über dem abschließenden body-Tag eingefügt. eure_app_id ist auch hier entpsrechend zu ersetzen.

Nun muss der Button selbst noch auf der Artikelseite eingebunden werden:

HTML
<fb:like href="<?php the_permalink() ?>" layout="standard" show_faces="false" width="xyz" action="like" colorscheme="light" font="trebuchet ms"></fb:like>

Dies tragt ihr in der single.php da ein, wo der Button hin soll. Die Attribute könnt ihr in gewissem Maße euren Präferenzen anpassen. Hier erfahrt ihr, was möglich ist.

Hat man das alles eingetragen, werden auf der Einzelansicht eines Artikels die nötigen Meta-Angaben angezeigt, das entsprechende JavaScript für den Like-Button wird eingebunden und der Like-Button selbst erscheint ober- oder unterhalb des Artikels - je nachdem, wo ihr ihn eingefügt habt.

Sollte euch das alles zu tricky sein, könnt ihr entweder die iframe-Variante einbinden oder auf das WordPress-PlugIn von Bottomless zurückgreifen: Like.

Noch ein paar Worte zur Performance. Das Einbinden des Like-Button verlängert natürlich die Ladezeit eures Blogs. Allerdings sprechen wir hier von WordPress - hier ist es normal, dass auf jeder Seite drei zusätzliche JavaScript-Dateien und zwei zusätzliche Stylesheets eingebunden werden, weil irgendwo im Blog mal eine Lightbox aufgehen soll. Will heißen: Denkt darüber nach, ob ihr den Button einbauen wollt, aber bedenkt, dass euer System sowieso nicht Performance-optimiert ist.

Es sei denn, ihr seid bezüglich dieses Themas sensibilisiert und habt entsprechende Schritte unternommen, eurem Blog auf die Sprünge zu helfen.

Ansonsten wie immer: Bei Fragen schreibt einen Kommentar. Bei Gefallen bookmarkt den Artikel. Danke!

  • Twitter
  • Facebook
  • del.icio.us
  • MisterWong.DE
  • Yigg
  • MySpace
  • StumbleUpon
  • Webnews.de
  • LinkArena
  • Technorati
  • Digg

Geschrieben am 7. Mai 2010 • Abgelegt unter HTML/CSS, JavaScript, WordPress • Rivva

13 Kommentare zu "Facebook-Like-Button per XFBML in WordPress-Blogs einfügen"

  2. Inga

    – 13.5.2010

    Hallo Emanuel,

    ich würde den Like Button gerne so einbinden, dass er nicht nur auf der Einzelartikelansicht (= erst sobald man den Artikel angeklickt hat) erscheint, sondern auch auf der Startseite. Ist dies auch möglich?

    Ansonsten ist der Beitrag top. ;)

    Danke & Viele Grüße,
    Inga

  3. Emanuel

    – 13.5.2010

    hallo inga,

    möchtest du auf der startseite bei jedem artikel einen button oder nur einen allgemeinen für die ganze seite?

    letzteres ist problemlos zu bewerkstelligen. ersteres müsste ich ausprobieren, aber ich vermute fast, dass es nicht so ohne weiteres möglich ist.

  4. Inga

    – 13.5.2010

    Hallo Emanuel,

    oh... das ging ja schnell mit der Antwort. ;) Ich meinte das Erste, für jeden Artikel einen Button. Aber ist sonst auch nicht schlimm. Ist ja so wie es ist (Artikelseite) auch ok, die andere Variante wäre nur noch schicker.;) Aber danke trotzdem.

    Viele Grüße,
    Inga

  5. Roger

    – 20.5.2010

    Guter Beitrag vielen Dank. Weisst du ob es auch möglich ist auf die Daten wieder zuzugreifen? Sprich z.B. eine Sortierung der Artikel nach "Likes" zu machen?

  6. danilo

    – 11.6.2010

    hi emanuel,

    ich verwende ein wordpress theme und habe den css code verändert. alles gut soweit. kann ich irgendwie den 'like' button von facebook einbauen. komme mit deinem tutorial nicht weiter. würde mich über antwort freuen. gruß danilo

  7. Emanuel

    – 11.6.2010

    moin danilo,
    alles, was ich an hilfestellung aus der ferne geben kann, steht in dem artikel. wenn dieser dir nicht weiterhilft, empfehle ich einfach das linke-plugin zu installieren. das tut den gleichen dienst mit weniger aufwand und ohne große schrauberei am theme.

  8. Inga Dragic Oltersdorf

    – 15.6.2010

    Hallo Emanuel,

    deine Hilfestellungen können nur angewendet werden, wenn ich den css customer upgrade erwerbe oder? Den Like Button kann ich sonst nicht anders anwenden? Habe nämlich bisher immer vermieden diesen upgrade zu erwerben

  9. Emanuel

    – 15.6.2010

    leider wird das css customer upgrade nicht reichen, da du für das einbinden des like-buttons die template-dateien bearbeiten musst.

    die einzige möglichkeit, die ich sehe, wäre, dem wordpress.com-support zu schreiben und druck zu machen, dass sie den like-button als plugin bereitstellen bzw. über die blog-einstellungen einbindbar machen.

  10. Jan

    – 29.6.2010

    Hi Emanuel,

    wenn man die Zeile:

    durch:

    ersetzt, so bekommt man den Button auch in deutscher Sprache ;)

    Grüße Jan

  11. Jan

    – 29.6.2010

    OK, ich konnte eben keinen Code hierher kopieren: Gemeint war, im Java-Script Code die Zeile in der .../us_US/... vorkommt einfach mit:

    .../de_DE/... austauschen und schon ist der Button in deutscher Sprache vorhanden ;)

  12. Mac Forum

    – 5.9.2010

    Ich kriege z.Z. nur eine Fehlermeldung von "http://developers.facebook.com/setup/". Als erstes wird nach dem Namen und der URL der Webseite gefragt, danach Captcha und dann der Fehler. Habt ihr das selbe Problem?

  13. Emanuel

    – 5.9.2010

    ja, da scheint facebook wohl momentan ein paar probleme zu haben...

Schreib einen Kommentar