Тег tel – Как сделать номер телефона ссылкой сразу на звонок, при открытии сайта с мобильного устройства?

Активная ссылка телефона на сайте с помощью tel: (советы, нюансы)

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

Содержание:

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

<span>(098) 555-44-33</span>

<span>(098) 555-44-33</span>

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

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

<a href="tel:+380985554433">Позвоните нам!</a>

<a href=»tel:+380985554433″>Позвоните нам!</a>

Фишка работает с 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 — пытается инициировать набор номера.
• Android — запуск приложения телефона.
• Про Firefox ничего сказано не было, но я встречал информацию о возможных ошибках на Win ПК. В комментариях дополнили, что в Mac при этом вызывается FaceTime.

Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.

Оформление ссылки tel: в HTML

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

a.phone-style {
  color: #3e3a37;
  text-decoration: none;
}

a.phone-style { color: #3e3a37; text-decoration: none; }

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

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

a[href^="tel:"] {
  color: #3e3a37;
  text-decoration: none;
}

a[href^=»tel:»] { color: #3e3a37; text-decoration: none; }

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

a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 0.5em;
}

a[href^=»tel:»]:before { content: «\260e»; margin-right: 0.5em; }

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

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

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

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

<div></div> 
 
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  document.getElementById("header-phone").innerHTML = '<span><a href="tel:+ 380985554433 ">(098) 555-44-33</a></span>';
 } else	{
  document.getElementById("header-phone").innerHTML = '<span>(098) 555-44-33</span> ';
}
</script>

<div></div> <script> if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { document.getElementById(«header-phone»).innerHTML = ‘<span><a href=»tel:+ 380985554433 «>(098) 555-44-33</a></span>’; } else { document.getElementById(«header-phone»).innerHTML = ‘<span>(098) 555-44-33</span> ‘; } </script>

Здесь, в зависимости от результата условия в IF, в блоке с ID=header-phone создается либо ссылка на телефон с tel:, либо просто HTML текст.

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

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

Вот сам код:

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h2 itemprop="name">Beach Bunny Swimwear</h2>
  Phone: 
    <span itemprop="telephone">
      <a href="tel:+18506484200">
         850-648-4200
      </a>
    </span>
</div>

<div itemscope itemtype=»http://schema.org/LocalBusiness»> <h2 itemprop=»name»>Beach Bunny Swimwear</h2> Phone: <span itemprop=»telephone»> <a href=»tel:+18506484200″> 850-648-4200 </a> </span> </div>

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

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

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

<meta name="format-detection" content="telephone=no">

<meta name=»format-detection» content=»telephone=no»>

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

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

Формат ссылки для телефонных звонков в мобильных браузераx (href=»tel:…»)

На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложене для звонков. Если вы создаете сайт бизнес руководства, консалтингового агенства или просто продаете пирожки на своем сайте, большинство людей предпочтут позвонить вам в 1-2 тача вместо нудного заполнения формы (особенно на мобильном девайсе).

Мы уже писали об URI-схемах для отправки смс тут.

Первым стандартом, де-факто (скопированным с японских I-MODE стандартов) является использование tel: схемы. Он был предложен в качестве стандарта в RFC 5341, но будьте осторожны, потому что большинство предложенных там параметров не работают на всех устройствах.

Сегодня поддержка tel: URI-схемы есть почти в каждом мобильном устройстве, в том числе в Safari на IOS, Android Browser, WebOS Browser, Symbian браузер, Internet Explorer, Opera Mini и т.п.

Очень простой и лаконичный синтаксис:

html

<a href="tel:+1234567890"> Звоните нам бесплатно! </ a>

href=”tel:…”

На десктопе, с установленным Skype (или подобным софтом), система попросит вас подтвердить открытие внешнего приложения, при клике на такую ссылку.

Я рекомендую указывать телефонный номер в международном формате: знак плюс (+), код страны, код местной зоны и номер абонента. Мы ведь иногда действительно не знаем, где наши посетители физически расположены. Если они находятся в той же стране, или даже в том же районе, международный формат также будет работать.

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

html

<a href="callto:12345678">Работает на iPhone и Nokia</a>
<a href="wtai://wp/mc;12345678">Работает на Android</a>
<a href="wtai://wp/mc;+123456789">международный формат для Android</a>
 

В целом все, что хотелось сказать. Используйте tel: URI-схемы и будет вам счастье 😉

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

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

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

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

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

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

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

<a href=»tel:0955414642″>095-541-46-42</a>

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

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

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

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

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

   <div></div>

   <div></div>

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

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

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

