Website-Inhalte per WhatsApp-Nachricht empfehlen – WhatsApp Sharing Button

Der Instant-Messaging-Dienst WhatsApp erfreut sich größter Beliebtheit und wird wahrscheinlich von den meisten von euch eingesetzt. Mit Hilfe des sog. »URL Schemes« von WhatsApp kann eine Nachricht erzeugt und anschließend manuell versendet werden. Es ist also möglich einen Button in die Website zu integrieren, über den der Link zum aktuellen Beitrag über WhatsApp verschickt werden kann. In diesem Beitrag erfahrt ihr, wie ihr das URL Scheme von WhatsApp einsetzen könnt, und welche Einschränkungen es gibt.

WhatsApp URL Scheme

Das URL Scheme zum Erzeugen einer neuen Nachricht ist denkbar einfach aufgebaut. Es beginnt mit whatsapp://send?, anschließend folgen optionale Parameter. Wenn mehrere Parameter verwendet werden, müssen sie über & getrennt werden.

Verfügbare Parameter

Einschränkungen

Das URL-Scheme funktioniert momentan nur unter iOS. Andere Betriebssysteme wie beispielsweise Android versuchen den Link im Browser zu öffnen. Ich freue mich über eure Info in den Kommentaren wenn sich in diesem Bereich etwas weiterentwickelt hat. Bis dahin bleibt uns nichts anderes übrig als den Link exklusiv für Apple-Geräte anzuzeigen.

Beispiel: WhatsApp-Button

Wenn ihr einen Button in eure Website integrieren möchtet, der eine neue Nachricht mit Text und Link erzeugt, dann sieht der Aufbau in etwa so aus:

<a href="whatsapp://send?text=Ich%20habe%20einen%20interessanten%20Blog%20f%C3%BCr%20dich%20entdeckt%3A%20http%3A%2F%2Fblog.kulturbanause.de">Per WhatsApp empfehlen</a>

Beispiel anzeigen

Wenn ihr den Link (auf einem Apple-Gerät) anklickt, öffnet sich WhatsApp. Hier seht ihr eine Liste der letzten Chats. Alternativ kann in Gruppen oder im gesamten Adressbuch nach dem gewünschten Kontakt gesucht werden.

Funktionsweise von links nach rechts: 1. Auswahl des Kontakts, 2. Bestätigung, 3. Nachricht
Funktionsweise von links nach rechts: 1. Auswahl des Kontakts, 2. Bestätigung, 3. Nachricht

Nachdem ihr einen Kontakt ausgewählt habt, müsst ihr noch bestätigen, dass die Nachricht gesendet werden soll. Anschließend öffnet sich eine neue Nachricht mit vorgeschriebenem Text. Hier können noch Änderungen vorgenommen werden.

Auswahl eines Kontakts

Mithilfe des abid-Parameters ist es möglich einen bestimmten Kontakt aus dem Adressbuch für den Nachrichtenversand auszuwählen. Der Aufbau des Links sieht dann z. B. so aus:

<a href="whatsapp://send?abid=256&text=Ich%20habe%20einen%20interessanten%20Blog%20f%C3%BCr%20dich%20entdeckt%3A%20http%3A%2F%2Fblog.kulturbanause.de">Per WhatsApp empfehlen</a>

Bei einem Klick auf den Button öffnet sich wie gewohnt WhatsApp. Die Auswahl des Kontakts wird jedoch übersprungen. Es erscheint direkt der Chat mit ggf. vorgeschriebener Nachricht.

Nachteile der Adressbook-ID

Im Umfeld von Apps mag die Auswahl eines Adressbuch-Kontakts sinnvoll sein, für Websites kann ich keine sinnvolle Nutzung erkennen. Das Problem ist, dass sich die ID nur auf das Adressbuch des jeweiligen Anwenders bezieht. Es ist momentan nicht möglich eine Telefonnummer oder eine globale ID anzugeben. Wenn hierfür ein Parameter nachgerüstet wird, wäre es möglich auf der Kontakt-Seite einer Website neben E-Mail und Telefon auch die WhatsApp-Nummer anzuzeigen und zu verlinken. Das wiederum kann durchaus sinnvoll sein und ähnelt stark der Verlinkung von Telefon- und Skype-Nummern oder aufgewerteten E-Mail-Links.

ABID unter OSX in Erfahrung bringen

