Как сделать ссылку на номер телефона в HTML: протокол tel:, оформление и советы
Недавно читал, что объемы мирового мобильного трафика уже превышают десктопных пользователей. В данном блоге этого пока не случилось, но в интернет-магазине одного из моих клиентов бОльшая часть людей заходит именно через планшеты/смартфоны. Поэтому меня попросили сделать продвинутую ссылку на телефон на сайте, которая при нажатии автоматически бы открывала соответствующее приложение с набором номера.
Некоторые устройства без проблем понимают написанные телефоны, например, слышал, что в Android для этого достаточно заключить линк в span:
При клике по тексту, в теории, весь номер должен выделиться, но на практике у меня это почему-то не получилось.
Лучше использовать в ссылке tel параметр:
Фишка работает с 2011 года, хотя не все браузеры одинаково с ней дружат(жили) — как это часто бывает в верстке, есть определенные нюансы. Поэтому я решил опубликовать немного инфы по теме из интересной англоязычной статьи.
Спецификация и поддержка
По факту tel: — это не опция «А» тега, а протокол (такой же как http: или mailto:, отвечающие за линки на веб-страницы и почтовые адреса соответственно). Конкретного и детального его описания в HMTL5, вроде бы, нет, но после принятия данного стандарта в iOS, он стал использоваться повсеместно.
Даже без спецификации многие браузеры вполне адекватно понимают ссылку на телефон в HTML, однако процесс обработки клика встречается разный: начиная от открытия диалогового окна с выбором приложения и заканчивая банальным игнорированием.
Как реагируют типовые программы:
Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.
Оформление ссылки tel: в HTML
Поскольку линк находится в теге А, то отображение ссылки номера телефона полностью зависит от его стилей. Например, если для А добавили класс phone-style, то будет:
Убираем подчеркивание с text-decoration чтобы элемент выглядел как текст.
Если хотите применить один и тот же стиль всем телефонам на сайте, то пишете:
С помощью псевдо класса before и представления символов в unicode можно добавить небольшую иконку в начале:
Советы по созданию ссылки на номер телефона
Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.
Определение мобильных устройств
Как я уже сказал выше, в декстопнах подобный линк срабатывает далеко не всегда, поэтому разумно использовать разный код под разные типы устройств. Чтобы опция функционировала только в мобильных браузерах добавляете в шаблон, например, следующий JavaScript:
Здесь, в зависимости от результата условия в IF, в блоке с создается либо ссылка на телефон с tel:, либо просто HTML текст.
SEO оптимизация
В оригинальной статье есть пример кода контактов для бизнес сайтов, где информация может быть использована в Google выдаче.
Beach Bunny Swimwear
Теоретически, в линке можно еще указать rel=»nofollow».
Убираем автоопределение
Если вы собираетесь внедрять сегодняшний урок в свой шаблон, то вероятнее всего захотите отключить автоопределение телефона в iOS. Как минимум, чтобы система не переопределила существующие стили. Для этого в HEAD дописываете строку:
Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.
Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?
Позвони мне, позвони!
Многие современные мобильные устройства достаточно хорошо распознают номера телефона в HTML коде, делая его интерактивным, чтобы вы смогли напрямую позвонить по этому номеру – но это не всегда срабатывает!
Что произойдет, если мобильный браузер или устройство не признает номер телефона, и не сделает звонок при клике на него? Возможно, номер был указан в неправильном формате или номер не распознается данной платформой, но в любом случае – это Упущенная возможность. TEL: протокол позволит вам это исправить!
Сделайте номер телефона интерактивным
Это очень просто: поместите ваш номер телефона в якорь(тэг), но вместо HTTP-протокола * (или то, что вы обычно используете в якоре) используйте tel протокол. Таким образом, даже если вы использовали неузнаваемый шаблон, устройство всё равно будет знать, что ему надо делать:
Заказ на дом, звоните по телефону:
Теперь Айфоны, Андроиды и другие мобильные девайсы будут с легкостью распознавать номер и при нажатии на ссылку – предложат набрать этот номер. Но необходимо помнить следующие вещи:
Skype
На данный момент скайп использует протокол callto, а не tel. Вообще-то можно это просто проигнорировать и использовать протокол tel везде, но если вы хотите точно укзать в коде, чтобы использовался скайп с браузера настольного компьютера и стандартное приложение из мобильного девайса, то в этом случае нам поможет PHP и скрипт определения мобильной платформы – Mobile Detect:
Позвонить на номер
Немного мобильного SEO
Чтобы поисковики еще лучше понимали и индексировали ваш номер телефона, можно добавить немного microdata.
Магазин
Стилизация телефонных ссылок
В качестве дополнения, давайте придадим нашему телефону более привлекательный вид при помощи CSS. Для этого мы будем использовать селектор, ориентируясь только на :before псевдо элемент ссылки, который содержит строку tel: в пределах их href атрибута:
Как изменить обработчик протокола URL ( tel, mailto, callto ) в Windows 10
В этой статье будет описано, как в Windows 10 настроить приложение для открытия ссылок URL (tel, mailto, callto и т.д.) в браузере.
Например, сделать так, чтобы при нажатии на телефонный номер на сайте открывался софтфон phonerlite.
Также будет показан общий принцип добавления и изменения приложения по умолчанию через реестр в Windows 10.
Содержание
Введение
Задача следующая:
Существует отдел продаж, который использует в своей работе ip-телефонию. В качестве телефонов используют софтфоны (Softphone) phonerlite и microsip. Также нужно, чтобы у менеджера при нажатии на телефонный номер на сайте клиента открывалось окно с выбором софтфона, а после выбора выполнялся вызов на этот номер.
Казалось бы, что тут сложного. Выбираем приложение для протокола tel и всё. Но в Windows 10 при выборе приложения отсутствуют установленные софтфоны.
PhonerLite Default Tel
При изучении вопроса оказалось, что не все приложения (не только софтфоны) корректно заносят данные в реестр.
В этой статье приведем пример, как добавить софтфон PhonerPhone в список приложений для выбора протокола tel для браузера Chrome.
Описание тестового стенда
План работ. Краткое описание действий
Установка и настройка софтфона PhonerLite
Подробно описывать установку softphone PhonerLite в данной статье не будем, там все очень тривиально. Если с этим возникнут проблемы, можете обратиться к нашей статье Обзор и основные возможности софтфона PhonerLite.
Отметим один важный момент. В настройках софтфона PhonerLite есть выбор «Обработчика протокола URL«, можно выбрать: tel:, sip:, callto:, hungup:. При выборе вносятся изменения в реестр. Как выяснилось, изменения не совсем корректные. Работать будет, но только с одним софтфоном. Этим способом не получится добавить в меню «Как вы хотите это открыть?» несколько приложений, например: phonerlite, microsip и blink.
Поэтому рекомендуем внести изменения в реестр самим.
Регистрация в реестре программы для обработчика протокола URL
Добавление ProgID
В нашем примере мы добавили:
Добавление Capabilities (возможностей приложения)
Регистрация возможностей приложения [HKEY_CURRENT_USER\Software\RegisteredApplications]
В заключении нужно добавить наше приложение PhonerLite в список программ по умолчанию.
Полный текст reg файла для добавления приложения PhonerLite в список приложений по умолчанию.
Для удобства предлагаем создать файл phonerUrlTel.reg и записать туда данный текст.
После этого запустить данный файл (понадобятся права администратора) и данные будут записаны в реестр.
Проверка того, что приложение PhonerLite появилось в списке приложения по умолчанию для протокола tel
Для проверки откроем браузер Chrome и в адресной строке введем tel:+788888888888 (номер для примера).
PhonerLite Default Tel:
Нажимаем «Выбор приложения» и в открывшемся окне, после наших настроек, появилось приложение PhonerLite.
PhonerLite Default Tel:
Выбираем его и видим, что открылся софтфон и в нем выполняется исходящий вызов по номеру +788888888888
PhonerLite Default Tel:
Задачу выполнили. Теперь по нажатию на телефонный номер в браузере (где протокол tel:) выполняется вызов через приложение PhonerLite.
Как правильно добавить телефонные ссылки на сайт
Приветствую. Большинство сайтов так или иначе связанных с бизнесом, услугами или торговлей, предоставляют пользователям номера телефонов. Если раньше посетителям приходилось списывать эти номера с экранов настольных компьютеров, а потом звонить, то теперь же пользователи заходят на сайты со своих смартфонов, с которых они могут сразу же и позвонить.
В таком случае, почему бы не включить на сайт кликабельные телефонные ссылки? Представьте, что вы ищите какую-то услугу в Google, и он выдает вам кликабельный телефон, при клике на который, ваш смартфон набирает этот номер без необходимости записать или запоминать его. Удобно.
В этой статье мы расскажем, как добавить на сайт активные ссылки, а также другие призывы к действию, такие как email-авторизация или URL’ы.
Чтоб создать кликабельную ссылку, вы можете просто воспользоваться протоколами, встроенными в HTML5-код. Вы можете добавить код в «шапку», «подвал», сайдбар, записи или страницы, а также использовать для этого виджет.
Кликабельные ссылки работают, используя такие HTML5-протоколы, как tel: и mailto:. Браузеры реагируют на эти протоколы по-разному. Они также могут спросить, можно ли это открыть с помощью app-телефона, запускают app-телефона, выводят номер на экран и ожидают клика по кнопке вызова и т.д.
Добавление кода для телефонных ссылок
Вы добавляете код в виде текста в том месте, где вы хотите видеть вашу ссылку: просто строчка кода, которая выглядит вот так:
Первая часть этого кода, говорит, где вывести ссылку. Href=tel: создает телефонную ссылку. Цифры – это, конечно же, телефон. Вторая часть – это визуальное составляющая линка, которая не обязательно должна соответствовать ссылке. Иными словами визуальная составляющая может содержать, как цифры, так и текст, который вы хотите вывести. К примеру, если вы хотите вывести сообщение вместо цифр, то ваш код должен выглядеть вот так:
Ваши посетители будут видеть это сообщение, и, когда они будут кликать на него, то будет появляться экран набора номера с уже набранным номером.
При добавлении любого кода следует использовать закладку «Текст» в вашем редакторе.
Другие призывы к действию
И вы не лимитированы добавлением только лишь телефонных номеров. Вы также можете добавлять и другие призывы к действию, такие, как email, факс и т. д., используя HTML-код. Вот список HTML-протоколов:
Пример: создание кода для Email-ссылки или URL
HTML-код для email — это mailto:
Вы сможете добавить email-адрес, и это будет выглядеть вот так:
Также как это было с телефонной ссылкой, вы можете использовать визуальную составляющую, если хотите добавить сообщение, вот так:
Другие опции включают подписку на новости и тому подобное. Чтоб перелинковать их с вашим HTML-кодом, используйте такой URL.
Пример добавления кода в «шапку»
Используя редактор, вы сможете добавить код в «шапку», хотя здесь нужно будет немного поработать с CSS. Для этого рекомендуется использовать дочернюю тему.
В панели управления: Внешний вид > Редактор > Шапка.
Вот, как это выглядит в «шапке» темы Twenty Sixteen. Функционально, но не особо симпатично. Если с этим поработать, то можно добавить цвет и отступы, чтоб все вместе не слипалось.
Вам нужно добавить этот код в CSS-файл. В вашем редакторе прокрутите ниже и найдите «Стили» в правой колонке. Выберете страницу стилей и мотайте код вниз, пока не найдете код для «шапки»; поместите код в самый конец, перед следующей секцией.
Код выглядит вот так:
Используя CSS, вы сможете изменить шрифты, цвета, обводку и т. д. CSS найдет код везде, где он есть и добавит оформление: вы можете использовать одни и те же методы, чтоб добавить код к виджетам, записям и т. д. Вместо текста вы также можете использовать иконки.
Набор телефона с добавочным номером
Если ваш телефонный номер имеет добавочный номер, вы должны добавить немного кода, который будет вставлять краткую паузу перед набором дополнительных цифр. Односекундная пауза будет добавлена, посредством использования Р. Так что код будет выглядеть вот так:
Эта комбинация набирает номер, ждет одну секунду, а потом набирает добавочный номер 123. Если вы хотите дождаться гудка, используйте w вместо p.
Коды стран
Вам не обязательно использовать коды стран, но в случае международных сайтов, вам, возможно, понадобиться эта опция. Коды стран можно добавить посредством a + код страны, перед номером телефона. Пример выглядит вот так:
Микроданные информируют поисковые машины, что цифры – это телефонный номер. Вы делаете это, изменяя разметку. Добавляются местные теги для поиска по определенной местности, так что, когда ваши местные посетители найдут вас в поисковике, то поисковая машина покажет им кликабельную телефонную ссылку.
Код может выглядеть вот так:
Использование специальных плагинов
Если все вышеописанное показалось для вас слишком сложным, есть еще один способ добавить «звонибельную» кнопочку – это использовать плагины.
Speed Contact Bar
Speed Contact Bar – бесплатный плагин, который добавляет контактбар, который включает кликабельные ссылки для телефонных номеров, email, кастомных URL и URL для социальных сетей. Вы можете установить его в верхней или нижней части вашего веб-сайта, настроить его размер, цвет, цвет текста и ссылок, и то, как он реагирует. Также можно настроить размеры, чтоб они соответствовали вашему сайту.
Mobile Contact Bar
Mobile Contact Bar – это бесплатный плагин, который позволяет вам добавлять ссылки на ваш веб-сайт в том случае, если он просматривается на мобильных девайсах. Вы можете выбрать ссылки, которые представляют 13 различных опций, среди которых телефон, email, Skype, кастомные URL и социальные сети. Вы можете настроить внешний вид ссылок, чтоб они подходили вашему веб-сайту, а также выбрать их размер, границы, видимость и т. д. затем это меню можно расположить в нижней или верхней части сайта.
WP-TopBar
WP-TopBar – еще один бесплатный плагин, который располагает бар сообщений в вашей «шапке», который включает кликабельные сообщения, такие как номера телефонов email, URL и т. д. Вы можете расположить HTML-код и настроить его внешний вид с помощью CSS. Вы также сможете выбрать типы девайсов, для которых нужно отображать этот бар. Если у вас есть специфические призывы к действию, которые нужно выводить по графику, то вы можете настроить подобный бар так, как нужно.
Сегодняшнее состояние телефонных ссылок
Дата публикации: 2016-03-17
От автора: в интернете есть такая вещь, как телефонные ссылки. Они похожи на обычные ссылки, по клику на которые открываются веб-страницы, однако по клику на телефонную ссылку происходит набор номера на устройстве, с которого можно совершать телефонные звонки. Очень долго они вертелись вокруг нас, но до сих пор я теряюсь при их виде. К примеру, многие устройства автоматически распознают телефонные номера и делают из них ссылки. Однако так происходит не всегда.
Доля трафика на мобильных устройствах довольно высока, да и приложений, способных совершать телефонные звонки, на настольных компьютерах предостаточно, поэтому нам стоит получше познакомиться с тем, что такое телефонные ссылки.
Использование по умолчанию
На сайте CSS-Tricks с 2011 года существует телефонная ссылка:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Текстовая ссылка также работает:
Вам, возможно, интересно, почему tel: считается значением по умолчанию, когда о нем в спецификации ничего не сказано. Данный стандарт был предложен еще в далеком 2000 году, а позже он был принят iOS, что де-факто обеспечило ему жизнеспособность в 2007. Существуют и другие телефонные протоколы (о них мы поговорим позже), однако, учитывая относительную известность tel:, сейчас мы сосредоточимся именно на нем.
Поддержка в браузерах
Стилизация телефонных ссылок
К телефонным ссылкам стили добавляются точно так же, как и к другим любым ссылкам. А на деле же, стили наследуются от обычных ссылок:
Скажем, мы хотим стилизовать только телефонные ссылки. Это можно сделать с помощью псевдоселектора, который ищет текст «tel:» в URL:
На сайте Tuts+ есть неплохой трюк с использованием псевдокласса ::before, который добавляет юникод символ телефона слева от номера:
Другие телефонные ссылки
Верите или нет, но tel: не единственный способ запустить телефонный звонок с помощью ссылки. Мы можем пользоваться и другими пользовательскими обработчиками телефонных протоколов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Callto: то же самое, что tel:, но используется для звонка через Skype.
auto-detected: Множество браузеров автоматически распознают телефонные номера в HTML разметке и создают ссылки – не нужно вносить изменения в разметку. В iOS полностью поддерживается автоматическое распознавание, хотя в Chrome для Android этого нет.
Sms: Пропустите вызов и перейдите сразу к отправке сообщения. Поддержка данного протокола намного меньше, чем у tel:, даже на мобильных устройствах.
Fax: «Назад в будущее» с факсом. Не совсем надежен.
Лучшие практики
Забавно говорить о лучших практиках, когда о предмете разговора ничего не сказано в спецификации. В спецификации действительно есть краткое пояснение идеи «click to call», но при работе с телефонными номерами и ссылками необходимо помнить о нескольких вещах.
Учитывайте контекст
Телефонная ссылка может быть отличным «призывом к действию», особенно на мобильных устройствах, где минимизировано количество действий между контентом и совершением вызова. Но в то же время на настольных компьютерах такие ссылки только мешают, т.к. вы не сможете совершить звонок, если у вас не установлено специальное приложение.
Один из выходов это создать специальный класс для телефонных ссылок и пытаться прятать и показывать их в зависимости от браузера. Тут нам поможет библиотека Modernizr и медиа запросы, хотя стопроцентная точность не гарантирована.
Используйте код страны
Код страны не обязателен, но он может быть крайне полезен для сайтов с международным трафиком. К коду страны можно добавить знак +, но он тоже не обязателен.