В случае если у вас сайт сделан на CMS, то вам нужно открыть для редактирования файл, в котором закрывается тег

Как создаётся ссылка на номер телефона

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

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

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

Ссылка на номер телефона для автонабора

Ссылка на номер телефона – это сегодня обычное дело. В HTML-5 эту возможность реализовать можно одной строчкой кода. Разместить номер вы можете в футере темы, хедере, боковой панели, или в контенте записей. Для этой цели также можно использовать текстовый виджет.

<a href=”tel:123-456-7890″>123-456-7890</a>.

href – это атрибут создания ссылки, tel – это протокол HTML-5, который задает свойство ссылке, обозначая ее телефонной. После двоеточья телефонный номер, на который будет идти звонок. Между парными тегом <a></a> находится содержание линка. Оно может быть произвольным, например, побуждение «Нажмите, для того чтобы позвонить!» или «Звонок мастеру». Можно просто написать номер телефона, так как на сайт могут заходить с компьютера и не все пользователи увидят при наведении на надпись «Позвоните нам!» всплывающую подсказку с номером на который нужно звонить.

Другие протоколы HTML-5

Вы не ограничены добавлением ссылки только на телефон. С помощью следующих протоколов вы сможете также:

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

С помощью этих протоколов можно создавать ссылки аналогично показанному выше примеру. Для этого пропишите парный тег <a>, в котором укажите контент ссылки, которую будет видеть пользователь. Затем пропишите атрибут href, придав ему соответствующее свойство (протокол) через знак равно в кавычках. После свойства должно стоять двоеточие и контактная информация, например e-mail адрес или номер телефона. Выглядит это примерно так:

<a href=”sms:123-456-7890″>Нажмите, для отправки СМС сообщения автору</a>.

Как видите, ссылка на номер телефона легко реализуется. И не только на номер телефона. Все благодаря современному языку HTML-5 и его новым возможностям.

Возможно, вам будет также интересно узнать о том, как сделать обычную ссылку. Об этом мы рассказали тут.

Сегодняшнее состояние телефонных ссылок

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

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

Использование по умолчанию

На сайте CSS-Tricks с 2011 года существует телефонная ссылка:

<a href=»tel:1-562-867-5309″>1-562-867-5309</a>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Текстовая ссылка также работает:

<a href=»tel:1-562-867-5309″>Click to Call!</a>

tel: — не столько функция, как протокол, почти так же как http: и mailto: протоколы для ссылки <a>. В спецификации по этому поводу ничего не говорится, хотя HTML5 поддерживает обработчики пользовательских протоколов, что и позволяет их использовать.

Вам, возможно, интересно, почему tel: считается значением по умолчанию, когда о нем в спецификации ничего не сказано. Данный стандарт был предложен еще в далеком 2000 году, а позже он был принят iOS, что де-факто обеспечило ему жизнеспособность в 2007. Существуют и другие телефонные протоколы (о них мы поговорим позже), однако, учитывая относительную известность tel:, сейчас мы сосредоточимся именно на нем.

Поддержка в браузерах

Мы знаем, что tel: является обработчиком протокола телефонных ссылок без документации; а где нет документации, там есть различия в поведении в браузерах. Это не означает, что тег <a> просто не будет распознаваться браузерами, они могут принимать различные решения при клике на такую ссылку. К примеру, браузер может предположить, что требуется запустить другое приложение и откроект окошко с выбором приложения. Или же ссылка может просто не работать.

Стилизация телефонных ссылок

К телефонным ссылкам стили добавляются точно так же, как и к другим любым ссылкам. А на деле же, стили наследуются от обычных ссылок:

a { color: orange; text-decoration: none; }

Скажем, мы хотим стилизовать только телефонные ссылки. Это можно сделать с помощью псевдоселектора, который ищет текст «tel:» в URL:

a[href^=»tel:»] { color: orange; text-decoration: none; }

На сайте Tuts+ есть неплохой трюк с использованием псевдокласса ::before, который добавляет юникод символ телефона слева от номера:

a[href^=»tel:»]:before { content: «\260e»; margin-right: 0.5em; }

Другие телефонные ссылки

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Callto: то же самое, что tel:, но используется для звонка через Skype.

auto-detected: Множество браузеров автоматически распознают телефонные номера в HTML разметке и создают ссылки – не нужно вносить изменения в разметку. В iOS полностью поддерживается автоматическое распознавание, хотя в Chrome для Android этого нет.

