Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Der Facebook-Button „gefällt mir“ wird wohl mittlerweile fast jedem ein Begriff sein. Innerhalb des Social Media Dienstes können User per Klick bekunden, dass ihnen eine Facebook-Aktivität gefällt. Für Facebook-Seiten lautete dieser Button bis vor kurzen noch „Fan werden“, nun wurde das Wording angepasst. In einem weiteren Schritt hat Facebook die Anzahl der Developer-Plugins erhöht, so dass es nun kinderleicht möglich ist den Button in die eigene Website einzubinden.

Facebook Plugins

Die Facebook-Developer Seite bietet ein Mini-Script an was mittels iframe kinderleicht den „gefällt mir“-Button in die eigene Seite integriert. Über die Website kann der Button im Erscheinungsbild angepasst werden, anschließend könnt Ihr Euch den Source-Code kopieren und in die eigene Seite einbinden.
Um den Button nun innerhalb von WordPress nutzen zu können müssen wir den Permalink (aktuelle Seite/Artikel innerhalb von WordPress) in den Code einbinden. Inklusive integriertem Permalink sieht der abgewandelte Code dann so aus. Ich habe in diesem Beispiel das Farbschema auf „Dark“ geändert, die Breite mit 500 Pixeln und die Höhe mit 30 Pixeln angegeben.


<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=500&amp; action=like&amp; font=tahoma&amp; colorscheme=dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:30px"></iframe>

