Wie man den Facebook Like Button in WordPress integriert

Letzte Woche beglückte Facebook die Netz–Community mit etli­chen neuen Features: die der­zeit popu­lärste Social Media Plattform will zukünf­tig nicht bloß über Personen, son­dern auch über Themen Bescheid wis­sen. Früher hätte man ein­fach das Web gecraw­led, aber in Echtzeit-Zeiten sind sol­che old school Methoden weder not­wen­dig noch adäquat, wenn man genauso gut den Usern die Arbeit über­las­sen kann. Facebook bedient sich dazu neuer “Social Plugins”: mit deren Hilfe inte­grie­ren Webmaster via Copy-Paste die Like-Funktion ins eigene Blog. Das macht Marketing-technisch durch­aus Sinn, des­we­gen ver­brei­tet sich der Button auch rasend schnell.

Wer ihn eben­falls ins eigene Blog ein­bauen will, fin­det in die­sem Beitrag ein paar Tipps. Dank der flot­ten Open Source Community kön­nen WordPress Blogger bereits auf meh­rere Plugins zurück­grei­fen, ein paar davon hab ich mir näher angesehen.

Was genau tut der Facebook Like-Button?

Die neue Like-Funktion unter­schei­det sich deut­lich von den bekann­ten “Share this pos­ting on Facebook / Twitter etc.” Buttons. Während letz­tere dazu die­nen, die aktu­elle URL an diverse Social Media Services zu über­ge­ben, bin­det der Like-Button Facebook-Inhalte dyna­misch in die eigene Page ein. Da alle Inhalte des Widgets von Facebook-Servern kom­men, ist sei­tens des User kei­ner­lei Authentifizierung nötig: Besucher, die im glei­chen Browser in Facebook ein­ge­loggt sind, sehen auf einen Blick, wel­che Friends den aktu­el­len Beitrag bereits geli­ked haben. Wenn ein Blogleser nicht in Facebook ein­ge­loggt ist und auf den Like-Button klickt, wird ein Pop-Up Fenster mit dem Facebook Login-Formular geöffnet:

Das ist kein gerin­ger Mehrwert für Seitenbetreiber — denn genau wie bei den Facebook-Ad “Social Actions” stei­gen Aufmerksamkeit und Interesse. Zweitens resul­tiert jeder Click auf den “Like-Button” wie­derum in einem Wall-Posting bei Facebook, zieht also im Idealfall zusätz­li­che Besucher an. Und Facebook geht selbst­ver­ständ­lich nicht leer aus: tau­sende Blogs inte­grier­ten in den letz­ten Tagen die­ses Feature und hel­fen dem Betreiber, hoch­qua­li­ta­tive Daten für eine zukünf­tige Websuche (Facebook sieht sich ja schon lange als Google-Konkurrent). Ob der Plan auf­ge­hen wird, muss die Zukunft zei­gen — das Generieren der Daten ist eine Sache, die sinn­volle Strukturierung eine andere. Ich konnte mich dem all­ge­mei­nen Hype natür­lich nicht ent­zie­hen und habe den Like-Button auf daten­schmutz ges­tern eingebaut:

Wie baut man den Like-Button ein

Wer sich das manu­elle Editieren des eige­nen Templates spa­ren möchte, kann mitt­ler­weile auf diverse Plugins zurück­grei­fen — Bastler kon­fi­gu­rie­ren und holen sich den Code ein­fach von der Facebook Social Plugins Page. Die fer­ti­gen Lösungen bie­ten im Wesentlichen alle den glei­chen Funktionsumfang, ich habe mir einige davon näher angesehen:

Facebook Like Button Plugin

Nach Upload und Aktivierung nimmt man alle Einstellungen übers Backend vor. ACHTUNG: Die Options-Seite fin­det man nicht wie gewohnt im Menü Settings/Einstellungen, son­dern unter “Plugins”. Die Einstellungen sind selbst­er­klä­rend: neben der Auswahl, ob der Like-Button nur auf Einzel-Beitragsseiten oder auch auf der Startseite respek­tive aus sta­ti­schen Pages ange­zeigt wer­den soll, wählt eines von zwei Farbschemata, die Breite, die Höhe und das Wording (ent­we­der “like” oder “recom­mend”), die Schriftart sowie die Position (vor oder nach dem Beitrag) und optio­nal eige­nen CSS-Code für den Container.

