kulturbanause Blog

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

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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

text

Vorausgefüllter Text der neuen WhatsApp-Nachricht. Der Text muss richtig codiert sein, damit es funktioniert. Eine Liste mit Tools zu diesem Zweck findet ihr hier.
abid
Apple-Adressbuch-ID eines Kontakts.

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

Links / Quellen:

I'm an iPhone developer, how can I integrate WhatsApp into my app?

Offizielle Information von WhatsApps zum Thema URL Scheme

Use WhatsApp’s URL Scheme with Drafts, Launch Center Pro, Or A Bookmarklet

Quelle für die Anleitung zum Thema ABID

URL Encoder

Suchergebnisse auf Best Web Design Tools

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!

Das könnte dich auch interessieren

22 Kommentare

  1. Adi

    Verfasst am 11. Juli 2014 um 9:29 Uhr.

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

    • Jonas Hellwig

      Verfasst am 11. Juli 2014 um 9: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.

  2. Frank

    Verfasst am 11. Juli 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

  3. Stefan

    Verfasst am 11. Juli 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.

    • Jonas Hellwig

      Verfasst am 11. Juli 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 …

  4. René

    Verfasst am 11. Juli 2014 um 16:31 Uhr.

    Moin Jonas,

    auf dem Nexus 5 mit KitKat geht es nicht.

  5. Ingo

    Verfasst am 12. Juli 2014 um 9: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 :-)

  6. David

    Verfasst am 23. Juli 2014 um 17:44 Uhr.

    Auf Nexus 5 mit Android 4.4.4 klappt gehts 1a.

  7. Nathalie

    Verfasst am 10. September 2014 um 9:14 Uhr.

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

  8. karsten

    Verfasst am 18. September 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!

  9. SapuSeven

    Verfasst am 6. Januar 2015 um 21:10 Uhr.

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

  10. Detlef Schnittke

    Verfasst am 13. Oktober 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)

  11. Alexander

    Verfasst am 26. Januar 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

  12. Frank

    Verfasst am 18. März 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.

  13. Wolfgang

    Verfasst am 7. Juni 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

  14. Mathias Schopmans

    Verfasst am 7. Juni 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. :(

  15. Reinhard

    Verfasst am 2. Juli 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!

  16. Artur

    Verfasst am 15. Mai 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.

  17. nandhan

    Verfasst am 27. Mai 2017 um 4: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!

  18. Torben Kania

    Verfasst am 4. Oktober 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

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.