info@netz-gaenger.de       📞 +49 151 / 28859057

Für Smartphones klickbare Telefonnummern auf Webseiten einbauen

Seit es Smartphones gibt, müssen Webdesigner und Webseitenbetreiber auch diese Endgeräte in ihre Überlegungen mit einbeziehen um Inhalte optimal darzustellen. So ist es zum Beispiel möglich, Telefonnummern so auszuzeichnen, dass sie direkt angeklickt und angewählt werden können. So geht’s… Telefonnummern klickbar machen

Telefonnummern klickbar machen mit dem <a>-Tag

Am einfachsten kann man einzelne Telefonnummern direkt mit HTML klickbar machen. Wichtig: Es ist darauf zu achten, dass die erste 0 der Vorwahl z.B. durch ein +49 in Deutschland (oder jeweils die passende Durchwahl in anderen Ländern) ersetzt werden muss. Der Code des Links sieht dann so aus:

<a href="tel:+49151999999999">+49 (0)151/999 999 999</a>

Das war’s auch schon. Durch den Zusatz „tel:“ im <a>-Tag können beispielsweise Android Handys und iPhones Telefonnummern direkt in die Telefon-App übernehmen. Somit wird der Anruf nicht zum lästigen Nummernkopieren.


Wie eine anklickbare Telefonnummer in Gutenberg einbauen?

Über den Gutenberg Editor fügt man klickbare Nummern problemlos über die Standard-Textblöcke ein. Text einfügen>Telefonnummer markieren>dann Link einfügen>und mit dem obenstehenden tel: versehen. Im Screenshot ist das Ganze dargestellt.


Wie fügt man klickbare Telefonnummern in Widgets einfügen?

In Sidebar Positionen wie dem Footer (z.B. wenn man eine klickbare Telefonnummer im Footer einer Website einfügen möchte) setzt man ein Text Widget ein und arbeitet auch dort wie oben beschrieben. Text einfügen>Telefonnummer markieren>dann Link einfügen>und mit dem obenstehenden tel: versehen. Im Screenshot ist das näher beschrieben.


Wie baut man eine klickbare Telefonnummer/Handynummer im Menü ein?

Auch im Menü lassen sich Telefonnummern klickbar einfügen, so dass diese auf einem Tablet oder Handy direkt die Telefon App aufrufen. Man fügt hierzu einen „individuellen Link“ ein.

Nach dem Einfügen ist dann bei einem klick oder tap auf die Telefonnummer eine direkte Nutzung der Telefon App möglich.


Skype Links für Smartphones auf Webseiten bereitstellen

Das gleiche geht übrigens auch mit Skypeanrufen:

<a href="skype:username?call">skype:username</a>

Klickbare Telefonnummern automatisch in WordPress einfügen

Smartphones sind heutzutage schon so weit, dass sie die meisten Telefonnummern automatisch erkennen. Daher ist es nicht nötig über eine Pluginlösung automatische Telefonnummern-Links einzufügen. Es macht Sinn an den wichtigen Stellen der Website der Anleitung in diesem Beitrag zu folgen und klickbare Links einzufügen. Für die restlichen Telefonnummern sollten die neuesten Smartphones eine automatische Erkennung ermöglichen.


Einen „Jetzt anrufen“ Telefon Button auf die WP Site setzen

Es gibt Pluginlösungen wie „Call Now Button“ lassen sich aufmerksamkeitsstarke Buttons in WordPress einfügen. Entweder über einfache Darstellung eines Telefonhörers unten an der Browserleiste oder aber auffälligere Buttons an beliebiger Position.


Verhindern von automatischer Verlinkung von Telefonnummern auf Smartphones

So wie mancher gerne sicherstellen möchte, dass Telefonnummern anklickbar sind, möchten manche Websitebetreiber vielleicht gerade verhindern, dass Telefonnummern direkt im Smartphone angeklickt werden können. Auch hierfür gibt es mögliche Lösungen.

Automatische Telefonnummernerkennung ausschalten

Es kann zum Beispiel ein Meta-Tag eingefügt werden mit dem Befehl, keine Telefonnummernerkennung zu erlauben. Dazu wird der folgende Code in den <head> Bereich der Website eingesetzt:

<meta name="format-detection" content="telephone=no">

Hat dir mein Beitrag geholfen?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 6

