Как сделать ссылку на телефон в html

Как сделать ссылку на телефон HTML?

На сегодняшний день, ввиду того, что количество пользователей, которые используют для просмотра сайтов мобильные устройства, постоянно растет, стало очень популярным размещение на страницах сайта кликабельных ссылок на телефонные номера.

Ссылка на телефон HTML дает возможность посетителю сайта, в случае, если его заинтересовало ваше предложение, сразу же позвонить по данному номеру и сделать заказ на приобретение товара или услуги.

Навигация по статье:

Протокол HTML5 для ссылок на телефон
Решение проблемы с определением ссылки на телефон HTML на ПК
Другие варианты протоколов HTML5

В этой статье я покажу вам, как сделать ссылку на телефон HTML, а так же покажу, как можно ее оформить при помощи CSS.

Протокол HTML5 для ссылок на телефон

Для того чтобы сделать ваш телефонный номер кликабельным его необходимо обернуть в тег … и в атрибуте href указать протокол tel и через двоеточие указать номер без пробелов и дефисов:

< a href = "tel:0955414642" >095 — 541 — 46 — 42 < / a >

Теперь клик по данной ссылке на телефон HTML будет восприниматься любым браузером на любом мобильном устройстве как команда к набору данного номера.

Решение проблемы с определением ссылки на телефон HTML на ПК

Показанную выше запись удобно использовать чтобы принимать заявки от посетителей с мобильных устройств. Но дело в том, что оформленная в таком виде ссылка на телефон HTML будет вызывать неудобство у тех пользователей, которые зашли на ваш сайт с компьютера. При клике по такой ссылке на ПК, в зависимости от браузера, будет выпадать ошибка, либо будет открываться для набора номера Skype или какая-то другая программа. Вряд ли кто-то из пользователей захочет позвонить вам на телефонный номер по Skype и такая функция, скорее всего, отпугнет клиента.

Для решения данной проблемы есть очень интересный скрипт. Но его использование немного затруднит добавление ссылки на телефон HTML.

Как сделать кликабельный телефон на сайте

С каждым годом стремительно растет количество интернет-пользователей, использующих мобильные платформы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность позвонить прямо сейчас.

Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).

Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.

Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.

Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:

То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.

Выглядеть это будет так:

После этого пользователи мобильных устройств смогут просто кликнуть на ссылку и, не совершая дополнительных действий, позвонить вам. Теперь можно добавлять номер телефона в блок контактов на вашем сайте.

Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:

Или можно добавить ссылку для звонка со Skype на телефон:

Как в HTML сделать ссылку на телефон, емейл и скайп

В современном HTML появились новые возможности у ссылок – теперь по клику мы можем не только переходить на другие страницы и скачивать файлы, но и совершать звонки на телефоны, отправлять сообщения на почтовый ящик и даже звонить по скайпу.

Как сделать ссылку в HTML на телефон, скайп и e-mail

Все довольно просто:

+7 (495) 123-45-67 example@mail.ru someskype

Атрибут нашего тега , или hypertext reference, должен начинаться со специального слова, после которого идет двоеточие, и уже после мы пишем телефон, емейл или логин скайпа.

Кстати говоря, многие забывают выставлять ссылкам соответствующие события:

a:hover <> a:link <> a:visited <> a:active <>

:hover – вид ссылки при наведении,
:link – непосещенные ссылки,
:visited – посещенные ссылки,
:active – вид активной ссылки.

Соответствующие стили можно задать через вышеперечисленные псевдоклассы.

Номер телефона на сайте

В последнее время нельзя пренебрегать кликабельными номерами телефонов т.к. количество клиентов, использующих мобильные телефоны превысило десктопы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность беспрепятственно позвонить.

Оформление ссылки tel

По умолчанию на мобильных телефонах номера телефона распознается автоматически и преобразуются в ссылки.

До:

После:

Чтобы задать нормальные стили на мобильных, нужно писать два правила.

.phone < color: #000; font-size: 16px; font-weight: 900; >.phone a

Или по атрибуту:

a[href^="tel:"]

Отключить распознавание телефонов

Автоматическое распознавание телефонов работает не всегда корректно и срабатывает на большие цены. Его можно отключить, добавив метатег в страницы и прописать ссылки у телефонов вручную.

Оборачивание телефонов ссылками

Замечена одна особенность – на андроид устройствах не всегда срабатывает клик по ссылке если в атрибуте href форматированный номер телефона.

 +7 (495) 123-45-67 +7 (495) 123-45-67

Обвернуть телефон регулярным выражением

Если телефонов много, то лучше автоматизировать замену с помощью регулярного выражения.

function replace_phone_call($matches) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > function replace_phone($text) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Результат:

Позвоните по телефону +7 (495) 123-45-67, или 88001234567

Также можно добавить проверку мобильных с помощью mobiledetect и на десктопе ссылки не выводить.

require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet()); function replace_phone_call($matches) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > function replace_phone($text) < if (IS_MOBILE) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > else < return $text; >> $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Или сделать на мобильных ссылку с номером телефона, а на десктопе ссылку на форму обратного звонка.

require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet()); function replace_phone_call($matches) < if (IS_MOBILE) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > else < return '' . $matches[0] . ''; > > function replace_phone($text) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Результат на десктопе и планшетах:

Позвоните по телефону +7 (495) 123-45-67, или 88001234567

На мобильных:

Позвоните по телефону +7 (495) 123-45-67, или 88001234567