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.
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="https://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>& layout=standard& show_faces=false& width=500& action=like& font=tahoma& 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.
@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
Vielen Dank! Super coole Infos.
[…] Wenn Ihr WordPress nutzt, so lest hier nach wie Ihr die URL korrekt übergeben könnt: Facebook „gefällt mir“-Button in WordPress einbinden […]
Hey genau das was ich gerade gesucht habe, danke.
[…] 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 […]
[…] 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. […]
Wisst ihr wie man heraus bekommt, wer auf den Button jeweils auf den Beiträgen geklickt hat?
@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 :)
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?
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).
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..
@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.
Wirklich sehr cool, danke!
Muss ich irgendwas ändern, wenn ich das auf meine index bzw. archive.php einbinden will?
Das deutsche WordPress plugin:
http://wordpress.org/extend/plugins/like
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.
@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!