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)
PHILIPP ROTH
JENS WIESE
Ja! Auf diese Infos haben wir gewartet! Vielen Dank sagt die Brückenbande.
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.
Tolles Whitepaper!
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.
Hallo Michael, danke für diene ausführliche Erklärung!
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?
Hallo Lars,
hab gerade nachgeschaut und dich tatsächlich im Spam gefunden. Hab deinen ersten Kommentar jetzt freigeschaltet.
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.
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?
Ja, da has du Recht. Danke für den Hinweis. Deshalb bietet Facebook auch die Option an “Nutzername empfiehlt Beitrag X”.
@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? ….
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.
@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.
@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
@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.
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
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??
[...] 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 [...]
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!
[...] 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. [...]
[...] 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 [...]
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?
Vielleicht wird aber auch der Like button irgendwann mal Kommentierbar. Ich könnte es mir schon vorstellen.
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?
[...] der Einführung des Like-Buttons hegen viel Facebook Nutzer ein stilles Bedürfnis: Sie wollen nicht nur ausdrücken können, was [...]
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!