Gör ditt telefonnummer klickbart
Att länka till ett telefonnummer på webbsidan kan vara bra och moderna telefoner ringer automatiskt upp när man klickar på en sådan länk. Det är en smidig och bra funktion för dina besökare. Du slipper att markera texten och kopiera och sedan klistra in. Den hanteringen kan vara lite svår för många så det underlättar för besökaren om det räcker med att klicka.
På datorer fungerar det tyvärr sämre eftersom de flesta inte har en telefon på sin dator. Men för de som har så fungerar det så klart även där.
Principen är väldigt enkel
En vanlig länk ser ut så här <a href=”https://kobotolo.se”>kobotolo.se</a>
<a href="https://kobotolo.se">kobotolo.se</a>
En telefon-länk ser ut så här:
<a href="tel:1234567">Ring mig</a>Internationella nummer för länkar till telefonnummer
Om du vill ha ett internationellt nummer så ska du lägga till +46 för svenska nummer på vanligt sätt.
<a href="tel:+46500000000">Link text</a>
Många webbläsare på telefoner hittar telefonnummer och gör dem klickbara automatisk men det är alltid bra att ha kontroll över webbsidan.
Andra länkar som kan vara bra att veta om
- mailto: – skicka ett mail, se https://wp-akuten.se/lank-till-mailadress/
- callto: öppna Skype
- sms: – sänd ett SMS
- fax: – sänd ett fax
När automatiska telefonnummer ställer till problem
Det kan ibland bli ett problem när mobiler tolkar siffor som ett telefonnummer automatiskt. Det är ju inte alltid som en längre sifferserie är ett telefonnummer.
Ett exempel är en webbsida jag gjort där datum användes men tolkades som telefonnummer av mobiler är djurfrid.se. Där visas födelsedatum – dödsdatum och tyvärr tolkades det som ett telefonnummer på mobiler och blev klickbart.
Det kan man lösa genom att att lägga till lite kod som förhindrar att mobiler tolkar det som en länk till telefonnummer. Om du lägger till den här koden så behöver du vara noggrann med dina länkar och formatera dem som beskrivits ovan eftersom du stängt av den automatiska länk-konverteringen. Den här koden ska in i headern på din hemsida och den fungerar oavsett om du har en wordpress-sida eller ej.
<meta name="format-detection" content="telephone=no">
Styla dina länkar med telefonnummer på hemsidan
Man kan styla länkarna med telefonnummer som i Ring Karin. Koden fungerar på alla hemsidor förutom ikonen som hämtas från de inbyggda ikonerna i WordPress. Om du har ett annat system så behöver du ladda in ett annat ikon-bibliotek.
a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="tel:"]:before {
content: "\f525";
font-family:"dashicons";
color: brown;
width:20px;
display:inline-block;
}