Die Grenzen zwischen Webseiten und nativen Apps verschwimmen immer mehr. In diesem Artikel zeige ich, wie in einer ganz normalen Webseite Share-Buttons für WhatsApp und SMS realisiert werden können.
Als leidenschaftlicher Webentwickler verfolge ich interessiert, wie die Lücken zwischen normalen Webseiten, installierten WebApps und nativen Apps (z.B. für Android) immer weiter schwinden. Gerade auch Projekten wie Firefox OS von Mozilla, dass sich in den letzten beiden Jahren beeindruckend Entwickelt hat, sind diese Fortschritte zu verdanken. Eine Sache, die man als Webprogrammierer häufig vermisst, ist das Teilen von Inhalten, wie es z.B. unter Android möglich ist. In Firefox OS gibt es hierfür die WebActivities API, über die Inhalte geteilt werden können. Dabei werden dann automatisch alle Apps angezeigt, die den zu teilenden Datentyp, z.B. Text, unterstützten. Ganz wie unter Android und iOS also. Doch auch wenn daraus in Zukunft ein Webstandard werden soll, ist es noch nicht soweit und die Funktion bisher „Firefox OS only“. Genauso sieht es auch mit den konkurrierenden Web Intents aus. Für zwei der vermutlich meistgenutzten Sharing-Arten gibt es für die Zwischenzeit allerdings eine super einfache Lösung 🙂 .
So funktioniert das Teilen im Web
Die erste Möglichkeit ist das Teilen von WhatsApp-Nachrichten durch einen Link mit nachfolgendem Aufbau:
whatsapp://send?text=[Text]
[Text]
Der Platzhalter [Text] kann durch eine beliebige Nachricht ersetzt werden. Wichtig ist, dass diese encodiert wird, wie man es bei jeder URI tun muss. Hier zwei Beispiele wie man das automatisiert erledigen kann:
JavaScript (Browser, Node.js)
var text = escape('Alex: www.alexander-ploner.com');
PHP
$text = urlencode("Alex: www.alexander-ploner.com");
Beispiel
Hier ein komplettes Beispiel mit HTML. Das Link-Element könnte natürlich noch mit CSS gestaltet werden.
<a href="whatsapp://send?text=Alex%3A%20www.alexander-ploner.com">Per WhatsApp teilen</a>
Ergebnis: Per WhatsApp teilen
SMS
Auch das vorbereiten einer SMS per Link ist möglich. Hierzu wird der Protokoll-Handler „sms:“ nach diesem Muster verwendet:
sms:[Telefonnummern]?body=[Text]
[Telefonnummern]
Die Angabe von Telefonnummern ist optional. Mögliche Werte für den Platzhalter [Telefonnummern] sind eine einzelne Nummer wie +15105550101 oder mehrere, durch Komma getrennte Nummern wie +15105550101,+15105550102.
[Text]
Der Text ist ebenso optional und weißt das gleiche Format wie der Text für WhatsApp auf.
Beispiel
In eine Webseite könnte der Link dann z.B. so eingebettet werden:
<a href="sms:?body=Alex%3A%20www.alexander-ploner.com">Per SMS teilen</a>
Ergebnis: Per SMS teilen
Eine kleine Optimierung
Da man SMS- und WhatsApp-Nachrichten gewöhnlich nur von Smartphones (und teils normalen Handys) aus verschicken kann, macht eine Server- oder Client-seitige Prüfung des User-Agents, Sinn, so dass die entsprechenden Funktionen nur auf Geräten angezeigt werden, auf denen auch die entsprechende Unterstützung erwartet werden kann. Damit hätten wir dann auch den kleinen Nachteil dieser Methode angesprochen 😉 .
Weiterführende Links:
Hallo.
Sehr schön erklärt und in einer Zeit, in der immer mehr Siteaufrufe über Mobilgeräte stattfinden, nützlich und wichtig. Allerdings ist die eigentliche Aufgabe (die Du „kleinen Nachteil“ nennst) Mobilgeraät vom Desktop-PC zu unterscheiden hier nicht behandelt. Ein Link, der eine Fehlermeldung produziert ist sollte jeder Webmaster vermeiden.
Ein Ansatz zur Lösung ist hier genannt: http://mobiledetect.net/
Gruß
PS: Dein Javascript Spamfilter funktioniert nicht rhichtig
Danke für deinen Kommentar und den Link.
Ich hatte mich damals damit beschäftigt, da gab es zum Beispiel eine Variante über die Pixeldichte, die in WebKit-basierten Browsern nur über mobile Endgeräte abrufbar war. Die User-Agent-Strings hatten sich in der Zeit immer wieder geändert. Alles war sehr schwammig und zu wenig eindeutig, wie man wirklich effektiv und längerfristig einen mobilen Browser erkennen kann, daher habe ich dazu keinen Artikel veröffentlicht 😉 . Aber wie du schon zeigst, hierfür gibt es Frameworks und Tools, die regelmäßig aktualisiert werden, das wäre auch meine Empfehlung 🙂 .
Danke für den Hinweis. Ich habe das Kommentieren ohne Account eben getestet, mir ist nichts aufgefallen, vielleicht war zu der Zeit ein Plugin fehlerhaft. Der E-Mail-Versand ging jetzt allerdings einige Monate nicht, das ist jetzt aber endlich gelöst und ich sollte damit wieder schneller auf Kommentare reagieren 😉 .