Der Facebook Like Button (Whitepaper)
Share vs. Like - Auszug aus unserem Whitepaper
Mit der Einführung des Like-Buttons zur Facebook f8 Konferenz vor vier Wochen hat die Plattform einen großen Schritt zur Eroberung des ganzen Internets getan. Gleichzeitig bietet diese Funktion vielen Seieten aber auch eine Möglichkeit zusätzlichen Traffic zu generieren. In unserem neuesten Whitepaper gibt Gerald Bäck (Geschäftsführer von DIGITAL AFFAIRS) einen Einblick in die Funktionen des Like Buttons sowie dessen Einsatz auf der eigenen Webseite. Einen besonderen Augenmerk legt er dabei auf die Touristikbranche.
Auf Grund des Umfangs (17 Seiten) können wir den Inhalt hier leider nicht als Blogbeitrag anbieten.
Download:
Whitepaper: Der Facebook Like Button
PDF, 6,6 MB (Share & Embed vie Scribd.com)
Über den Autor:
Gastautor: Dieser Beitrag wurde von einem Gastautor erstellt (siehe Verweis im Beitrag). Wir sind laufend auf der Suche nach neuen Gastautoren die ihre Expertise in einem Themengebiet bei uns diskutieren und veröffentlichen wollen. Wenn du auch Lust hast bei uns im Blog einen Beitrag zu veröffentlichen kannst du dich einfach bei uns melden. Mehr...
- Geballtes Wissen: Facebook veröffentlicht Archiv wissenschaftlicher Arbeiten
- Ein Like zum Anbeißen: Wiener Bäcker verschenkt Like-Brot
- Facebook beschleunigt das Web – Über 50% der Social Plugins optimiert
- Best Practice: Likes sammeln mit interaktiver Webinstallation
- Facebook Pages: Komplettes Redesign der mobilen Ansicht mit klarem Fokus auf Interaktionen
Juni 17th, 2010 at 12:25
Ja! Auf diese Infos haben wir gewartet! Vielen Dank sagt die Brückenbande.
Juni 17th, 2010 at 12:49
Joa was soll man dem noch hinzufügen? …
Außer folgenden 2 Punkten:
1. Hat der Like-Button aufgrund seiner 1-Klick-Methodik eine weitaus geringere Hemmschwelle halt als die Share-Variante.
2. Ist die fehlende Kommentarfuntkion mit Implementierung der XFBML-Variante als obsolet zu betrachten.
Juni 17th, 2010 at 12:54
Tolles Whitepaper!
Juni 17th, 2010 at 13:45
Kleine Anmerkung zum Nachteil „Nicht kommentierbar“ des Like-Buttons: Das stimmt so nicht. Auch per Like-Button ist sehr wohl ein Kommentar möglich, der später auch inklusive Bild, vorschau-Text der Seite etc. im Facebook-Stream auftaucht und dann genau so groß und aufmerksamkeitsstark aussieht, wie ein per Share-Button erzeugter Timeline-Eintrag.
Damit nach dem Klick auf den Like-Button eine Box für das Eintippen des Kommentars angezeigt wird, müssen zwei Voraussetzungen erfüllt sein.
1. Der Like-Button muss mithilfe des fb:like-XFBML-Tags eingebunden werden, was die Nutzung des Facebbok JavaScript SDKs nötig macht. Mit der einfachen iFrame-Einbindung sind Kommentare grundsätzlich nicht möglich.
2. Es muss um den eigentlichen Button herum genügend Platz für das Kommentarfeld sein, das nach dem Klick auf den Button (und bei jedem Mouseover nach erfolgtem „Liken“) eingeblendet wird. Das kann man beispielsweise erreichen, indem man als „Layout Style“ des Buttons die Option „standard“ verwendet und die Option „Show Faces“ eingeschaltet hat. Dadurch ist dann automatisch genügend Platz unter dem Button „reserviert“.
Wer als „Layout Stlye“ die Version „button_count“ ausgewählt hat, muss manuell für genug Platz um den Button herum sorgen. Das ist natürlich eigentlich völlig widersinnig, denn dann könnte man auch gleich die große Version einbinden. Trotzdem beschreibe ich hier, wie es gemacht wird: Man muss den fb:like-XFBML-Tag in ein HTML-Element einbetten, das per CSS eine Höhe von 110 Pixeln und im optimalen Fall eine Breite von mindestens 325 Pixeln erhält. Ist diese Box, die den Button umgibt, kleiner als hier angegeben, wird das im JavaScript-generierten iFrame erscheinende Kommentarfeld teilweise abgeschnitten.
Letzteres erklärt auch, warum teilweise ohne die manuelle Nachhilfe per CSS kein Kommentarfeld erscheint, obwohl man die fb:like-XFBML-Variante verwendet: Die Kommentarbox erscheint zwar, ist aber nicht sichtbar, so dass es für den Website-Besucher so aussieht, als wäre die Kommentarfunktion nicht vorhanden.
Technisch passiert folgendes: Unter dem durch das JavaScript generierten iFrame, der den eigentlichen Button enthält, gibt es einen weiteren JavaScript-generierten iFrame, der die Kommentarbox enthält. Dieser Kommentarbox-iFrame ist zwar die ganze Zeit vorhanden, wird aber per CSS-Eigenschaft „display: none“ solange ausgeblendet, bis er gebraucht wird. Durch dieses Ausblenden wird allerdings das HTML-Element, das den fb:like-XFBML-Tag umgibt, vom Browser nur so hoch dimensioniert, dass der bereits sichtbare Button hineinpasst. Obwohl die Sichtbarkeit der Kommentarbox später per JavaScript geändert wird, hat das keinen Einfluss mehr auf die Höhe des HTML-Elements, das den fb:like-XFBML-Tag umgibt. Dadurch erscheint die Kommentarbox zwar rein technisch. Optisch bleibt sie jedoch trotzdem vor dem Website-Besucher verborgen.
Juni 17th, 2010 at 13:48
Hallo Michael, danke für diene ausführliche Erklärung!
Juni 17th, 2010 at 13:57
moin,
joa danke michael … genau das hatte ich eigentlich auch in Kurzform auch in einem Kommentar geschrieben^^ (welcher nicht freigegeben wurde) Anscheinend bin ich im Spam gelandet … oder in den weiten des Webs?
Juni 17th, 2010 at 14:14
Hallo Lars,
hab gerade nachgeschaut und dich tatsächlich im Spam gefunden. Hab deinen ersten Kommentar jetzt freigeschaltet.
Juni 17th, 2010 at 14:29
Nachdem ich den Like-Button in meinem Blog jetzt unter die Artikel verschoben habe, und wie oben beschrieben Platz für die Kommentarbox geschaffen habe, muss ich mich korrigieren: Die Höhe des umgebenden HTML-Elements sollte mindestens 130 Pixel betragen. Die Kommentarbox wird nämlich noch ein wenig höher, wenn man erst einmal hineingeklickt hat. Es kommen unter dem Text-Feld nämlich noch Buttons hinzu.
Das ist von Facebook nicht wirklich schön gemacht, denn auch wenn Weißraum schön aussehen kann. Diese Platzverschwendung ist völlig unnötig. Beim Kachingle-Button beispielsweise (siehe t. B. in der Seitenspalte meines Blogs) ist das besser gelöst. Dort legt sich der riesige Tooltip bei Mouseover auch über die umliegenden Elemente. Man braucht also keinen extra Platz freihalten.
Juni 17th, 2010 at 15:26
Vielen Dank für das Whitepaper. Der Aspekt, der aber vielleicht in den bisherigen Diskussionen zu kurz kommt, ist dass es auch Grenzen für den Gebrauch des Like-Buttons gibt… Für den Beleg muss ich leider etwas Eigenwerbung machen, denn schaut mal hier: http://blog.wuh.de/allgemein/facebook-gefaellt-mir. Mich würde mal interessieren, was ihr dazu meint?
Juni 17th, 2010 at 15:28
Ja, da has du Recht. Danke für den Hinweis. Deshalb bietet Facebook auch die Option an “Nutzername empfiehlt Beitrag X”.
Juni 17th, 2010 at 15:29
@Jens
das dachte ich mir schon
WordPress ist manchmal so berechenbar
@Michael,
ich verstehe gerade nicht warum du den Like-Button in ein extra Container packst^^ Ich habe ihn auf meinem Blog einfach unter das Post-Element gepackt und der Kommentarbereich öffnet sich problemlos. Vorhandene Elemente werden überdeckt, aber extra einen Container für den Button? Ich weiß jetzt auch nicht welche Variante du genommen hast, obwohl es gibt ja nur eine oder? ….
Juni 17th, 2010 at 15:39
Und ich muss mich nochmal korrigieren. Manchmal legt sich die Kommentarbox tatsächlich über den restlichen Seiteninhalt – auch ohne zusätzlichen Platz. Ich werde da irgendwie nicht richtig schlau draus.
Juni 17th, 2010 at 16:03
@lars: Ich hatte ursprünglich mehrere Buttons nebeneinander angeordnet. Dazu habe ich den li-Elementen einer unsortierten Liste „float: left;“ zugewiesen. Und in jedem li-Element befand sich das entsprechende Script-Schnipselchen von Tweetmeme, Like-Button, Flattr usw.
Juni 17th, 2010 at 16:38
@Michael
hatte ich Anfgangs in vertikaler Version mit dem Share & TweetMeme-Button. Den neuen Like-Button setz ich ohne Container ein ich würd bei dir die entfernen und nur den einsetzen, also ohne jegliche Klassen oder Container, der Button nimmt sich schon die Größe die er braucht … und Probleme mit anderen Browsern gibt es auch nicht
Juni 17th, 2010 at 20:06
@lars: Habe ich jetzt auch so gemacht. Wobei der Like-Button trotzdem noch in einem normalen Absatz steht. Gibt aber keine Probleme. Die Kommentarbox legt sich brav über die anderen Inhalte.
Juni 21st, 2010 at 10:22
Hallo,
Als Vorteil für den Like-Button wird hier genannt, dass eine Eintragung einer versteckten Fanpage möglich ist. Anhand des Like-Button ist dies aber nicht möglich, oder? Damit ist mit Sicherheit eine abgespeckte Like-Box gemeint, oder sehe ich das falsch?
Vielen Dank schon einmal und sehr schönes Whitepaper!
Grüße, Martin
Juni 23rd, 2010 at 13:54
Sehr interessanter Artikel. Aber was ist mit der versteckten Fanpage gemeint?? Außerdem bekomme ich doch nicht Facebookmarketing.de news nur weil mir ein Artikel von euch gefällt??
Juli 6th, 2010 at 06:05
[...] Einfach eine oder mehrere URLs eingeben, absenden. Zurück bekommt ihr eine Aufschlüsselung des Like-Buttons nach Shares, echten Likes und Kommentaren. Wichtig ist hier zu verstehen, dass die Anzahl der Likes [...]
Juli 25th, 2010 at 22:13
Ab wann sind die verstecken Fanpages unter Konto > ‘Seite verwalten’ zu sehen. Habe den Like-Button auf meiner Homepage eingebaut und dieses dann auch betätigt. Danke!
Juli 29th, 2010 at 09:33
[...] Ein Beispiel: Ein Facebook-Nutzer, der auf einer externen Website auf den Facebook-Like-Button klickt, informiert auf diesem Weg sein komplettes Kontaktnetzwerk innerhalb des Social Networks darüber. Das wird einige der Kontakte dazu veranlassen, selbst auf der vom Freund empfohlenen Site vorbeizuschauen. Richtig eingesetzt können Onlineangebote auf diesem Weg ihren Traffic signifikant erhöhen. [...]
Juli 30th, 2010 at 11:48
[...] eine genauere Anleitung benötigt wie der Like Button genutzt werden kann liest am besten unser Like Button Whitepaper. AKPC_IDS += "6144,";Ähnliche Themen auf FacebookMarketing.de:Facebook Fanpages mit Google [...]
Juli 30th, 2010 at 12:28
Das mit den versteckten Fanpages hab ich auch nicht verstanden. Wo wird denn diese angelegt und wie kann ich die User ansprechen die den gefällt mir Button geklickt haben? Es wird auch davon gesprochen das statt “Gefällt mir” auch ein “Empfehle ich” Button angezeigt werden kann. Wie denn das?
August 1st, 2010 at 05:24
Vielleicht wird aber auch der Like button irgendwann mal Kommentierbar. Ich könnte es mir schon vorstellen.
August 2nd, 2010 at 12:05
Hallo! Habe hier auch ein kleines Problem…
Like-Button ist soweit eingebaut und funktioniert, und Zugriff auf die versteckte Fanseite habe ich auch.
Aber wenn ich da etwas poste dann wird das bei den Fans nicht angezeigt!
Es funktioniert nur dann, wenn ich ein Link anhänge. Nur scheint es nicht auf der Pinnwand der Fans, sonder unter dem Punkt “Links”… und da schaut man halt nicht oft rein…
Mir als Administrator der Fanseite wird die Meldung auf der Pinnwand unter “Neueste Meldungen” angezeigt… Den Fans aber nicht!
Hat es jemand von euch schon soweit hingekriegt, dass es richtig funktioniert?
August 5th, 2010 at 11:14
[...] der Einführung des Like-Buttons hegen viel Facebook Nutzer ein stilles Bedürfnis: Sie wollen nicht nur ausdrücken können, was [...]
August 22nd, 2010 at 01:33
ZITAT:
“Wer als „Layout Stlye“ die Version „button_count“ ausgewählt hat, muss manuell für genug Platz um den Button herum sorgen. Das ist natürlich eigentlich völlig widersinnig, denn dann könnte man auch gleich die große Version einbinden. Trotzdem beschreibe ich hier, wie es gemacht wird: Man muss den fb:like-XFBML-Tag in ein HTML-Element einbetten, das per CSS eine Höhe von 110 Pixeln und im optimalen Fall eine Breite von mindestens 325 Pixeln erhält. Ist diese Box, die den Button umgibt, kleiner als hier angegeben, wird das im JavaScript-generierten iFrame erscheinende Kommentarfeld teilweise abgeschnitten.”
Kann ich dafür einmal einen Beispielcode haben? Ich verwende für den button_count:
Denn ich krieg den abgeschnittenen Bereich einfach nicht gelöst. Optimalerweise würde ich gern der Like-Button gemeinsam mit dem Tweet-Button nebeneinander darstellen. Wenn ich hintereinander den obigen FB-code und den folgenden Code für den Tweet-Button eingebe:
Tweet
Dann schauts nicht gerade hübsch aus:
http://bit.ly/beKFET
Außerdem ist mir aufgefallen, dass die Zahl 54K (=54.000) angezeigt wird. Das ist doch vollkommen sinnfrei – müsste die bei der Erstimplementation nicht bei 0 liegen?
Danke!
September 10th, 2010 at 10:31
[...] wahre Erfolgsgeschichte, über die wir mehr als einmal berichtet haben. Unter anderem in unserem ausführlichen Whitepaper. Facebook hat seit der Veröffentlichung einiges an Feedback erhalten und veröffentlichte gestern [...]
September 10th, 2010 at 23:44
[...] Erfolg des Like-Buttons ist größer wie der des Tweet-Buttons von Twitter. Da die Konkurrenz für gewöhnlich möglichst [...]
November 5th, 2010 at 11:06
Woran kann es liegen, dass auf o.g. URL keine Gesichter eingeblendet werden (außer mein eigenes), trotz dass show_faces auf TRUE steht / layout = standard.
Januar 14th, 2011 at 12:03
Like Button Bug!
Ich integriere den Like Button auf meiner Webseite und bei Klick erscheint die Meldung dass mir die Webseite gefällt. Diese Medlung erscheint aber lediglich auf meiner Profilseite und nicht auf der Startseite, sodass der virale Effekt nicht wirklich ausgenutzt wird…meine Kontaktliste kann also nicht sehen, dass mir meine Seite gefällt, außer sie schauen sich mein Profil an.
Wenn ich z. B. auf dieser Seite auf Gefällt mir klicke erscheint es auf meiner Startseite und meine gesamten Kontakte können es sehen….
Hat hier schon jemand ähnliche Erfahrungen gemacht bzw. weiß warum das so ist?
Ich habe die Iframe als auch XFBML Variante versucht…bei beiden das gleiche Phänomen…An der Einbindung kann es nicht liegen, da bin ich mir zu 98% sicher dass ich alles richtig gemacht habe…
Viele Grüße
Klaus
Februar 9th, 2011 at 11:58
[...] zum Share-Button verfügbar findet sich dort nun nur eine Weiterleitung auf den Like Button bzw. “Gefällt mir” Button. Die Dokumentation findet sich auch nirgends in den Tiefen des Developer Wikis wieder und auch ein [...]
Februar 28th, 2011 at 08:46
[...] im stillen hat Facebook den Like-Button auch weiterentwickelt. Wer sich das Whitepaper von Facebookmarketing.de aus dem letzten Sommer anschaut, der sieht, dass der Like-Button dazumals einige defiziete hatte. [...]
Mai 6th, 2011 at 12:31
[...] Like Button (“Gefällt mir”-Button) und der Datenschutz sind bekanntlich keine großen Freunde. Nun gibt es neues Urteil zum Thema das [...]
Mai 9th, 2011 at 18:59
[...] Like Button (“Gefällt mir”-Button) und der Datenschutz sind bekanntlich keine großen Freunde. Nun gibt es neues Urteil zum Thema das [...]
Juli 8th, 2011 at 17:00
[...] Wir haben übrigens ein viel ausführlicheres Whitepaper zum Like-Button hier bei uns Blog. Wer genauere Informationen zu den einz… [...]