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

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

Und dann einfach den Linkcode erweitern mit

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 🙂

Über

Eric-Oliver Mächler

Seit 2005 bin ich ein aktiver Blogger. Ich kenne die Kniffe und die Tricks um einen Blog erfolgreich zu machen. Hier gebe ich diese kleinen Tricks gerne weiter und freue mich, wenn ich euch helfen kann. Hier erfährt man mehr über mich.

4 Kommentare

Hinterlass einen Kommentar