Sms: Пропустите вызов и перейдите сразу к отправке сообщения. Поддержка данного протокола намного меньше, чем у tel:, даже на мобильных устройствах.

Fax: «Назад в будущее» с факсом. Не совсем надежен.

Лучшие практики

Забавно говорить о лучших практиках, когда о предмете разговора ничего не сказано в спецификации. В спецификации действительно есть краткое пояснение идеи «click to call», но при работе с телефонными номерами и ссылками необходимо помнить о нескольких вещах.

Учитывайте контекст

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

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

Используйте код страны

Код страны не обязателен, но он может быть крайне полезен для сайтов с международным трафиком. К коду страны можно добавить знак +, но он тоже не обязателен.

<a href=»tel:+01-562-867-5309″>1-562-867-5309</a>

SEO

SEO эксперты могли бы больше сказать по этой теме, чем я, но у Google есть специальный структурированный формат данных для местного бизнеса, используя который можно сделать ссылки более узнаваемыми для поисковых роботов, что в свою очередь изменит форматирование этих ссылок на страницах поисковой выдачи и сделает их более функциональными. Dudley Storey сделал отличный обзор с этим примером:

<div itemscope itemtype=»http://schema.org/LocalBusiness»> <h2 itemprop=»name»>Beach Bunny Swimwear</h2> Phone: <span itemprop=»telephone»> <a href=»tel:+18506484200″> 850-648-4200 </a> </span> </div>

С другой стороны можно добавить rel=»nofollow», чтобы ссылки не индексировались поисковым движком. Так как роботы склонны к индексации всех ссылок, даже тех, которые никуда не ведут, это будет очень полезная опция.

<a href=»tel:+01-562-867-5309″ rel=»nofollow»>1-562-867-5309</a>

Как отключить обнаружение номера в iOS

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

<meta name=»format-detection» content=»telephone=no»>

Автор: Geoff Graham

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Номера телефонов в почтовых клиентах / Habr

Возьмем номер:

a { color:#0077cc !important }
a[href^=tel] {
    color:#000000 !important;
    text-decoration: none;
    border-bottom:#000000 1px dotted;
}
p { color:#000000; }

<p>Позвоните нам <b>8 (800) 888-88-88</b></p>

Что мы получаем:

a { color:#0077cc !important }
a[href^=tel] {
    color:#000000 !important;
    text-decoration: none;
    border-bottom:#000000 1px dotted;
}
p { color:#000000; }

<p>Позвоните нам <b><a href="tel:+78008888888">8 (800) 888-88-88</a></b></p>

Что мы получаем:

Понятное дело, что всем плевать. Тикеты не обрабатываются. А если и обрабатываются, то приходят отписки типа: «Спасибо, примем меры» от безликих агентов поддержки. Попробуем по теории рукопожатий? Why not?

Полезные сниппеты на HTML5 / Habr

Автозаполнение в текстовых полях

<input name="frameworks" list="frameworks" />

<datalist>
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Поля ввода email, url и tel

<input type="url">
<input type="email">
<input type="tel">

Шаблоны на соответствие полей формы регулярному выражению

<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"  title="Не менее восьми символов, содержащих хотя бы одну цифру и символы из верхнего и нижнего регистра">
<input type="tel" pattern="(\+?\d[- .]*){7,13}" title="Международный, государственный или местный телефонный номер">

Кастомное контекстное меню

<section contextmenu="mymenu"> 
<p>Да, можно кликнуть правой кнопкой прямо здесь.</p>
</section>

<menu type="context">
  <menuitem label="Пожалуйста, не воруйте наши изображения" icon="img/forbidden.png"></menuitem>
  <menu label="Социальные сети">
  <menuitem label="Поделиться на FaceBook">   </menuitem>
  </menu>
</menu>

Видео на HTML5, с резервным Flash-проигрывателем.

<video controls>
	<source src="__VIDEO__.MP4"  type="video/mp4">
	<source src="__VIDEO__.OGV"  type="video/ogg">
	<object type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF">
		<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4">
		<img src="__VIDEO__.JPG" alt="__TITLE__"
		     title="Нет возможности воспроизведения видео в вашем браузере">
	</object>
</video>

Скрытые элементы в HTML5

<p hidden>Вы не увидите этот текст</p>

Автофокус для текстовых полей

<input autofocus="autofocus">

Предварительная загрузка в HTML5

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

Воспроизведение аудиофайлов на HTML5

<audio src="sound.mp3"></audio>
<div>
	<button>Play</button>
	<button>Pause</button>
	<button>Volume Up</button>
	<button>Volume Down</button>
</div>