Letzte Version vom 28. Juni 2021 von Netzgänger
  • David

    Hallo René
    Vielen Dank für die super Anleitung habe gerade alles auf meiner Webseite und Email Signatur so umgebaut und funktioniert hervorragend!!! Grüsse

    Reply

  • Hartmut

    ist es möglich mit einer anklickbaren Tele-Nr. anstatt der Tele-App WhatsApp zu öffnen?

    Hintergrund ist die Möglichkeit, dass Kunden von der Website mit dem Smartphone eine Vorbestellung per WhatsApp schicken können.

    Reply

    • René Dasbeck Post author

      Es gibt die Möglichkeit Whatsapp Links einzubauen. Aber ich denke ob auf einem Smartphone der Link zu einer Telefonnummer automatisch in Whatsapp landet, wird eher eine Einstellung im Telefon selber sein.

      Reply

  • Kalin Botev

    Cool, danke für den Tip.

    Reply

  • Nomi

    Super Beitrag vielen Dank hab es mir viel Schwieriger vorgestellt. Hast es verdient bei Google als erster gefunden zu werden;-)

    Reply

  • David

    Direkt angewendet und habe mehr Anrufe erhalten. Super Tipp, danke.

    Reply

  • Markus

    Genau das habe ich gesucht. Allerdings war ich der Meinung, dass es hierfür einen bestimmten Begriff gibt und dass es nicht einfach nur klickbare Telefonnummer heißt.

    Reply

  • Dominik

    Vielen Dank für den Tipp
    Wenn ich den Code +49 (0)151 27 05 14 57….eingebe- erscheint die Tel. blau und unterstrichen….wie kann ich die Farbe, Schrift und Grösse ändern?

    Reply

  • Friemel

    Danke für den Tipp, könnte das sogar für meine Seite gebrauchen. Habe neulich schon alles an das responsive Design angepasst, aber an sowas habe ich bisher nicht gedacht.

    Reply

  • Mustafa Eryigit

    klasse. genau das habe ich gesucht. Vielen Dank

    Reply

  • Andi

    Endlich mal ne richtig praktische Anleitung für das Hobby Websiteprojekt, damit läßt sich ein Sonntag gut füllen.

    Reply

  • BruZZi

    hallo,

    noch ein versuch!
    Kann man den link mit Kontaktdaten bestücken sodass beim speichern der Nummer auch gleich die Adresse und Name usw. gespeichert werden?

    Wäre toll wenn ich hier hilfe bekommen könnte!

    Dankeschön!

    Reply

  • bruzzi

    der link funktioniert tadelos. ich würde jetzt gerne auch die kontaktdaten wie name anschrift usw einbetten sodass diese Daten mit im Kontakt gespeichert sind. Geht das?

    Danke

    Reply

  • Madeleine

    Der Artikel ist sehr informativ und leicht verständlich.
    Allerdings sehe ich das „Umleiten“ auf Skype als nicht ganz unbedenklich an, da es sich hierbei um einen kommerziellen Anbieter handelt ?!

    Reply

  • Andy

    Super…, danke für den interessanten Artikel. Ich werde Eure Anleitung für die nächste Überarbeitung der Webseite zur Hilfe nehmen- Auf alle Fälle finde ich es gut, wenn die Telefonnummern direkt vom Smartphone aus anklickbar sind, so erleichtert man den Besuchern und potentiellen Kunden die Kontaktaufnahme.

    Reply

  • Vitaliy

    Hallo!
    Ich habe gerade das „tel:“ auf einer der Sites eingebaut, teste es mit meinem Android und es scheint leider nicht zu funktionieren 🙁

    Gibt es evtl. Javascript-Lösungen oder Ähnliches? Danke!

    Reply

  • Thomas

    Das „tel:“ wirkt sich leider auf bei Desktop-Browsern aus. Klickt man auf die Nummer, so wird eine Abfrage nach einer externen Anwendung gemacht, wobei bei mir Skype angeboten wird.
    Das Plugin „Telephone Number Linker“ öffnet bei mir auf dem Smartphone nicht die Telefonfunktion, sondern bietet nur die Möglichkeit, die Nummer als neuen Kontakt zu speichern.

    Reply

    • Andre

      Man kann kann das „tel“ im CSS ansprechen und mit Hilfe von Media Queries und der CSS Eigenschaft display. Die passende Version anzeigen lassen. So kann man auch gleich noch die Nummer stylen, und sie wie nen Telefonbutton aussehen lassen.

      Reply

  • Michael

    Wie sieht es eigentlich mit dem Datenschutz bei der Einbindung von Skype aus? Muß das in die Datenschutzbedingungen aufgenommen werden?

    Werden da irgendwelche Daten an amerikanische Server gesendet?

    Reply

  • Elvotech

    Super danke für das gute und kleine Tutorial hatte es ganz vergessen wie es nochmal funktionierte. Man findet die einfachsten Sachen nicht mehr.

    Reply

  • Holieurope

    Haben wir auf der Webseite ebenfalls integriert, bis dato sehen wir noch keinen großen Nutzen. Ist ne feine Sache!

    Reply

  • Axel

    Danke super Erklärt, hatte ich gar nicht dran gedacht, dass man es so einem mobilen User erleichtern kann.

    Reply

Schreibe einen Kommentar

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