Permalink

22

„Gefällt mir“ Button in WordPress

Facebook hat vor Kurzem offiziell die neue Open Graph API freigegeben und über diese ist es auch möglich die „Gefällt mir“ oder „I like“ Buttons, die innerhalb von Facebook überall zu finden sind, auch auf externen Seiten, beispielsweise auf dem eigenen WordPress-Blog zu verwenden.

Durch die riesige Nutzerzahl bei Facebook erreicht man somit zwei Vorteile: Einerseits macht man seine eigenen Artikel bei Facebook bekannt, wenn Besucher die Artikel in ihrem Newsfeed an Abonennten weiterleiten, andererseits bekommt man somit neue Besucher von Facebook.

Die Integration in WordPress ist wieder mal denkbar einfach – hier sollen zwei Möglichkeiten vorgestellt werden.

Option 1: Theme-Anpassung

Die von mir bevorzugte Methode ist die Theme-Anpassung. Man benötigt zwar ein wenig PHP- und HTML-Kenntnisse, aber am Ende spart man sich zusätzliche Einträge in der Datenbank und ist auch auf der sicheren Seite, wenn mal ein WordPress Core-Update ansteht. Themes bzw. Theme-Anpassungen sind in der Regel Update-kompatibel.

Facebook stellt ein iframe-Snipplet zur Verfügung, welches einfach innerhalb des post-Loops in der single.php integriert werden kann:

<iframe src="http://www.facebook.com/plugins/like.php?href=
<?php the_permalink() ?>&layout=standard&show_faces=true&width=450
&action=like&colorscheme=light" scrolling="no" frameborder="0"
allowTransparency="true" style="border:none; overflow:hidden;
width:530px; height:60px"></iframe>

Die Like-Funktion von Facebook nimmt eine gewisse Breite in Anspruch, da auch weitere Informationen von Facebook angezeigt werden können (s.u.). Daher sollte man – je nach Theme – die ganze Breite des Beitrags einplanen.

Der Parameter „layout“ kann zwei Zustände annehmen: standard und button_count – letzteres gibt nur die Anzahl der „Likes“ im US-Format aus. Die erste Variante gibt den Satz „1,234 Personen gefällt das.“ aus.

Mit der „show_faces“ Einstellung „true“ werden die Profilbilder der Facebook-Nutzer angezeigt. „false“ gibt in diesem Fall keine Profilbilder aus.

Durch „width“ kann die Ausgabebreite beeinflusst werden – die Angabe ist in Pixel. 450 Pixel ist nach meinen Tests aber mindestens erforderlich. Das hängt ein wenig von der Länge des Facebook Nutzernamens ab – hier sollte man also eher mehr als weniger Pixel angeben.

Der Schalter „action“ und die Einstellung „like“ ist nur kosmetischer Natur: „like“ gibt das Wort „Like“ aus und „recommend“ das Wort „Recommend“ – übersetzt auf deutsch also „Gefällt mir“ und „Empfehle ich“.

Facebook stellt auch zwei Farbschemata über „colorscheme“ zur Verfügung: „light“ ist das bekannte Facebook-blau und „dark“ ein dunkles grau als Hitergrundfarbe für den Button.

Oben nicht angegeben ist noch die Möglichkeit, die Schriftart der Testausgaben zu beeinflussen. Dafür wird der Parameter „font“ verwendet. Folgende Schriftarten stehen zur Verfügung:

  • arial (arial)
  • lucida grande (lucida%20grande)
  • segoe ui (segoe%20ui)
  • tahoma (tahoma)
  • trebuchet ms (trebuchet%20ms)
  • verdana (verdana)

Man reiht also den Paramter „font“ mit ein und gibt dann die in Klammern angegebene Schriftart an (…&font=trebuchet%20ms&…). Übrigens sollten die kaufmännischen und-Symbole HTML-kodiert angegeben werden, wenn W3C-valider Code eingehalten werden soll (& -> &amp;).

Die restlichen Angaben steuern den iframe selbst. Auch hier finden sich nochmal Größenangaben unter „width“ und „height“, die bei der Integration angepasst werden können.

Mit diesem Facebook-Like-Button-Code-Generator kann man die obigen Einstellungen übrigens ganz komfortabel durchführen.

Option 2: Ein Plugin verwenden

Wer keine Lust auf HTML und PHP hat, der kann natürlich eines der vielen Plugins aus der reichhaltigen WordPress-Plugin-Datenbank verwenden.

Ich möchte hier drei Facebook-Like-Button Plugins vorstellen, die sich ohne Probleme installieren ließen:

  • Like – dieses Plugin ist mehrsprachig aufgebaut und verfügt über viele Optionen im Bereich „Einstellungen“. Man kann die Button-Ausgabe vor oder nach dem Beitragstext erfolgen lassen oder auch an anderen Stellen im Blog.
  • Facebook Like Button – vom Aufbau her sehr ähnlich wie das vorhergehende Plugin „Like“, aber mit einer etwas übersichtlicheren Einstellungsmaske.
  • Facebook Social Plugins – dieses Plugin ist etwas umfangreicher, da es neben dem „Like“ Button auch verschiedene Widgets bereitstellt: Man kann seine eigene Facebook Aktivität in der Sidebar auflisten oder eben auch den persönlichen Geschmack durch eine Auflistung der Facebook-Einträge die einem selbst gefallen (Like) oder die man empfiehlt (Recommend).

Wer noch weitere Optionen vorstellen möchte, wie man einen Facebook Like Button in WordPress integriert, kann das gerne in Form eines Kommentars mitteilen.

Autor: Thomas