Diesen Code bindet Ihr nun in Eurem WordPress-Theme (z.B. in der single.php, index.php, page.php) innerhalb des Loops ein.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 16 Kommentare

  1. Michael
    schrieb am 30.04.2013 um 15:47 Uhr:

    @Niklas du kannst dem iFrame einfach Style Angaben hinzufügen. Also z.B. style=“float:left; margin: 10px;“ etc. Dann solltest du ihn auch locker und einfach neben deinem Datum platzieren können.

    Viele Grüße

    MIchael

    Antworten
  2. Jürgen
    schrieb am 11.01.2012 um 10:00 Uhr:

    Vielen Dank! Super coole Infos.

    Antworten
  3. Facebook-Power Teil 3: Open Graph Protocol nutzen | kulturbanause blog - Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um Webdesign und digitale Bildbearbeitung
    schrieb am 17.05.2011 um 22:21 Uhr:

    […] Wenn Ihr WordPress nutzt, so lest hier nach wie Ihr die URL korrekt übergeben könnt: Facebook „gefällt mir“-Button in WordPress einbinden […]

    Antworten
  4. Pascal
    schrieb am 22.09.2010 um 08:02 Uhr:

    Hey genau das was ich gerade gesucht habe, danke.

    Antworten
  5. Datenschutz-Problem beim Facebook-Button? | kulturbanause blog
    schrieb am 13.07.2010 um 17:34 Uhr:

    […] fehlt mir momentan die Zeit mich ausführlich mit der Materie auseinander zusetzen. Da ich aber in einem älteren Artikel über die Einbindung des Like-Buttons geschrieben habe möchte ich Euch diese Info natürlich keinesfalls vorenthalten. Wenn Ihr weitere […]

    Antworten
  6. Gefällt mir! | Das rote Blog
    schrieb am 25.06.2010 um 17:53 Uhr:

    […] So richtig gefällt mir das mit dem Knopf aber noch nicht. Vor allem stört mich, dass es als Iframe geladen wird. Mit diesem Codeschnipsel, gefunden beim Kulturbanausen. […]

    Antworten
  7. Konstantin
    schrieb am 16.06.2010 um 08:43 Uhr:

    Wisst ihr wie man heraus bekommt, wer auf den Button jeweils auf den Beiträgen geklickt hat?

    Antworten
    • Jonas Hellwig
      schrieb am 16.06.2010 um 08:53 Uhr:

      @Konstantin: Wenn einer deiner Freunde auf den Button klickt steht der Name darunter. Das siehst du selbst dann (Vorausgesetzt du bist bei Facebook noch eingeloggt). Z.B. „Jonas Hellwig gefällt das“.

      Sind es mehr als zwei deiner Freunde werden sie gemischt. Es werden immer nur zwei angezeigt.

      Angenommen es klicken nun noch 5 andere Leute die nicht bei Facebook in deiner Freundes-Liste sind den Button an, so steht da „Jonas Hellwig und 5 anderen gefällt das“.

      Eine Möglichkeit herauszufinden wer auf den Button geklickt hat und NICHT in deiner Freundes-Liste ist kenne ich nicht. Ich hoffe auch mal, dass das aus Datenschutzgründen nicht geht. Aber bei Facebook wundert einen ja gar nichts mehr :)

      Antworten
  8. Niklas
    schrieb am 28.05.2010 um 12:49 Uhr:

    Ich würde den Like-Button gerne auf Höhe des Datums platzieren, da mit es stimmiger aussieht. Habt ihr irgendeine Lösung dafür?

    Antworten
  9. scanner
    schrieb am 27.05.2010 um 08:00 Uhr:

    Ladezeiten: Da es im iFrame ist, sollte es doch unabhängig vom Rest sein, oder (soll heissen: Der Rest der Seite lädt genauso schnell) – oder? Der Facebook-Button erscheint dann bei mir mind. 1 Sekunde später.

    Button in HTML-eMail: Wie kann man diesen Button in eMails einbinden? Nur den Code reinkopieren klappt ja nun nicht (habe es in Outlook probiert).

    Antworten
  10. Alex L
    schrieb am 17.05.2010 um 21:10 Uhr:

    Hallo,
    wie ist es mit den Ladeeinbussen auf den einzelnen Blogseiten/Artikelseiten? Kann man da irgendetwas Negatives darüber berichten? Derzeit habe ich bereits 3 andere Buttons in jedem der Blogposts, 4 sind es sogar, wenn ich noch Wikio hinzuzähle.

    Aber andererseits muss ich feststellen, dass wir Blogger von Twitter und jetzt auch noch Facebook kaum wegkommen wollen ;-) Da diese beiden Social Networks derzeit in aller Munde sind, ist es doch nicht verkehrt, dass sie über kurz oder lang einen Weg ins jede Blog finden.

    Danke für die Installationsbeschreibung zum Like-Button. Gruss..

    Antworten
    • Jonas
      schrieb am 17.05.2010 um 21:22 Uhr:

      @Alex L: Ich fürchte der Ladezeiten-Zuwachs ist nicht ganz unerheblich bei diesen Buttons. Ich habe mal einen sporadischen Feldversuch gestartet und im Durchschnitt 700 Millisekunden an Ladezeit nur für den Facebook-Button gezählt.

      Antworten
  11. Fimbim
    schrieb am 09.05.2010 um 15:43 Uhr:

    Wirklich sehr cool, danke!
    Muss ich irgendwas ändern, wenn ich das auf meine index bzw. archive.php einbinden will?

    Antworten
  12. Bottomless
    schrieb am 04.05.2010 um 05:05 Uhr:

    Das deutsche WordPress plugin:
    http://wordpress.org/extend/plugins/like

    Antworten
  13. gatzman
    schrieb am 03.05.2010 um 21:22 Uhr:

    Sehr cooles Feature. Leider scheint das noch ein wenig buggy zu sein. Beim ersten Klick und zwei „Fans“ wird einer der Fans durch den aktuellen Benutzer ersetzt. Beim zweiten Klick wechseln die Benutzer scheinbar zufällig. Facebook übernehmen Sie.

    Antworten
    • Jonas
      schrieb am 03.05.2010 um 21:30 Uhr:

      @gatzman: ich sehe das Problem auch. Allerdings bin ich nicht ganz sicher, dass ob es ein Bug oder ein Feature ist :D :D

      Aber genau aus diesem Grund habe ich das Teil auch mal bei mir im Live-Betrieb eingebaut. Mich würde vor allem interessieren was Besucher sehen die keinen der „Fans“ kennen. Über Erfahrungsberichte bin ich also sehr dankbar!

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →