Implementing the WhatsApp Share Button in HTML

WhatsApp now (2014) offers a share button. The button offers a very handy way to share an article about WhatsApp. That interested me a lot and I took a closer look at the button.

How to do that?

Behind the whatsapp button is a simple link, which creates a so-called native deeplink directly into the WhatsApp app and passes a text to the app. And this link can be built into your own website like this:

<a href=”whatsapp://send?text=Text durch native Deeplink!”>Send>/a>

What does it look like?

After clicking on the link, WhatsApp opens with the content behind ?text . This will look like this:

What to look out for?

Meanwhile the button works for iOS as well as for Android and Windows Mobile and on Desktop as well.

During the implementation it must also be ensured that WhatsApp buttons are not stolen from third parties for whom the copyright has not been clarified.

Conclusion

A really simple and effective remedy. In contrast to the Facebook button, you don’t even need a lot of Javascript, but use the native functions of the operating system. So the possibility is very lightweight and fits perfectly to a native mobile app like WhatsApp.

By the way

Join the Conversation

22 Comments

  1. “Worauf ist zu achten?

    Inzwischen funktioniert der Button sowohl für iOS als auch für Android. Ihr dürft aber trotzdem den WhatsApp Button nur den entsprechenden Nutzer anzeigen.”

    Genau das ist mein gegenwärtiges Problem. Wie kann ich es nur Usern anzeigen, die auch WhatsApp instaliert haben? Bei jemandem der kein WhatsApp hat öffnet sich eine neue Seite mit totem Link.

  2. Und wo sind jetzt die Nachteile? Dachte bei der Überschrift ich würde was neues, oder mir unbekanntes erfahren, aber der Artikel ist einfach zu schwach. Es wurde nicht mal ganz recherchiert wer der Besitzer ist.
    Aber nun mal zu den Vorteilen, benutze WA+ schon seit 2 Jahren.
    – Rechte sind die selben wie bei der Standard App.
    – Teuer?! Man muss ja die Plus Widget Funktion nicht kaufen. Mittlerweile hat man ja ein Standard Widget.
    – Kopie? Wie nennt man das doch gleich wenn die Kopie besser ist als das Original?
    – Was geschieht mit den Daten? Naja das übliche. Google, Facebook, NSA, BND und wer sonst noch will, wird das schon speichern. Was kümmert mich da ein Spanier der in Holland lebt.
    (By the way: Es war vor ein paar Jahren, Rathäusern erlaubt personenbezogene Daten, jedes Einwohners zu verkaufen. Werbegesellschaften haben sich gefreut. Zum Glück wurde das Gesetz widerrufen.)

    Vorteile von WA+:
    Man kann jede Schrift- Bildgröße bearbeiten. Jede Farbe und Transparenz. Header Body alles einzeln. Außerdem gibt es coole Skins für jeden Geschmack. Farbe vom App Symbol, Farbe App Symbol in der Notification Bar.
    UND: man bekommt schon Monate früher als beim Standard neue Funktionen. Z.B. Zahl am WA Zeichen für ungelesene Nachrichten.
    Für experimentierfreudige nur zu empfehlen.

    1. Hey,

      ich bin mir nicht sicher, ob du bei mir im richtigen Artikel gelandet bist. Es geht hier darum den WhatsApp Button einzubinden. Ich erzählte gar nichts über WA+.

      Wie bist du auf diesem Artikel gelandet?

      Cheers,
      Klaus

  3. Ich habe den Link auf der Website eingebaut, es führt auf eine leere Seite, jedenfalls ist da nichts von WhatsApp zu sehen. Kann es sein, dass mein Andriod Smartphone zu alt ist (auch der Browser)? Das Smartphone habe ich vor 4 Jahren gekauft.

    Für mich wäre es interessant, da die Kunden mir die Fotos für die Karikatur gleich per WhatsApp von meiner Site aus senden könnten, da ja schon so sehr viele Leute Mobil surfen.

    1. Und leider eignet sich der Button nicht das deine Kunden ihnen etwas senden können. Der Button ist dafür da, damit du Nutzern anbieten kannst Inhalte deiner Website an ihre Freunde zu verschicken.
      Wenn du selbst Inhalte über whatsapp bekommen willst, dann reicht es ja aus deine Whatsapp Nummer bereitzustellen. Die können Besucher dann hinzufügen und dir etwas senden. Wie unter normalen Freunden.

    1. Es gibt eine ganz einfache Erklärung dafür. Sonderzeichen können in URLs nicht im Klartext versendet werden. Daher müssen sie (nach RFC 3986) durch ein Prozentzeichen (%) gefolgt von zwei Hexadezimalwerten codiert werden

      MIt PHP funktioniert das so:
      <?php
      $text = 'Der zu verschickende Text kommt hier rein.';
      echo 'Send‘;
      ?>

    1. Hey,

      ich kann keine Rechtsberatung machen. Aber vielleicht ließt du dir mal den letzten Link in meinem Eintrag durch. 🙂

      Ob es sich lohnt, muss jeder für sich selbst entscheiden – oder austesten.

      Cheers,
      Klaus

Leave a comment

Your email address will not be published. Required fields are marked *