Thomas beschäftigt sich schon seit vielen Jahren mit der Blog-Software WordPress. Dabei konnte er ein umfassendes Wissen aufbauen und kennt sich sowohl mit dem Backend als auch mit dem Frontend und den vielen Erweiterungsmöglichkeiten aus.

22 Kommentare

  1. Pingback: Tweets die “Gefällt mir” Button in Wordpress - Beitrag - Wordpress Magazin erwähnt -- Topsy.com

  2. gefällt mir :) doch ich warte mal ab, wie sich das ganze so entwickelt und wer wieviele klicks darauf wirklich bekommt …
    ich bin mir im Moment noch nicht sicher ob dieser Facebook-hype wirklich gut ist oder nur eine aus langer Weile heraus entstandenen üblen Laune der Natur, denn mit mehr klicks als bei Tante G., da frag ich mich schon ob wir ein zu großes Mitteilungsbedürfnis haben oder eben ein Defizit ?

    Grüße V. – der wo sich mal mitteilen wollte :)

  3. Hallo vielen Dank für den Artikel,
    doch solange die Ladezeiten von Facebook und allem durch die ganzen Spiele so lahmgelegt wird baue ich nichts mehr ein ausser einen statischen Button von mir.

    Ladezeiten schlagen sich auch auf Google™ aus und das habe ich immer wieder gemerkt nachdem ich etwas von Facebook eingebunden hatte. Auch wenn es in einem IFrameläuft. Leider. Sollen sie sich wieder mehr um uns kümmern und alles andere Outsourcen dann schaun wir mal weiter.

  4. Mal völlig unabhängig von Sinn oder Unsinn der Notwendigkeit Facebook zu nutzen – Die übergreifende Integration macht schon Sinn, wen jemand bei Facebook aktiv ist. Und es lässt sich nicht weg diskutieren: Das sind eben sehr viele User.
    Dass es die Möglichkeit gibt, dies über bequem zu handelnde Plugins zu realisieren, ist eine tolle Sache. Nicht jeder möchte im Quelltext seiner WordPress Installation rumgurken (mich eingeschlossen). Wenn es irgendwie geht, benutze ich Plugins. Der Vorteil liegt auf der Hand. Leicht zu integrieren – Konfiguration quasi auf Click – Deinstallation ebenfalls einfach.
    Daher mein Dank an die Plugin-Entwickler für ihre Arbeit.

  5. hallo, die apps sind echt sehr einfach. aber jedesmal wenn ich es einfüge hab ich unter dem like button jede menge freien platz und ich bekomm in nicht weg. also meine posts werden zu weit nach unten geschoben!

    hat jemand eine vermutung?

  6. @swazy
    Die Facebook Applikation benötigt mindestens 40 Pixel Höhe, damit auch die Profilbilder der Nutzer angezeigt werden können. Du könntest mal versuchen den „show_faces“ Schalter auf false zu stellen und dann mit den Pixel-Angaben zu arbeiten – bin nicht sicher, ob das was bringt.

    Alternativ zum „Like-Button“ kannst du auch einen „Share-Button“ verwenden – dieser fragt allerdings nicht die API ab und gibt Infos von Facebook zurück (Likes-Anzahl, Nutzer-Profile), sondern dient lediglich der Veröffentlichung/ Sharing eines Artikels auf Facebook:
    http://www.facebook.com/facebook-widgets/share.php

  7. Pingback: Wochenrücklink 19/10 – Gefällt mir, Aschewolken, Minikanone und das Ende des Internet « Internet, Zukunftsprognosen, Wegen, Weltnetzes plädiere, Deutschland, komplettes Abschalten, Drucker, 9-Nadel « die konsumki

  8. Ich finde die Sache mit den i like Buttons an sich sympathisch. Ein richtig tolles Plugin für die i like Funktion ohne Facebook habe ich jedoch noch nicht gefunden. Ich fände es super wenn die wordpress.com i Like Funktion auch als Plugin zur Verfügung gestellt werden würde.

  9. Diese Social-Networks – total überbewertet. Allenfalls was für pubertierende Erwachsene und solche, die es nie mehr werden wollen. Für gestandene Blogger unnützer Tand.

  10. Pingback: Facebook Social Plugins müssen in Datenschutzhinweisen erläutert werden | Buttons, Datenschutz, Facebook, Recht, Social | Dr. Web Magazin

  11. Ich nutze neuerdings zusätzlich zum mittlerweile fast schon traditionellen Gefällt mir-Button den von yiid. Der hat nämlich den markanten Vorteil, dass man zur Abwechslung etwas auch mal NICHT mögen kann…! ;-)

    Finds wichtig, da auch mal Unterschiede zu machen!

  12. Ist es erlaubt, den Like-Button in Druckmedien zu verfremden oder verstößt dies gegen die Nutzungsrechte dieses „Bildes“, die sicherlich bei facebook liegen.
    In wiefern ist dieses Nutzungsrecht durch Verfremdung umgehbar.

    Vielen herzlichen Dank für eine Rückmeldung bzw. einen Kontakt an den wir uns wenden können.

    Liebe Grüße!

  13. Naja, es geht eigentlich nicht um Nutzungsrechte sondern eher um Urheberrechte. Und durch Verfremdung kann man kein „geistiges“ Eigentum eines anderen zu seinem Eigentum machen – es sei denn, du hast mit ihm eine Lizenzvereinbarung…

    Best Wishes – Sven

  14. @Dr. Satori: das finde ich überhaupt nicht. Die Social-Networks, insbesondere facebook können sehr gut eingesetzt werden um Informationen viral zu verbreiten. Ein Teilelement davon ist auch der „Gefällt mir“ Button.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.