WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Anleitung – Wie baut man ein WhatsApp Sharebutton ein

von | Dez 13, 2016 | Allgemein | 4 Kommentare

Schlagwörter: Anleitung - featured - WhatsApp

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 🙂





4 Kommentare

  1. Urs E. Gattiker - DrKPI, #BrandRank, #BlogRank

    Interessanter Beitrag Eric

    Aber warum nicht einfach ein Plugin nutzen welches den WhatsApp Button schon drin hat. Gibt es … wir haben diese eingebaut.
    Das gute ist, es zeigt den Button nur, when man die Webseite im Mobile Browser besucht.
    Dann muss ich nicht programmieren 🙂
    Herzlichst
    Urs

    Antworten
    • Eric-Oliver Mächler

      nun das ist ein artikel für die technik leute unter meinen lesern – darum gibts auch keine plugin empfehlung. natürlich kann man sowas einsetzen – aber jedes plugin mehr bremst wordpress massiv aus.

      Antworten
  2. Patrick Landolt

    Hallo Herr Mächler

    Vielen Dank für diese Anleitung! Habe schon lange danach gesucht.
    Wollte schon immer dies auf meiner Website einbauen!
    Werde dies demnächst ausprobieren.

    Antworten
    • Eric-Oliver Mächler

      dann viel spass damit 🙂 und bis bald wieder

      Antworten

Antworten auf Urs E. Gattiker - DrKPI, #BrandRank, #BlogRank Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert