Html код для номера телефона

В этой статье я расскажу, как можно сделать ссылку на номер телефона в html. Этот функционал крайне удобен для мобильных пользователей сайта. Им достаточно нажать на номер, чтобы открылось приложение "Телефон" с уже набранным номером.

Синтаксис html ссылки на телефон:

Параметр " tel: " не прописан в стандарте HTML. Его научились интерпретировать браузеры. Кстати, некоторые из них могут открывать различные приложения. Но как показывает практика, все же самые популярные (Google Chrome, Opera, Firefox) открывают телефон.

Для задания стиля всем ссылкам с опцией " tel: " можно указать через файл со стилями CSS:

Можно к телефону добавить красивый html-значок телефона (спецсимвол). Для этого нужно прописать следующее

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

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

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

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

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

Читайте также:  Сим карта не принята что делать мтс

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

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

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

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

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

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

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

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

Некоторые устройства без проблем понимают написанные телефоны, например, слышал, что в Android для этого достаточно заключить линк в span:

При клике по тексту, в теории, весь номер должен выделиться, но на практике у меня это почему-то не получилось.

Лучше использовать в ссылке tel параметр:

Фишка работает с 2011 года, хотя не все браузеры одинаково с ней дружат(жили) — как это часто бывает в верстке, есть определенные нюансы. Поэтому я решил опубликовать немного инфы по теме из интересной англоязычной статьи.

Спецификация и поддержка

По факту tel: — это не опция «А» тега, а протокол (такой же как http: или mailto:, отвечающие за линки на веб-страницы и почтовые адреса соответственно). Конкретного и детального его описания в HMTL5, вроде бы, нет, но после принятия данного стандарта в iOS, он стал использоваться повсеместно.

Читайте также:  Материнская плата 8 букв

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

Как реагируют типовые программы:

  • Safari — запускает FaceTime.
  • Opera (Windows) — в статье-исходнике сказано, что всплывает окно с ошибкой мол нельзя распознать протокол, но у меня лично было предложение открыть Skype (возможно, потому что он установлен).
  • Opera (OSX) — появляется запрос на использование другого приложения.
  • iOS — на выбор вам предлагают позвонить, отправить сообщение или добавить в контакты.
  • Internet Explorer 11 Mobile — инициирует звонок.
  • Internet Explorer 11 — в оригинальном посте говорится, что появится окно с информацией о вызове какого-то приложения, но у меня в Windows (ПК) просто была ошибка протокола.
  • Chrome — на декстопе ничего не происходило, но в смартфоне открылось окно со звонком и введенным телефоном.
  • Edge — запрос на открытие соответствующей программы.
  • BlackBerry 9900 — пытается инициировать набор номера.
  • Andro >Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.
  • Оформление ссылки tel: в HTML

    Поскольку линк находится в теге А, то отображение ссылки номера телефона полностью зависит от его стилей. Например, если для А добавили класс phone-style, то будет:

    Убираем подчеркивание с text-decoration чтобы элемент выглядел как текст.

    Если хотите применить один и тот же стиль всем телефонам на сайте, то пишете:

    С помощью псевдо класса before и представления символов в unicode можно добавить небольшую иконку в начале:

    Читайте также:  Хорошие накопительные водонагреватели отзывы

    Советы по созданию ссылки на номер телефона

    Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.

    Определение мобильных устройств

    Как я уже сказал выше, в декстопнах подобный линк срабатывает далеко не всегда, поэтому разумно использовать разный код под разные типы устройств. Чтобы опция функционировала только в мобильных браузерах добавляете в шаблон, например, следующий JavaScript:

    Здесь, в зависимости от результата условия в IF, в блоке с >

    SEO оптимизация

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

    Теоретически, в линке можно еще указать rel=»nofollow».

    Убираем автоопределение

    Если вы собираетесь внедрять сегодняшний урок в свой шаблон, то вероятнее всего захотите отключить автоопределение телефона в iOS. Как минимум, чтобы система не переопределила существующие стили. Для этого в HEAD дописываете строку:

    Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.

    Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Adblock detector