Als ich gestern von einem Leser auf Twitter gebeten worden bin, ein WhatsApp Share Button einzubauen, habe ich diesen Input gleich benützt um hier einen keine Anleitung zu schreiben. Zuerst einmal – ab sofort gibts unten nach jedem Beitrag einen „kleinen“ Button mit der Beschreibung „Teilen via Whatsapp“. Ich wollte dazu kein Plugin verwenden, darum zeige ich hier kurz wie man schnell und einfach und ohne Plugin so ein WhatsApp Link einbaut.

Und jetzt zeige ich euch mal kurz wie ich das gemacht habe – eigentlich ist es ja sehr einfach.

1. Button Platz suchen
   Zuerst sucht man sich den Platz im Template aus, wo man den Button gerne hinhaben möchte
2. Button designen
   Als nächstes designt man den Button – hier beim Chefblogger Blog habe ich diesen kurz gezeichnet
   

   Oder ihr überspringt diesen Schritt und macht ein einfachen WhatsApp ShareLink – auch das geht.

3. Code einbauen
   Die Buttonfunktion ist eigentlich nichts anderes als ein Link der die WhatsApp Applikation anspricht und auslöst. Dann müsst ihr nur noch die Leerzeichen umwandeln zu %20 (HTML Code) umwandeln. Zum Beispiel sieht dann der Link so aus
   whatsapp://send?text=Ich%20habe%20einen%20interessanten%20Artikel…

   Dann packt ihr das noch in den A Tag ein und verbindet es mit dem Bild

4. Fertig
   So fertig ist diese „Hexerei“ – einfach das Templatefile wieder hochladen und dann ist es drinn

Fazit

Ihr seht es ist gar nicht mal so schwer so einen Button kurz selbst einzubauen. Übrigens nur die Apple Handys können damit umgehen – für die Androidaner funktioniert diese Lösung (soweit ich weiss) nicht – aber ich bin ja kein grosser WhatsApper darum könnte ich hier falsch liegen.

Übrigens wer gerne diesen Button nur angezeigt haben möchte, wenn man mit einem iOS Gerät zugreift, der könnte das ganze mit einem Javascript erweitern

1

(navigator.userAgent.match(/(iPhone)/g)) ? $(".whatsappl").fadeIn() : null ;

Und dann einfach den Linkcode erweitern mit

1

class="whatsappl" style="display:none;"

Aber da muss man schon mehr wissen was man tut 🙂

Denkt daran – wie immer gilt auch hier – macht zuerst ein Backup bevor ihr was an eurem Design ändert. So habt ihr eine Kopie wenn etwas schief geht 🙂