Falls ihr doch herausfinden möchtet wie die ID eines Adressbucheintrags lautet, hilft euch hoffentlich folgende Anleitung weiter. Leider ist es nicht ganz trivial die ID des Adressbuch-Kontakts in Erfahrung zu bringen. Es sind mehrere Schritte notwendig:

  1. Stellt in den »Chat-Einstellungen« von WhatsApp ein, dass Backups über die iCloud von Apple gesichert werden
  2. Synchronisiert euer iPhone mit der iCloud und mit dem Computer (Mac)
  3. Auf dem Computer findet ihr unter Festplatte/Benutzer/[BENUTZERNAME]/Library/Mobile Documents Folder den Ordner der iCloud
  4. Wählt hier den Ordner für WhatsApp aus und wechselt anschließend in Accounts/[EURE-TELEFONNUMMER]/backup
  5. Erstellt eine Kopie der Datei ChatStorage.sqlite
  6. Öffnet ChatStorage.sqlite mit dem SQL Lite Browser
  7. Wählt oben »Browse Data« aus
  8. Wählt in der Auswahlliste darunter »ZWACHATSESSION« aus. Ihr seht eine Liste der letzten Chats des Backups
  9. Scrolled die Tabelle nach rechts um nach Namen filtern zu können, auf der linken Seite findet ihr die Spalte »ZCONTACTABID«. Hier könnt ihr die dreistellige ABID ablesen

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 – 22 Kommentare

  1. Torben Kania
    schrieb am 04.10.2018 um 16:47 Uhr:

    Hallo

    Ich würde gerne so einen WhatsApp Button in meiner Email Signatur einfügen.
    Wie würde jetzt der Link dazu aussehen wenn mir jemand direkt nachdem er zum Beispiel die Email gelesen hat mir per WhatsApp schreiben möchte ?

    Das funktioniert leider nicht wirklich
    https://api.whatsapp.com/send?phone=436603153642

    Hat jemand einen Tipp für mich ?

    Danke

    Antworten
  2. nandhan
    schrieb am 27.05.2017 um 04:59 Uhr:

    Hallo!

    Auf der oben genannten Homepage ist bereits ein Link zu Facebook:
    DER funktioniert „immer“, also auf SmartPhones, auf Tablets und auf Rechnern.

    Diesen möchte ich nun ergänzen durch einen zusätzlichen Link zu Whatsapp, jedoch so, dass er nur auf SmartPhones / Tablets (und nicht auf Rechnern) erscheint.

    Kann jemand sagen, wie man den Link zu Whatsapp dann auf den Rechnern ausblendet, bzw. nur auf SmartPhones / Tablets einblendet?

    Vielen Dank für eine „vollständige“ Quelltext-Angabe!

    Antworten
  3. Artur
    schrieb am 15.05.2017 um 11:21 Uhr:

    Hallo Jonas.

    Nachdem ich mir auch ein bisschen den Kopf bei diesem Thema zerbrochen haben, bin ich auf eine Lösung für den Whatsapp-Direktkontakt gestoßen:

    Und zwar scheint es tatsächlich einen offiziellen API-Link zu geben:
    https://www.whatsapp.com/faq/en/general/26000030

    Konkret sieht der Whatsapp href-Link dann folgendermaßen aus:
    https://api.whatsapp.com/send?phone=+49151987654321

    Wichtig ist hier die internationale Ländervorwahl (im Beispiel die +49)
    Das ganze habe ich auf einem iphone7 erfolgreich getestet.

    Antworten
  4. Reinhard
    schrieb am 02.07.2016 um 12:33 Uhr:

    Hallo!

    Auf der oben genannten Homepage ist bereits ein Link zu Facebook:
    DER funktioniert „immer“, also auf SmartPhones, auf Tablets und auf Rechnern.

    Diesen möchte ich nun ergänzen durch einen zusätzlichen Link zu Whatspp, jedoch so, dass er nur auf SmartPhones / Tablets (und nicht auf Rechnern) erscheint.

    Kann jemand sagen, wie man den Link zu Whatsapp dann auf den Rechnern ausblendet, bzw. nur auf SmartPhones / Tablets einblendet?

    Vielen Dank für eine „vollständige“ Quelltext-Angabe!

    Antworten
  5. Mathias Schopmans
    schrieb am 07.06.2016 um 17:45 Uhr:

    Leider scheint das Protokoll noch nicht im offiziellen WhatsApp-Desktop-Client (https://www.whatsapp.com/download/) implementiert worden zu sein. :(

    Antworten
  6. Wolfgang
    schrieb am 07.06.2016 um 10:23 Uhr:

    Hallo Jonas,
    habe den link in meine App eingbaut (HTML5 in xCode importiert)
    Link:
    whatsapp://send?text=Ich%20habe%20eine%20interessante%20HalalApp%20f%C3%BCr%20dich%20entdeckt%3A%20https%3A%2F%2Fitunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1095727157&mt=8

    Die App öffnet WhatsApp aber es ist keine Nachricht zu sehen.
    Kannst Du da helfen?

    Gruss
    Wolfgang

    Antworten
  7. Frank
    schrieb am 18.03.2016 um 18:30 Uhr:

    Hallo,
    super Website. Viele tolle Tipps. Bin regelmäßig hier.
    Der Link funzt bei mir im Samsung Galaxy S6 auch.

    Antworten
  8. Alexander
    schrieb am 26.01.2016 um 13:20 Uhr:

    „Es ist momentan nicht möglich eine Telefonnummer oder eine globale ID anzugeben. Wenn hierfür ein Parameter nachgerüstet wird, wäre es möglich auf der Kontakt-Seite einer Website neben E-Mail und Telefon auch die WhatsApp-Nummer anzuzeigen und zu verlinken. “

    Hi Jonas,

    gibt es dazu inzwischen was neues?

    VG

    Alexander

    Antworten
  9. Detlef Schnittke
    schrieb am 13.10.2015 um 18:52 Uhr:

    Wäre eine schöne Sache, ist aber – wie die Empfehlung per E-Mail-Formular – bei kommerziellen Seiten abmahnfähig (vom website-Betreiber initiierte Werbung ohne dazu erteilte Erlaubnis des letztendlichen Empfängers)

    Antworten
  10. SapuSeven
    schrieb am 06.01.2015 um 21:10 Uhr:

    Bei meinem Samsung Galaxy Ace 2.3.6 funktioniert es mit Opera Mini und Dolphin Browser Mini einwandfrei.

    Antworten
  11. Anklickbare Telefonnummern – Telefonate, FaceTime- oder Skype-Anrufe direkt über die Website ermöglichen | kulturbanause® blog
    schrieb am 13.11.2014 um 14:31 Uhr:

    […] Es ist auch möglich WhatsApp zu nutzen. Da in diesem Zusammenhang einige Dinge beachtet werden müssen, lest bitte diesen Artikel: Website-Inhalte per WhatsApp-Nachricht empfehlen – WhatsApp URL Scheme […]

    Antworten
  12. karsten
    schrieb am 18.09.2014 um 19:13 Uhr:

    Das Samsung S3 mini mit Android 4.2.2 ruft WhatsApp korrekt auf und läßt einen Kontakt wählen, Text kommt auch perfekt an.

    Danke für den Tipp!

    Antworten
  13. Nathalie
    schrieb am 10.09.2014 um 09:14 Uhr:

    Huawei P7-L10 mit Android 4.4.2 funktioniert es auch reibungslos. Scheint also mit neueren Android-geräten durchaus zu laufen.

    Antworten
  14. David
    schrieb am 23.07.2014 um 17:44 Uhr:

    Auf Nexus 5 mit Android 4.4.4 klappt gehts 1a.

    Antworten
  15. Ingo
    schrieb am 12.07.2014 um 09:09 Uhr:

    Ich habe es gerade mit Windows Phone 8.1 (Nokia Lumia 630) probiert. Da wird dann zwar WhatsApp geöffnet, aber die Nachricht wird nicht vorausgefüllt … Schaaaade :-)

    Antworten
  16. René
    schrieb am 11.07.2014 um 16:31 Uhr:

    Moin Jonas,

    auf dem Nexus 5 mit KitKat geht es nicht.

    Antworten
  17. Stefan
    schrieb am 11.07.2014 um 12:20 Uhr:

    Auf meinem galaxy S3 mit FireFox kommt nur ein Hinweis das keine Anwendung gefunden wurde. Ich bekomme nur einen Suchen Befehl der mich in den Playstor verweist zu meinen Apps.

    Antworten
    • Jonas Hellwig
      schrieb am 11.07.2014 um 13:07 Uhr:

      WhatsApp ist aber installiert, oder? Dann wäre das ein weiteres Verhalten was evtl. mit Firefox zu tun haben könnte …

      Antworten
  18. Frank
    schrieb am 11.07.2014 um 10:00 Uhr:

    Bin da neulich schon mal drübergestolpert und bin davon ausgegangen das es ein Fake war. Offensichtlich nicht :D

    Danke für den Beitrag.

    VG
    Frank

    Antworten
  19. Adi
    schrieb am 11.07.2014 um 09:29 Uhr:

    Bei meinem android handy samsung galaxy s4 funktioniert dein beispiel button! Lg adi

    Antworten
    • Jonas Hellwig
      schrieb am 11.07.2014 um 09:54 Uhr:

      Ah! Das ist sehr erfreulich. Vielen Dank für die Info, ich warte noch ein wenig das Feedback ab und passe den Artikel dann ggf. an.

      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 →