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

Приветствую вас, дорогие друзья на сайте Impuls-Web!

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

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

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

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

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

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

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

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

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

1. 1.На странице там, где вам нужно разместить телефонный номер, вставляем пустой блок с уникальным идентификатором. В моем случае phone-link:
   
   PHP

   <div id="phone-link"></div>

   1	<div id="phone-link"></div>

2. 2.Открываем страницу для редактирования в NotePad++ или его аналоге и перед закрытием тега </body> вставляем скрипт:
   
   PHP

   <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>

   1 2 3 4 5 6 7

   <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>.

Так же обратите внимание на тот момент, что при использовании данного скрипта у вас по факту будут для ПК и для мобильных устройств отображаться разные варианты отображения ссылки на телефон HTML. Соответственно вам необходимо предусмотреть два варианта стилизации. Для ПК вам нужно будет добавить стили для <span>, а для мобильной версии стили нужно писать для ссылки, то есть для тега а.

Сами стили оформления могут быть идентичными. То есть при написании CSS стилей вы даже можете совместить селекторы для сокращения кода. Вот как это будет выглядеть, если вы будете использовать мой вариант скрипта, и мой ID блока:

Для мобильного варианта можно также добавить стили при наведении не ссылку:

Другие варианты протоколов HTML5

Кроме телефона вы можете таким же образом оформить и другие контактные данные для своего сайта. Вам доступны для использования следующие протоколы:

• callto – вызов контакта Skype
• mailto – для e-mail адреса
• fax – для отправки факса
• sms – отправка SMS-сообщения

Данные протоколы используются точно так же, как и протокол tel. Например:

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

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

А на сегодня у меня все. Не забывайте делиться статьей в социальных сетях и оставлять комментарии!

До встречи в следующих статьях!

С уважением Юлия Гусарь