, , , ,

Wie man den Facebook Like Button in WordPress integriert [outdated]

Facebook Like Button

Achtung – veraltete Version von 2010.

Die aktualisierte 2015er-Version dieses Postings mit dem Titel „Wie man Shocal Media Share Buttons in WordPress integriert“ finden Sie hier:

http://blog.datenschmutz.net/2015-03/wie-man-social-media-share-buttons-in-wordpress-integriert/

Letzte Woche beglückte Facebook die Netz-Community mit etlichen neuen Features: die derzeit populärste Social Media Plattform will zukünftig nicht bloß über Personen, sondern auch über Themen Bescheid wissen. Früher hätte man einfach das Web gecrawled, aber in Echtzeit-Zeiten sind solche old school Methoden weder notwendig noch adäquat, wenn man genauso gut den Usern die Arbeit überlassen kann. Facebook bedient sich dazu neuer „Social Plugins“: mit deren Hilfe integrieren Webmaster via Copy-Paste die Like-Funktion ins eigene Blog. Das macht Marketing-technisch durchaus Sinn, deswegen verbreitet sich der Button auch rasend schnell.

Facebook Like Button

Wer ihn ebenfalls ins eigene Blog einbauen will, findet in diesem Beitrag ein paar Tipps. Dank der flotten Open Source Community können WordPress Blogger bereits auf mehrere Plugins zurückgreifen, ein paar davon hab ich mir näher angesehen.

Was genau tut der Facebook Like-Button?

Die neue Like-Funktion unterscheidet sich deutlich von den bekannten „Share this posting on Facebook / Twitter etc.“ Buttons. Während letztere dazu dienen, die aktuelle URL an diverse Social Media Services zu übergeben, bindet der Like-Button Facebook-Inhalte dynamisch in die eigene Page ein. Da alle Inhalte des Widgets von Facebook-Servern kommen, ist seitens des User keinerlei Authentifizierung nötig: Besucher, die im gleichen Browser in Facebook eingeloggt sind, sehen auf einen Blick, welche Friends den aktuellen Beitrag bereits geliked haben. Wenn ein Blogleser nicht in Facebook eingeloggt ist und auf den Like-Button klickt, wird ein Pop-Up Fenster mit dem Facebook Login-Formular geöffnet:

Facebook Like Button Pop-Up

Das ist kein geringer Mehrwert für Seitenbetreiber – denn genau wie bei den Facebook-Ad „Social Actions“ steigen Aufmerksamkeit und Interesse. Zweitens resultiert jeder Click auf den „Like-Button“ wiederum in einem Wall-Posting bei Facebook, zieht also im Idealfall zusätzliche Besucher an. Und Facebook geht selbstverständlich nicht leer aus: tausende Blogs integrierten in den letzten Tagen dieses Feature und helfen dem Betreiber, hochqualitative Daten für eine zukünftige Websuche (Facebook sieht sich ja schon lange als Google-Konkurrent). Ob der Plan aufgehen wird, muss die Zukunft zeigen – das Generieren der Daten ist eine Sache, die sinnvolle Strukturierung eine andere. Ich konnte mich dem allgemeinen Hype natürlich nicht entziehen und habe den Like-Button auf datenschmutz gestern eingebaut:

Facebook Like auf datenschmutz

Wie baut man den Like-Button ein

Wer sich das manuelle Editieren des eigenen Templates sparen möchte, kann mittlerweile auf diverse Plugins zurückgreifen – Bastler konfigurieren und holen sich den Code einfach von der Facebook Social Plugins Page. Die fertigen Lösungen bieten im Wesentlichen alle den gleichen 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 findet man nicht wie gewohnt im Menü Settings/Einstellungen, sondern unter „Plugins“. Die Einstellungen sind selbsterklärend: neben der Auswahl, ob der Like-Button nur auf Einzel-Beitragsseiten oder auch auf der Startseite respektive aus statischen Pages angezeigt werden soll, wählt eines von zwei Farbschemata, die Breite, die Höhe und das Wording (entweder „like“ oder „recommend“), die Schriftart sowie die Position (vor oder nach dem Beitrag) und optional eigenen CSS-Code für den Container.

In der simpelsten Form (Like-Button und Counter) begnügt sich das Plugin mit 30 Pixel, sollen die Avatare mit angezeigt werden, sind 60 Pixel einzuplanen. Es empfiehlt sich also, entweder die gesamte Breite der Content-Spalte als „Width“ einzutragen, oder via CSS das Element floaten zu lassen – so hab ich’s hier am Blog gemacht.
Facebook Like Button Plugin

FaceBook Like Button Plugin for WordPress

Diese Plugin bietet exakt den gleichen Funktionsumfang, allerdings wird hier anstatt des CSS-Codes ein Klassennamen für den Container eingetragen; die entsprechende Formatierung ist dann im Stylesheet vorzunehmen. (Nur ein kleiner kosmetischer Unterschied, aber wer maximal sauberen Code bevorzugt, greift zu dieser Lösung.)
FaceBook Like Button Plugin for WordPress

WordPress Facebook Like Plugin

Das gleiche in grün – da Facebook die möglichen Optionen vorgibt, bietet dieses Plugin genau die gleichen Einstellmöglichkeiten wie der oben beschriebenen „Zwillingsbruder“ – mit zwei Ausnahme: die Einstellmöglichkeiten maximale Höhe und eigenen CSS-Code fehlen, sodass das Like-Element insgesamt mehr Platz einnimmt als erforderlich.
wordpress-facebook-like

WP Facebook Like

Ein Tipp für Bastler, denn dieses Plugin bietet weniger Optionen, stellte dafür jedoch einen CMS- und einen php-Tag fürs Template bereit: mittels [wpfblike] im Editor bzw. der php-Funktion wpfblike() lässt sich das Element an jeder beliebigen Stelle aufrufen.
WP Facebook Like

Be the first to like this!

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

Der Beispiel-CSS-Code, den ich hier auf datenschmutz verwendet habe, steht weiter unten zum Kopieren bereit. Je nach verwendetem Plugin muss die Style-Class entweder ins Template-Stylesheet eingetragen werden oder in die Optionspage (siehe oben). Die runden Ecken sind ein CSS 3 Feature – nicht alle Browser unterstützen dieses Eyecandy, IE-User bekommen die klassischen Ecken zu sehen. Margins, Paddings und andere Parameter müssen natürlich an die jeweiligen Design-Erfordernisse angepasst werden:

{code type=CSS}
.facebox {
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 weiter mit den Facebook Social Plugins?

Wie erwähnt sind die Konfigurationsmöglichkeiten derzeit noch bescheiden. Ich vermute mal, dass Facebook in punkto Design aus CI-Gründen recht restriktiv bleiben wird, neue Funktionen respektive Social Plugins dürften aber nicht lange auf sich warten lassen. Bereits mit der derzeit verfügbaren Palette lassen sich die wichtigsten Social Media Funktionen mit Hilfe des großen Bruders Facebook im Nu integrieren. Allerdings gilt auch hier: wer voll und ganz auf 3rd Party Anbieter setzt, kann eines Tages ganz schön im Regen stehen! Wer sein Blog „sozialer“ machen will, dem empfehl ich einen Blick auf Mingle zu werden. WordPress 3.0 wird sowieso Social Network Features an Bord haben. Zweifellos hat Facebook einen immensen Skalierungsvorteil auf seiner Seite, aber der Optimist in mir hofft trotzdem nach wie vor auf die glorreiche Zukunft des distributed Social Networking. Was denken Sie, wie’s weitergehen wird?