Меню Закрыть

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Активатор win7 максимальная 64

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

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

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

Даже без спецификации многие браузеры вполне адекватно понимают ссылку на телефон в 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, то будет:

    Читайте также:  Как поставить заводские настройки на samsung

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Читайте также:  Восстановление смазанных и расфокусированных изображений

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

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

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

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

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

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

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

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

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

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

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

    Рекомендуем к прочтению

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

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

    *

    code

    Adblock
    detector