HTML/Tutorials/Links/klickbare Telefonnummern
Text-Info
- 10min
- einfach
- • Referenzieren in HTML
• Einstieg in HTML
Sie können Benutzern mobiler Geräte entgegenkommen, wenn Sie Ihre Telefonnummer auf Ihrer Webseite als Link veröffentlichen. Damit können diese Benutzer die Nummer einfach anklicken, anstatt die Nummer eingeben zu müssen.
Telefon-Verweise beginnen immer mit tel: (und ohne // dahinter). Der Verweis ist bei Anwendern nur ausführbar, wenn der Web-Browser das automatische Wählen unterstützt. Es ist sinnvoll, im Verweistext die Telefonnummer noch einmal explizit zu nennen.
Inhaltsverzeichnis
automatische Markierung von Telefonnummern steuern
Browser in mobilen Umgebungen versuchen, Telefonnummern zu erkennen und markieren diese entsprechend, sodass durch Klick oder Tap ein Programm geöffnet wird, das eine Telefonverbindung herstellt. Dieses Verhalten können Sie steuern.
Erlaubt sind die beiden content-Werte telephone=yes und telephone=no. Sie sollten die Erkennung von Telefonnummern nur unterbinden, falls auf Ihrer Seite viele Zahlen vorhanden sind, die fälschlicherweise als Telefonnumern erkannt werden.
Mithilfe dieses Attributs lässt sich die Formaterkennung für einzelne Elemente gezielt steuern.
Telefonnummer als QR-Code
Damit Anwender, die vor einem Monitor sitzen, noch schneller mit ihren mobilen Geräten auf eine Telefonnummer zugreifen können, kann man diese in einen QR-Code einbetten. Viele Smartphones mit Android oder iOS können QR-Codes allein mit ihrer Kamera-App auslesen, die als Standard mitgeliefert wird.
Den eigentlichen QR Code zu generieren ist eine Aufgabe, für die es diverse Online-Dienstleister gibt. Eine Auswahl finden Sie beispielsweise im Weblinks-Verzeichnis des QR-Code Artikels in der Wikipedia (abgerufen am 02.12.2022). Das nachfolgende Beispiel verwendete den Generator von Loresoft, weil sich damit besonders kleine QR-Code Grafiken erstellen lassen, in denen ein Punkt des QR-Code Musters nur ein einziges Pixel einnimmt. Die dort generierte PNG Datei wurde als 192 Bytes große PNG-Datei gespeichert und dann über einen Data-URI Generator laufen gelassen. Das Ergebnis ist eine 23x23 Pixel große Grafik, die als PNG 192 Bytes groß ist und als base64-codierte Data-URI lediglich 278 Stellen lang ist.
img {
image-rendering: pixelated;
width: 7em;
}
figure {
width: max-content;
text-align: center;
}
<h1>Ruf! Mich! An!</h1>
<p>24h erreichbar:</p>
<figure>
<img src="data:image/png;base64,iVBO...YII=">
<figcaption><a href="tel:+499123456789">+49-9123-456789</a></figcaption>
</figure>
Die Grafik ist nur 23x23 Pixel groß, wird aber durch die width-Angabe deutlich größer angezeigt. Normalerweise würde der Browser dafür das Ergebnis weichzeichnen (Anti-Aliasing), so dass kein QR-Code Reader dieser Welt noch etwas damit anfangen könnte, aber mithilfe der CSS-Eigenschaft image-rendering lässt sich das Anti-Aliasing deaktivieren und die Vergrößerung ist knackscharf. Diese Eigenschaft ist eine CSS-Übertragung des gleichnamigen SVG-Attributs, verwendet aber andere Werte!
Die vollständige Data-URI wurde für den Wiki-Artikel gekürzt. Schauen Sie in den Beispiel-Quellcode oder mit "ausprobieren" ins Frickl, wenn Sie die komplette URI sehen möchten.
Skype mit aktivem Link
Auch ein Skype-Anschluss kann so mit einem Klick aktiviert werden:
Des weiteren können folgende Query-Parameter an die URI angehängt werden, um diese Funktionen in Skype explizit auszulösen:
- call – Telefongespräch durchführen (Standard)
- chat – Chatgespräch starten
- userinfo – Profildaten in Skype anzeigen
- sendfile – Datei(en) an diesen Kontakt senden
- add – Diesen Kontakt zur eigenen Kontaktliste hinzufügen
- voicemail – Sprachnachricht hinterlassen
VoIP-Adresse
Möchte man anstelle von Skype einen anderen VoIP-Anbieter nutzen, so schreibt man folgendes:
