Многие современные мобильные устройства достаточно хорошо распознают номера телефона в HTML коде, делая его интерактивным, чтобы вы смогли напрямую позвонить по этому номеру – но это не всегда срабатывает!
Демо:
Что произойдет, если мобильный браузер или устройство не признает номер телефона, и не сделает звонок при клике на него? Возможно, номер был указан в неправильном формате или номер не распознается данной платформой, но в любом случае – это Упущенная возможность. TEL: протокол позволит вам это исправить!
Сделайте номер телефона интерактивным
Это очень просто: поместите ваш номер телефона в якорь(тэг), но вместо HTTP-протокола * (или то, что вы обычно используете в якоре) используйте tel протокол. Таким образом, даже если вы использовали неузнаваемый шаблон, устройство всё равно будет знать, что ему надо делать:
Заказ на дом, звоните по телефону:
<a href="tel:+0953174562564">0953174562564</a>
Теперь Айфоны, Андроиды и другие мобильные девайсы будут с легкостью распознавать номер и при нажатии на ссылку – предложат набрать этот номер. Но необходимо помнить следующие вещи:
- Нужно помнить, что для поддержки международных номеров нужно добавлять международный код(префикс), таким образом люди смогут позвонить из любой точки планеты.
- Если кликнуть по телефонной “ссылке” в браузере на настольном компьютере, то это приведет к вызову приложения, ассоциированного с телефоном – Google Voice или Microsoft Communicator, например.
- Можно указать номер факса, используя fax: протокол
- Есть воможность дозвона с паузой, к примеру при наборе экстеншена
Служба Поддержки:
<a href="tel:+13235798328p22"> 323-579-8328 ext. 22</a>
Skype
На данный момент скайп использует протокол callto, а не tel. Вообще-то можно это просто проигнорировать и использовать протокол tel везде, но если вы хотите точно укзать в коде, чтобы использовался скайп с браузера настольного компьютера и стандартное приложение из мобильного девайса, то в этом случае нам поможет PHP и скрипт определения мобильной платформы – Mobile Detect:
Позвонить на номер
<a href="<? echo ($detect->isMobile()) ? 'tel' : 'callto'; ?> : +1-579-827-0034">579-827-0034</a>
Немного мобильного SEO
Чтобы поисковики еще лучше понимали и индексировали ваш номер телефона, можно добавить немного microdata.
</pre> <div itemscope="" itemtype="//schema.org/LocalBusiness"> <h1 itemprop="name">Магазин</h1> Телефон: <a href="tel:+18506484200"> 850-648-4200</a></div> <pre>
Стилизация телефонных ссылок
В качестве дополнения, давайте придадим нашему телефону более привлекательный вид при помощи CSS. Для этого мы будем использовать селектор, ориентируясь только на :before псевдо элемент ссылки, который содержит строку tel: в пределах их href атрибута:
a[href^="tel:"]:before {content: "\260E";
margin-right: 0.5em;
font-size:32px;
}
Этот маленький значок “^” означает то, что он ищет любые элементы, чьи href атрибуты начинаются со строки tel: . Также мы разместили здесь маленький Unicode телефон иконку \ 260E; , так что нам даже не нужно использовать WebFont значки или дополнительные картинки.