In der sim­pels­ten Form (Like-Button und Counter) begnügt sich das Plugin mit 30 Pixel, sol­len die Avatare mit ange­zeigt wer­den, sind 60 Pixel ein­zu­pla­nen. Es emp­fiehlt sich also, ent­we­der die gesamte Breite der Content-Spalte als “Width” ein­zu­tra­gen, oder via CSS das Element floa­ten zu las­sen — so hab ich’s hier am Blog gemacht.
Facebook Like Button Plugin

FaceBook Like Button Plugin for WordPress

Diese Plugin bie­tet exakt den glei­chen Funktionsumfang, aller­dings wird hier anstatt des CSS-Codes ein Klassennamen für den Container ein­ge­tra­gen; die ent­spre­chende Formatierung ist dann im Stylesheet vor­zu­neh­men. (Nur ein klei­ner kos­me­ti­scher Unterschied, aber wer maxi­mal sau­be­ren Code bevor­zugt, greift zu die­ser Lösung.)
FaceBook Like Button Plugin for WordPress

WordPress Facebook Like Plugin

Das glei­che in grün — da Facebook die mög­li­chen Optionen vor­gibt, bie­tet die­ses Plugin genau die glei­chen Einstellmöglichkeiten wie der oben beschrie­be­nen “Zwillingsbruder” — mit zwei Ausnahme: die Einstellmöglichkeiten maxi­male Höhe und eige­nen CSS-Code feh­len, sodass das Like-Element ins­ge­samt mehr Platz ein­nimmt als erfor­der­lich.
wordpress-facebook-like

WP Facebook Like

Ein Tipp für Bastler, denn die­ses Plugin bie­tet weni­ger Optionen, stellte dafür jedoch einen CMS– und einen php-Tag fürs Template bereit: mit­tels [wpf­blike] im Editor bzw. der php-Funktion wpf­blike() lässt sich das Element an jeder belie­bi­gen Stelle auf­ru­fen.
WP Facebook Like

Beispiel-CSS-Code für Floating Like-Box

Der Beispiel-CSS-Code, den ich hier auf daten­schmutz ver­wen­det habe, steht wei­ter unten zum Kopieren bereit. Je nach ver­wen­de­tem Plugin muss die Style-Class ent­we­der ins Template-Stylesheet ein­ge­tra­gen wer­den oder in die Optionspage (siehe oben). Die run­den Ecken sind ein CSS 3 Feature — nicht alle Browser unter­stüt­zen die­ses Eyecandy, IE-User bekom­men die klas­si­schen Ecken zu sehen. Margins, Paddings und andere Parameter müs­sen natür­lich an die jewei­li­gen Design-Erfordernisse ange­passt werden:

{code type=CSS}
.face­box {
float:right;
margin-top:3px;
margin-left:9px;
border:1px solid #d2d2d2;
background-color:#e8e8e8;
padding-left:3px;
padding-right:3px;
padding-bottom:0px;
padding-top:3px;
–webkit-border-radius:3px;
–khtml-border-radius:3px;
–moz-border-radius:3px;
border-radius:3px;
}
{/code}

Wie geht’s wei­ter mit den Facebook Social Plugins?

Wie erwähnt sind die Konfigurationsmöglichkeiten der­zeit noch beschei­den. Ich ver­mute mal, dass Facebook in punkto Design aus CI-Gründen recht restrik­tiv blei­ben wird, neue Funktionen respek­tive Social Plugins dürf­ten aber nicht lange auf sich war­ten las­sen. Bereits mit der der­zeit ver­füg­ba­ren Palette las­sen sich die wich­tigs­ten Social Media Funktionen mit Hilfe des gro­ßen Bruders Facebook im Nu inte­grie­ren. Allerdings gilt auch hier: wer voll und ganz auf 3rd Party Anbieter setzt, kann eines Tages ganz schön im Regen ste­hen! Wer sein Blog “sozia­ler” machen will, dem emp­fehl ich einen Blick auf Mingle zu wer­den. WordPress 3.0 wird sowieso Social Network Features an Bord haben. Zweifellos hat Facebook einen immen­sen Skalierungsvorteil auf sei­ner Seite, aber der Optimist in mir hofft trotz­dem nach wie vor auf die glor­rei­che Zukunft des dis­tri­bu­ted Social Networking. Was den­ken Sie, wie’s wei­ter­ge­hen wird?