Facebook hat ziemlich genau ein Jahr nach der Einführung des Like-Buttons (Gefällt mir) das Sortiment der Social-Plugins um einen neuen Button erweitert. Mit dem Send-Button können Website-Besucher Beiträge nun gezielt an bestimmte Freunde senden. Facebook erfährt so noch mehr über die individuellen Beziehungen der Mitglieder.
Wie Ihr den Send-Button verwenden könnt, bzw. den Like-Button um die neuen Funktionen erweitert erkläre ich in diesem Beitrag.

So sieht der Senden-Dialog aus, wenn ein Besucher den Button benutzt

Den Facebook Send-Button „normal“ in die Website einbinden

Wie auch beim Like-Button steht auf developers.facebook.com/docs/reference/plugins/send ein Tool zur Verfügung mit dem Ihr den Send-Button generieren könnt. Ihr müsst lediglich die URL die ihr „senden“ möchtet eintragen und eine Schriftart festlegen. Anschließend erhaltet ihr folgendes Snippet:


<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send href="deine-url.xyz" font="arial"></fb:send>

Solltet Ihr bereits ein anderes Facebook-Social-Plugin wie die Like-Box oder den Like-Button eingebunden haben, so nutzt ihr bereits die Facebook-JavaScript-API. In diesem Fall reicht es den Button ohne JavaScript einzubinden.


<fb:send href="deine-url.xyz" font="arial"></fb:send>

Den Gefällt-Mir-Button um die Senden-Funktion erweitern

Wenn Ihr bereits den Like-Button (Gefällt-Mir-Button) auf Eurer Seite verwendet, so könnt ihr ihn ganz einfach um die „send“-Funktion erweitern.

Dazu müsst ihr in den bestehenden Code des Like-Buttons folgendes Attribut einfügen.


send=true

Anschließend stellt Facebook beide Buttons nebeneinander dar. Es wäre sicherlich schöner gewesen die Buttons irgendwie zu kombinieren – aber vielleicht kommt das ja noch.

Der Code für einen Like-Button inkl. Send-Funktion sieht dann beispielsweise so aus:


  <fb:like href="deine-url.xyz" show_faces="false" width="450" layout="button_count" action="like" send="true"></fb:like>

Den Like und Send-Button in WordPress verwenden

Wenn Ihr den Button in WordPress verwenden möchtet, so müsst Ihr den Permalink als URL angeben. Der Code inkl. Send-Button sähe dann beispielsweise so aus:


  <fb:like href="<?php echo get_permalink(); ?>" show_faces="false" font="lucida grande" width="450" layout="button_count" action="like" send="true"></fb:like>

Der Button scheint Probleme mit einem Permalink in einer lokalen Serverumgebung wie MAMP zu verursachen. Bei mir wurde der Button erst online angezeigt.

Sprache festlegen

Wenn Ihr Probleme mit der Sprache des bzw. der Facebook-Plugins haben solltet, so schaut nach ob Ihr die Facebook JavaScript-API richtig eingebunden habt. Für gewöhnlich wird nämlich die englische Variante eingebunden. Um die Buttons auf Deutsch anzuzeigen müsst ihr das nachfolgende Snippet verwenden.


<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>

Bekanntes Problem im Internet Explorer 7/8

Im Internet Explorer 7 bzw. 8 wird der Button häufig nicht angezeigt. Sollte das bei euch der Fall sein, so achtet darauf, dass ihr die Facebook-JavaScript-API vor dem Like-Button eingebunden habt. Also nicht im Footer. Mehr dazu findet ihr in diesem Artikel.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. stefan
    schrieb am 05.08.2012 um 21:58 Uhr:

    Hi, ne kurze frage, bin kein pro und hab ne neue website und möchte dort den like button auch einbinden!
    klappt das hiermit auch? http://www.gefaelltmirbuttoneinbinden.com
    hab das über google gefunden.. weiss aber nicht wie seriös das ist..
    wäre echt nice wenn das so einfach klappt..
    gruß, stefan

    Antworten
  2. Nils
    schrieb am 24.04.2012 um 17:52 Uhr:

    Hallo!

    Auch ich möchte den SEND-Button nutzen und habe mir den Code auf der FB-Seite erstellen lassen …

    Leider nimmt der Button immer das Hintergrund-Bild bzw. ein bestimmtes Bild als Vorschaubild …!??

    Wie kann ich dort das richtig zu verwendende Bild als Vorschaubild eintragen und/oder wie kann ich selbst ein Bild festlegen, welches angezeigt werden soll?!?

    DANKE!

    Nils

    Antworten
  3. Facebook-Problem? Like-Button auch im IE7/IE8 anzeigen | kulturbanause blog
    schrieb am 25.08.2011 um 07:58 Uhr:

    […] Bitte beachtet, dass beide Snippets je nach Bedarf noch individualisiert werden müssen. Mehr darüber erfahrt ihr hier. […]

    Antworten
  4. Matthias
    schrieb am 29.04.2011 um 00:25 Uhr:

    Wirklich schöner Beitrag. Klingt für manche Dinge ganz praktisch, aber leidet bei zu vielen Buttons nicht irgendwann die Übersicht? Besser wäre hier doch eine Lösung wie bei Flattr, die auch auf mehrere Klicks reagiert.

    Antworten
  5. broesel
    schrieb am 28.04.2011 um 16:47 Uhr:

    Um den Senden-Button in die Like-Box einzufügen, soll ich entsprechend Deinem Beitrag das Snippet einfügen. Aber wo genau? Bei mir wird der Senden Button direkt über der Like-Box angezeigt. Ich kann damit leben, aber vielleicht gibts ja doch eine Lösung, damit der Sende-Button innerhalb der Box angezeigt wird oder ich habs einfach falsch eingefügt.

    Danke schon mal für den guten Bericht. Gruß.

    Antworten
    • Jonas Hellwig
      schrieb am 28.04.2011 um 17:35 Uhr:

      @Broesel: Du kannst den Senden-Button nur in den Like-Button integrieren. Nicht in die Like-Box. Wenn du die Like-Box verwenden möchtest, solltest du den Send-Button einzeln einbinden. Nur die JavaScript-API ist dieselbe.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →