kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Facebook "gefällt mir"-Button in WordPress einbinden

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

16 Kommentare

  1. gatzman

    Verfasst am 3. Mai 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.

    • Jonas

      Verfasst am 3. Mai 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!

  2. Bottomless

    Verfasst am 4. Mai 2010 um 5:05 Uhr.

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

  3. Fimbim

    Verfasst am 9. Mai 2010 um 15:43 Uhr.

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

  4. Alex L

    Verfasst am 17. Mai 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..

    • Jonas

      Verfasst am 17. Mai 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.

  5. scanner

    Verfasst am 27. Mai 2010 um 8: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).

  6. Niklas

    Verfasst am 28. Mai 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?

  7. Konstantin

    Verfasst am 16. Juni 2010 um 8:43 Uhr.

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

    • Jonas Hellwig

      Verfasst am 16. Juni 2010 um 8: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 :)

  8. Pascal

    Verfasst am 22. September 2010 um 8:02 Uhr.

    Hey genau das was ich gerade gesucht habe, danke.

  9. Jürgen

    Verfasst am 11. Januar 2012 um 10:00 Uhr.

    Vielen Dank! Super coole Infos.

  10. Michael

    Verfasst am 30. April 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.