Der Facebook Like Button (Whitepaper)

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)

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageEmail this to someone

Es gibt 36 Kommentare

Deinen hinzufügen
  1. 2
    lars

    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.

  2. 4
    Michael van Laar

    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.

  3. 6
    lars

    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?

  4. 8
    Michael van Laar

    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.

  5. 11
    lars

    @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? ….

  6. 12
    Michael van Laar

    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.

  7. 13
    Michael van Laar

    @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.

  8. 14
    lars

    @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 ;)

  9. 16
    Martin

    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

  10. 19
    Uwe

    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!

  11. 20
    Facebook ist das neue Google: Über Abhängigkeiten und Nebenwirkungen » netzwertig.com

    […] 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. […]

  12. 22
    Uwe

    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?

  13. 24
    Andy

    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?

  14. 26
    Max

    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!

  15. 30
    Klaus

    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

+ Hinterlasse einen Kommentar