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.
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 till telefonnummer på hemsidan
Man kan styla länkar till 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; }
Jag uppskattar din kommentar
Under många år har jag lagt ner tid och engagemang på att hjälpa andra med deras wordpress-sida. Jag uppskattar all form av feedback för på så sätt så blir arbetet roligare och jag vet om det är uppskattat. Så varför inte skriva ett enkelt tack - om du fick tips för att lösa ditt problem eller löste det!
Tack för din återkoppling!
Karin