Facebook „Gefällt mir“-Button für WordPress

Wer mich auf Twitter verfolgt weiß es schon, alle anderen Leser erfahren es nun hier. Facebook hat auf ihren Fan-Seiten und Fan-Boxen eine Änderung durchgeführt, und zwar, dass es nun nicht mehr heißt „Fan werden“ sondern „Gefällt mir“. Über Sinn und Nutzen möchte ich an dieser Stelle nicht weiter senieren, sondern viel mehr zeigen, wie ihr auch eine neue Funktion im Rahmen dieser Änderungen nutzen könnt. Ähnlich dem Facebook-Share-Button könnt ihr nun einen „Gefällt mir“-Button in euren WordPress-Blog einbauen. Im folgenden Abschnitt könnt ihr lesen wie das geht.

Als erstes geht ihr in euer Backend (Administratiosbereich), navigiert zu Design (Appearance), dann auf den Editor (Sofern ihr die Rechte auf euren Templates so gesetzt habt, sie im Browser ändern zu können. Andernfalls eben via FTP arbeiten.) und wählt Einzelner Artikel (Single Post; single.php). Danach sucht ihr im Code nach the_content() und fügt den nachfolgenden Code entweder darüber oder auch darunter ein. Weitere Formatierungen könnt ihr natürlich auch vornehmen (zB. Box drumherum, Hintergrund, Abstände etc.).

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>

Leider lässt es sich im WordPress derzeit nur vernünftig via iframe lösen (natürlich auch anders, jedoch komplizierter). Grundsätzlich können im Code jedoch auch Änderungen vorgenommen werden. Wie beispielsweise die Breite (width:450px), die Höhe (height:60px) – die ohne einen „Gefällt mir“-Nutzer natürlich recht massiv ist.

Dann mal viel Spaß mit dem neuen „Gefällt mir“-Button in eurem WordPress-Blog. Bei Fragen einfach hier in den Kommentaren oder per Twitter bei mir melden. Ach übrigens, der Code basiert auf den Vorgaben von Facebook.

Nachtrag und weitere Informationen:

Natürlich geht’s auch anders, gibt’s doch auch noch Möglichkeiten ohne Benutzerbild, ohne Text und sogar noch als einfachen Button. Ebenfalls ist es auch ohne iframe in Form von XFBML möglich. Zu all diesen Möglichkeiten bietet Facebook einen Generator an: Like-Button-Generator auf Facebook

Ihr müsst jedoch noch folgendes wissen: Um diesen Button in WordPress einzubinden, muss im Like-Link die jeweilige Adresse des Artikels (Blogpost) eingefügt werden. Dies funktioniert via

<?php echo urlencode(get_permalink($post->ID)); ?>

Wie geht’s also?

Facebook gibt euch beispielsweise folgenden Code (als iframe mit Profilbild) aus:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

In diesem Code sucht ihr nach der Facebook-Vorgabe

http%3A%2F%2Fdevelopers.facebook.com%2F

diese ersetzt ihr mit

<?php echo urlencode(get_permalink($post->ID)); ?>

Schon funktioniert es auch in WordPress. (Tipp: bei diesem Standard-Beispiel lässt Facebook die Angabe der Höhe weg, tragt diese von Hand ein. Ohne Profilbild sind es mind. 25 Pixel, mit Profilbild 60 Pixel.)

UPDATE (25.04.2010): Es ist nicht mehr möglich einen „Gefällt mir“-Button ohne meta-Tag für fb:admins zu betreiben. Mehr dazu sowie eine Anleitung gibt’s hier: Nachtrag: Facebook “Gefällt mir”-Button

UPDATE #2 (14.06.2010): Den ‚Gefällt mir‘-Button mittels XFBML-Tag und asynchroner Lademethode ohne PlugIn in WordPress integrieren. Hier geht’s zur Anleitung.