kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Facebook: So nutzt ihr den neuen Send-Button

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

6 Kommentare

  1. broesel

    Verfasst am 28. April 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ß.

    • Jonas Hellwig

      Verfasst am 28. April 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.

  2. Matthias

    Verfasst am 29. April 2011 um 0: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.

  3. Nils

    Verfasst am 24. April 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

  4. stefan

    Verfasst am 5. August 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.