Die Teilen-Buttons, sei es mit Facebook, Twitter oder Google+, kennt jeder. Aber auch für WhatsApp kannst du solche Buttons erstellen. Wie das geht, zeige ich dir in diesem Beitrag.
Dieser Artikel wurde zuletzt vor über einem Jahr aktualisiert. Die Inhalte könnten inzwischen nicht mehr aktuell sein.
Als Link
Links werden bei HTML in dem Format <a href="http://netzleben.com">Netzleben</a> erstellt. Hierbei zeigt der Inhalt des Attributes href auf die zu öffnende URL. Allerdings können hier nicht nur http(s)-Links untergebracht werden, auch andere Protokolle (der Teil vor dem ://) sind möglich. Am bekanntesten dürften hier noch mailto-Links sein. Aber auch direkt mit Anwendungen verknüpfte Protokolle gibt es, beispielsweise WhatsApp. Als Inhalt (der Teil nach dem ://) wird hier send verwendet, plus dem zu versendenden Text als Parameter. Der Text muss dazu URL-Encodiert sein, was zum Beispiel mit diesem Tool machbar ist (alternativ geht natürlich auch die Funktion in beispielsweise PHP).
Ein konkretes Beispiel wäre also das Folgende:
<a href="whatsapp://send?text=Besuch%20netzleben.com">Per WhatsApp teilen</a>Sobald du nun mit deinem Mobilgerät auf den Link klickst öffnet sich WhatsApp und du kannst den Kontakt auswählen, zu dem gesendet wird. Natürlich kannst du den Text vorher noch einmal bearbeiten. Das Ganze funktioniert unter Android und iOS, am PC passiert natürlich nichts.
Als Button
Das Ganze kannst du jetzt natürlich in einem Button verpacken. Bequemer ist es da aber, einen Button im Stile vom Facebook-Teilen-Button erstellen zu lassen. Dies geht auf der Seite whatsapp-sharing.com. Du kannst den Button-Text, den Text zum Teilen und die URL dazu angeben. Am Ende musst du das fertige JavaScript-Schnipselchen in deine Website einbinden, an der Stelle wo später der Button stehen soll. Außerdem musst du noch eine kleine JavaScript-Datei einbinden und am Ende der Seite noch einen Codeblock platzieren, damit dies überhaupt funktioniert. Die entsprechenden Daten dazu findest du natürlich auf der Seite.
Leider ist die Website inzwischen nicht mehr erreichbar. Du musst dir den Button also selbst mit dem oben geschriebenen HTML-Code bauen. Sieht aber im Normalfall eh schöner aus, da du es so perfekt in das Design deiner Seite einbinden kannst, so wie bei uns unter diesem Text.
Fazit
Eine sehr sinnvolle Möglichkeit, die eigene Seite bzw. Blogbeiträge zu teilen, schließlich sind immer mehr Menschen auch mobil im Web unterwegs. Für mich ist dieser Button mobil gleichwertig wie die Facebook- und Twitterbuttons. Am PC würde ich ihn aber mittels Media-Query ausblenden lassen.
- # Webentwicklung
- # Social Media