WordPress Magazin

“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 (& -> &).

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.

Thomas Langel
... war mit 11 Jahren stolzer Besitzer seines ersten Personal Computers und mit nun über 30 Jahren ist er immer noch von diesem Virus befallen. Das anfängliche Hobby hat er mittlerweile zu seinem Beruf gemacht. Er arbeitet in einem Dienstleistungsunternehmen, das sich auf die Erstellung und Vermarktung von Online-Shops spezialisiert hat als Online Marketing Manager.

Stichworte: Facebook, like, Theme
Veröffentlicht in Plugin, Themes