Facebook Like Button

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

Zuletzt aktualisiert am 26. April 2018 um 20:47

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:

https://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?

81 Antworten
  1. Neale says:

    Klasse, danke für die Plug-Ins-Liste! Hab’s noch mühsam selbst eingebaut und bin gar nicht zufrieden …

    Greetz

    Neale

  2. UbersetzerIna says:

    Unglaublich wie rasend schnell sich dieses Button gerad in den USA verbereitet und anscheinend auch hier die Blogger infiziert hat. An dieser Stelle ein Dank für die Einbau-Anleitung.

    VG,
    Ina

      • ana says:

        hi,

        danke für die bemühung, licht in die sache zu bringen. ich bin nur leider ein totaler nichtschwimmer, was solche sachen angeht. den fb social plugin code zu holen, hab ich gerade noch geschafft.- könnte mir jetzt bitte wer idiotensicher erklären wo ich den hinkopieren muss?

        please help!

        ana

  3. Georg says:

    Ich finde den Recommend-Button wie auf CNN (rechts oben http://bit.ly/bmVAUB) noch wirkungsvoller. Warum? Weil man da gleich etwas mit einem Kommentar auf das Profil posten kann. Muss mich aber erst spielen, wie ich das zusammen bringe.

  4. Marco says:

    super anleitung! wer die deutsche version der social plugins verwenden will, muss die de-javascript SDK aufrufen. dazu einfach den orig. code von der facebook-developer seite anpassen:

    ‚//connect.facebook.net/de_DE/all.js‘;

    — und schon hat man „Empfehlen“ statt „Recommend“, bzw. „Gefällt mir“ statt „I like“.

    zu sehen auf http://www.webzucker.at :frog2:

  5. Joe says:

    Auch eingebaut! Hab übrigens ein neues Design! Über Feedback freue ich mich.
    @ritchie:
    Was für ein Tweet/retweet plugin verwendest du eigentlich? Alle die ich bisher gefunden habe funktionieren bei mir nicht korrekt.
    Kannst du eines empfehlen?

    lg
    joe

  6. Michael Dunker says:

    Schöne Anleitung mit sinnvollen Kommentaren zu den Plugins. Es ist wirklich erstaunlich, wie schnell sich Facebook ins System frisst. Bisher hält sich der direkte Traffic von FB auf eigene Seiten allerdings in Grenzen, auch über extrem Besucher starke Gruppen fließt nicht wirklich viel…

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Das stimmt, und es überrascht mich ein bisschen; externe Links werden auf FB anscheinend doch weit weniger geklickt als erwartet, was aber natürlich auch mit der relativen Unscheinbarkeit des Like-Eintrags in der Timeline zu tun hat. „Shares“ mit Bild bringen deutlich mehr Besucher.

  7. GangXtaBoii says:

    Guten Tag.

    Mein Team und ich haben ein neues WordPress-Plugin entwickelt und auf WordPress.org online gestellt und würden uns freuen wenn unser Plugin vielen Menschen auf der Welt helfen könnte und das bloggen mit den Facebook-Social-Plugins zu erleichtern.

    Wir würden uns sehr freuen wenn unsere Arbeit Früchte tragen würde.

    Vielen Dank.

    mit freundlichen Grüßen,
    GangXtaBoii
    (gb-team)

    Plugin: http://wordpress.org/extend/plugins/like-button-plugin-for-wordpress/

  8. Nützlich says:

    Wer zeigt wie sowas geht, sollte auch dem Benutzer zeigen, wie er sich gegen so eine Bevorurteilungen schützen kann:

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Danke für den Link! Trotzdem ist die Panik imho übertrieben, denn: haargenau dieselbe Argumentation gilt für Analytics sowie alle 3rd Party JS-Snippets und Widgets. Wenn FB unbedingt von meinem Surf- auf mein Konsumverhalten schließen möchten: bitte, viel Spaß, go ahead! Entweder krieg ich Werbung für Produkte, die mich tatsächlich interessieren, oder eben nicht… big deal! Dass Privacy-kritische Seiten den Button nicht einbauen sollten, versteht sich wohl von selbst. Aber wer beim Verlassen des Hauses unter keinen Umständen erkannt werden will, muss ziemlich viel Aufwand mit Kostümen treiben – und aus Webmastersicht muss ich sagen: wow, big deal, wenn FB weiß, dass jemand, der dort registriert, mein Blog besucht hat.

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Hi Sven, danke für den Hinweis – hab ihn dank Google Alerts schon bemerkt, diesen frechen Content-Scraper; alle Beiträge am Blog sind geklaut, ein Impressum gibt’s nicht. Glücklicherweise ist Google mittlerweile ausreichend schnell, aber definitiv sehr frech – ich weiß nicht mal, das Ding wirklich von Martin Aumann ist; der Typ, der das macht, wird wohl nicht so blöd sein, seinen richtigen Namen anzugeben.

  9. Retusche says:

    Besten Dank für die gute Nachricht. Dann kann ich endlich mein Blog zum Thema Bild- und Fotobearbeitung mit meiner Facebook-Seite verbinden. Wird es noch mehr Funktionen unter WordPress 3.0 geben?

    Beste Grüße

    ProfiMasking

  10. Daniel says:

    Danke für den schnellen Vergleich. Genau das hab ich gesucht. Wenn man die Absicht hat neue Leser von Facebook zu bekommen, sind dann wenige Shares mittels des alten Sharebutton oder viele „Gefällt mir“ besser geeignet? Was denkst du?

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Schwer zu sagen, weil: im Feed sind die „Shares“ (v.a. mit Thumb) um Welten auffälliger, die Likes werden ja nur vergleichsweise klein dargestellt auf FB. Andererseits spielt die Facebook-Suche eine immer größere Rolle, was letztendlich heißt, die Likes könnten mittelfristig sowas wie ein Äquivalent zu den Google-Backlinks werden. Ist aber noch zu früh, um da genauere Prognosen abgeben zu können, weil alles davon abhängt, wie Facebook weiter mit den gesammelten Like-Daten verfährt.

  11. Tips trik blogging says:

    Thats widget really important.
    I’d like to ‚like‘ this post.. :)

  12. Kai says:

    Hi,

    wir nutzen das „Facebook Like Button Plugin“. Das hat bisher auch immer funktioniert. Neuerdings gibts aber keine Chance mehr über diese Schnittstelle zu veröffentlichen. Es taucht immer ein Fehler auf. z.B. „Die Seite unter kann nicht aufgerufen werden.“

    Hat einer ne Idee?
    Gruß!

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Ich schätz mal ganz stark, dass das nicht am Plugin liegt; Facebook hatte in den letzten Tagen/Wochen immer wieder API-Probleme… die scheinen ihr eigenes System wohl noch nicht so ganz im Griff zu haben.

      • Kai says:

        Danke! Das wird das Problem gewesen sein! Das nächste Mal wirds erstmal ausgesessen – ohne den Fehler in den eigenen Reihen zu suchen…

  13. MHG says:

    ich verwende die wordpress version, die bei wordpress liegt – also die generische, kein eigener server – hat jemand da was gehört, wann sie einen like-widget anbieten. mit dem text widget kann ich kein iframe machen – thx MHG

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Hi, zu WordPress.com weiß ich leider nix Konkretes; wird aber sicher nicht lang dauern, bis da ein Plugin zur Verfügung steht. Mit der Pro-Version, bei der man die Templates editieren kann, müsst’s eigentlich mit händischem Einbau hinhauen.

  14. Trierer says:

    Hi Ritchie und mal wieder Danke, hab jetzt gefühlte 27 verschiedene Plugins versucht und keines hat richtig gepasst. Muss doch mal wieder öfter hier lesen (hatte Anfang des Jahres die ESET Security Suite gewonnen)

    Gruß aus Trier
    Mario

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Dankeschön, das freut mich natürlich sehr, wenn ich helfen konnte! :pimp:

      PS: Wie bist zufrieden mit der ESET Suite? Funktioniert bei mir nach wie vor klaglos und völlig unintrusiv. Ich wunder mich immer, wenn ich c’t Tests von Virenscannern lese, wie schlecht die Konkurrenz teilweise ist…

  15. Thorsten says:

    Hi!
    Ich habe die erste Variante in meinem Blog eingebaut. Leider erscheint der Button „nur“ direkt im Post aber nicht unter jedem Post auf der Übersichtsseite. Wie das z.B. beim YIID-Button geht. Siehe mein Blog. Weißt Du ob man das in den Settings einstellen kann, dass der Button auch auf der Überssichtsseite unter jedem Post erscheint?

    Danke und Grüße

    Thorsten

  16. Pia says:

    wenn neben nem like button steht „10 Personen gefällt das“ so hat man als Seiteninhaber aufgrund der Facebook-Privatsphäre keine Möglichkeit zu sehen, wer das ist oder?

    Vielen Dank :)

  17. Stephan says:

    Danke für die Anleitung. Habe mir in meinem Blog das FBLike Plugin eingebaut. Ging fast alles ohne Probleme. Leider werden bei mir nicht die Bilder der Facebook-Mitglieder angezeigt, die auf „gefällt mir“ geklickt haben. Den richtigen Haken habe ich bei den Einstellungen gesetzt. So läuft bei mir nur der Counter mit. Hat einer eine Lösungsmöglichkeit im Angebot?

    Schade ist auch, dass man als Admin nicht sieht, wer außerhalb der Freundesliste noch konkret „abgestimmt“ hat.

    Danke und Gruß

    Stephan

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Hi Stephan, it’s not a bug, it’s a feature :frog4:

      Das ist von Facebook so gedacht, aus Gründen der Privacy – du siehst immer nur die Bilder/User, mit denen du auch befreundet bist. Sonst könnt sich der Like Button sehr schnell zur Spamschleuder entwickeln.

      • Stephan says:

        Moin und Danke. Habe ich mir fast gedacht. Klingt auch plausibel.

        Mein Problem mit dem Anzeigen der Bilder habe ich noch immer nicht lösen können. Es wird nach wie vor nur der Counter angezeigt und nicht die Bilder meiner Facebook-Freunde.

        • bikershrek says:

          Schließe mich hier mal an.
          Ist bei mir genau so.
          Like Button alles easy.
          Die Anzeige der Freunde als Bilder in der Sidebar – keine Chance.

          Hat da jemand schon eine Idee für eine Lösung.
          Danke. :-)

          • Ritchie Blogfried Pettauer
            Ritchie Blogfried Pettauer says:

            Deine Freunde statisch anzuzeigen geht nicht; die Social Plugins basieren drauf, dass der Besucher deines Blogs in FB eingeloggt ist, und FB achtet da recht genau auf Privacy. ABER: du kannst die Fans deiner Page (die ja immer öffentlich ist) via Social Plugin einbinden.

  18. Hubi says:

    Hallo, bin am verzweifeln, habe den Code in mein Template eingebaut und seit ein paar Wochen erscheint unter jedem Artikel die gleiche Anzahl von Personen, die den Like-Button geklickt haben (referenziert auf die Stamm-Domäne), obwohl die URL des Posts angegeben ist…
    Weiß jemand Rat ->
    Grüße
    Hubi

  19. Marvin says:

    Hi! Vielen Dank für die hilfreichen Tips. Auf meinem aktuellen Blog hat das alles gut funktioniert. Ich würde gern auf folgendes Template umstellen: http://aparatus.fearlessflyer.com/

    Wie könnte ich da neben den Tweet Button, der über allen Posts ist einen Like-Button daneben packen? In den Posts sieht der Tweet Button so aus, wie der den Du hier im Post hast. Da soll dann auch der like-button daneben, den du hier danebn hast.

    Kann mir da jemand weiterhelfen?

    Liebe Grüße

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Gute Wahl, wirklich ein hübsches Theme :frog4o:

      Das mit den Buttons ist simpel und grundsätzlich unabhängig vom Theme; du musst einfach nur beide Elemente nebeneinander floaten lassen (also style=“float:left“), die margins passend einstellen und fertig.

      Die meisten Plugins erlauben es, zusätzlichen CSS-Code für das Wrapper-Div anzuzgeben. Wenn nicht, dann stell in den Plugin-Optionen das automatische Einfügen der Buttons ab und hängt dir den php-Call manuell an die passende Stelle, in zwei nebeneinander floatenden Div-Containern.

  20. tin says:

    Der Facebook Button fällt beim XHTML Validator durch – 12 Fehler. Schade.

  21. coma says:

    Schade, bei mir hat gar nichts geklappt.

    Wollte diesen hier installieren: http://wordpress.org/extend/plugins/wordpress-facebook-like/installation/

    Runtergeladen, entzippt, Ordner in die entsprechende Stelle kopiert, in WordPress eingeloggt, hab auf „aktivieren“ geklickt und dann diese Fehlermeldung:

    „Fatal error: Call to undefined function register_setting() in /is/htdocs/wp1128388_WRNUCO59FV/blog/wp-content/plugins/wordpress-facebook-like/wordpress-facebook-like.php on line 76“

    Inzwischen bekomm ich diese Fehlermeldung schon, sobald ich in meinem Worpress Dashboard auch nur iiiirgendeine Seite aufrufen möchte. Kurz: es geht gar nichts mehr.

    Weiß jemand Rat? Kann auf meiner Seite nichts mehr machen.

    Danke!

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Hi,

      1. lösch den Plugin-Ordner komplett, dann ruf 1x deineseite/wp-admin/plugins.php auf. Dann ist alles wieder wie vorher :-)

      2. Klingt, als würdest du eine uralte php-Version verwenden – die neueren Plugins brauchen alle *mindestens* 5.1, das solltest du mal mit einem Hoster checken.

  22. coma says:

    EDIT zu vorherigem Eintrag:

    Das „Like“ wird auf dem Blog angezeigt, allerdings kann ich mich nun nicht einmal mehr in mein WordPress einloggen (sebe Fehlermeldung wie oben beschrieben). WordPress-Version meines Wissen 2.6. …

    • Ritchie Blogfried Pettauer
      Ritchie Blogfried Pettauer says:

      Warum denn 2.6 um Flying Spaghetti Monsters Willen? Also wie geschrieben: zuerst Plugin löschen, dann php upgraden, dann WordPress upgraden, dann Plugin nochmal installieren; und Backup vorher nicht vergessen!

  23. Mark says:

    Hi Ritchie und mal wie­der Danke, ich hab sau viele WordPress Plugins ausprobiert bis ich jetzt auf deinen Artikel gestoßen bin…

    Danke für en guten Beitrag…

  24. Christine says:

    Hallo, was muss ich tun beim Einbinden des Codes, damit da nicht steht Susi Mustermann gefällt auf xyz.de, sondern Susi Musterman gefällt „Titel der Seite“ auf xyz.de?

  25. Max says:

    wird der beitrag dann im profil auf facebook angezeigt oder auf einer gemeinschafts/interessenseite?

  26. Steffi says:

    Ich komm einfach nicht klar, bei mir lässt es sich nicht einbinden. Also – für den ganzen Blog.
    Auf meinen einzlenen Post hingegen ist es da. Möchte aber (und wurde auch schon oft angefragt), direkt oben rechts im Blog die Like-Box haben.
    Ich habe nicht das WordPress, was selbstgehostet ist…
    Wie krieg ich denn nun endlich mal die Like-Box rein???
    Kann mir jemand helfen?
    Liebe Grüße :frog:

Kommentare sind deaktiviert.