Как сделать ссылку на телефон HTML?
06.09.2018
Приветствую вас, дорогие друзья на сайте Impuls-Web!
На сегодняшний день, ввиду того, что количество пользователей, которые используют для просмотра сайтов мобильные устройства, постоянно растет, стало очень популярным размещение на страницах сайта кликабельных ссылок на телефонные номера.
Ссылка на телефон HTML дает возможность посетителю сайта, в случае, если его заинтересовало ваше предложение, сразу же позвонить по данному номеру и сделать заказ на приобретение товара или услуги.
Навигация по статье:
В этой статье я покажу вам, как сделать ссылку на телефон HTML, а так же покажу, как можно ее оформить при помощи CSS.
Как в Мобильной Версии ePN переделать Ссылку на Партнерскую
Протокол HTML5 для ссылок на телефон
Для того чтобы сделать ваш телефонный номер кликабельным его необходимо обернуть в тег <a>…</a> и в атрибуте href указать протокол tel и через двоеточие указать номер без пробелов и дефисов:
|
< a href = "tel:0955414642" > 095 - 541 - 46 - 42 < / a > |
Теперь клик по данной ссылке на телефон HTML будет восприниматься любым браузером на любом мобильном устройстве как команда к набору данного номера.
Решение проблемы с определением ссылки на телефон HTML на ПК
Показанную выше запись удобно использовать чтобы принимать заявки от посетителей с мобильных устройств. Но дело в том, что оформленная в таком виде ссылка на телефон HTML будет вызывать неудобство у тех пользователей, которые зашли на ваш сайт с компьютера. При клике по такой ссылке на ПК, в зависимости от браузера, будет выпадать ошибка, либо будет открываться для набора номера Skype или какая-то другая программа. Вряд ли кто-то из пользователей захочет позвонить вам на телефонный номер по Skype и такая функция, скорее всего, отпугнет клиента.
Для решения данной проблемы есть очень интересный скрипт. Но его использование немного затруднит добавление ссылки на телефон HTML.
1. На странице там, где вам нужно разместить телефонный номер, вставляем пустой блок с уникальным идентификатором. В моем случае phone-link:|
< div id = "phone-link" > < / div > |
|
<script> if ( /BlackBerry|iPhone|iPod|iPad|Android|IEMobile|webOS|Opera Mini/i . test ( navigator . userAgent ) ) { document . getElementById ( "phone-link" ) . innerHTML = '<span><a href="tel:0955414642 ">(095)541-46-42</a></span>' ; } else { document . getElementById ( "phone-link" ) . innerHTML = '<span>(095)-541-46-42</span> ' ; } </script> |
Данный скрипт проверяет, с какого устройства открыта станица вашего сайта и автоматически подставляет нужный вариант телефонного номера. Если пользователь просматривает страницу с мобильного телефона, то будет подставлена ссылка на телефон HTML. Если же пользователь открыл страницу с ПК, то будет подставлен телефон обернутый в тег <span>.
В случае если у вас сайт сделан на CMS, то вам нужно открыть для редактирования файл, в котором закрывается тег