Share to Whatsapp Quelle: Screenshot whatsapp-sharing.com

Share to WhatsApp in die eigene Seite einbauen

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.

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.

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.

Facebook Twitter Google+ WhatsApp

von Florian Schmidt

Gründer von Netzleben. Studiert IT System Engineering am Hasso-Plattner-Institut in Potsdam. Kauft viel zu viel Technik online ein. Liebt Kekse.

Hinterlasse einen Kommentar

Kommentare

Ein anderer Button/Plugin?

Hi! Kennst du dann einen anderen WhatsApp Button/Plugin? Wie loest du es hier auf deiner Seite? (Du schreibst ja nicht Manuel auf jeder Seite die Url?)
Danke fuer deine Hilfe!
Marcelo

Hierauf antworten

schmidtflo

Hey Marcelo,

Ich nutze hier ja ein Content-Management-System, manuell muss ich die URLs also nicht eintragen. Ich habe in meinem Theme gesagt, dass er die aktuelle URL der Seite als URL nutzen soll. Damit wird das dann automatisch dort eingetragen, keine Handarbeit also ;-)

Hierauf antworten

Lutz

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 Mobilgerä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ß

Hierauf antworten