Posted:
Янв 16, 2023
Comments:
0 Comments

Ссылки на телефон html: Номер телефона на сайте HTML

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

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

Содержание:

  • Спецификация и поддержка.
  • CSS оформление.
  • Советы по созданию (оптимизация кода).

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

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

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

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

<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:»]: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>

Здесь, в зависимости от результата условия в 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>

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

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

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

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

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

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

Теги: HTML + CSS, web разработка, адаптивный дизайн, интернет-магазин, полезное, советы и рекомедации, создание сайтов

Как делается кликабельная ссылка на телефон html

В последние годы пользователи интернета предпочитают пользоваться сетью посредством телефона, что подтверждается статистикой — мировой мобильный трафик превышает десктопный. Чтобы избежать потери клиентов, рассмотрим как ссылка на телефон оформляется при помощи html.

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

Классический способ

В атрибуте href должно быть указано: протокол tel: и номер телефона. Для удобства мобильных пользователей используйте международный формат.

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

Нажав такую ссылку, пользователь без проблем позвонит вам.

Можно добавить кликабельную html-ссылку на Skype:

<a href=»skype:nick»>Skype</a>

nick замените вашим логином программы Скайп.

Вот таким образом добавим html-ссылку для звонка со Skype на номер телефона:

<a href=»callto:+79160000000″>Позвонить нам с помощью Skype</a>

Для удобства посетителей посредством html и CSS мы можем выставлять определенные события:

a:hover {} — вид ссылки при наведении

a:link {} — непосещенные ссылки,

a:visited {} — посещенные ссылки

a:active {} — вид активной ссылки.

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

Вариант с картинкой

<a href=»tel:+79050000000″><img src=»button.png»></a>

img src=»button.png» — путь к вашей картинке, на которой изображен номер телефона или слово «Позвонить».

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

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

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

Когда HTML не нужен

Номер телефона обычно вставляют в профиле Инстаграм. Однако одного номера может оказаться мало, к тому же часть пользователей предпочитает использовать для общения чат Viber, WhatsApp, Telegram. Каким образом это всё уместить? Выход из положения — сервис мультиссылок Hipolink. Здесь вы не только соберете все свои ссылки, но и получите готовые шаблоны лендинга, сайта-визитки и даже интернет-магазина. Доступна статистика о посетителях, которая позволит лучше взаимодействовать с клиентами. К моменту написания статьи сервисом пользуются больше 130 000 человек.

В чем преимущества Hipolink?

1. Простота создания и оформления красивой страницы

2. Настройка, оформление лендинга (60 готовых тем, создание уникального стиля)

3. Подключение дополнительных модулей (аналитика, метрика, прием платежей, CRM система, рекламная подписка и др.)

4. Квалифицированная круглосуточная поддержка.

Теперь вам не придется думать, что же предпочтительнее разместить в профиле Инстаграм — телефон, почту, мессенджер, ссылку на сайт. Плюс избавитесь от повторяющихся вопросов в Директе — «А как вам позвонить?», «Какая у вас почта?» и т.д.

На странице Хиполинк можно разместить исчерпывающую информацию:

— Ответы на частые вопросы

— Переход в Телеграм, Ватсапп, Вайбер

— Перенаправление в социальные сети

— Каталог товаров и услуг

— Формы заказа и оплаты

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

Для оформления номера в Хиполинк откройте конструктор, нажмите «Добавить новый блок», выберите «ссылки». В появившемся справа блоке нажмите «Телефон», заполните поля, нажмите «Применить».

Чтобы использовать приведенные выше примеры выберите HTML блок в панели редактирования, в правой части экрана вставьте код, нажмите «Принять». Для вставки следующего кода повторите операцию.

html — Как инициировать телефонный звонок при нажатии на ссылку на веб-странице на мобильном телефоне

спросил

Изменено
5 месяцев назад

Просмотрено
1,1 млн раз

Мне нужно создать веб-страницу для мобильных устройств. Я до сих пор не понял только одного: как я могу инициировать телефонный звонок по щелчку текста?

Есть ли специальный URL-адрес, который я мог бы ввести, например, тег mailto: для электронных писем?

Решение для конкретного устройства не является предпочтительным.

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

  • html
  • телефонный звонок
  • мобильные телефоны
  • url-протокол

0

Большинство современных устройств поддерживают схему tel:. Так что используйте 555-555-5555 , и все будет готово.

Если вы хотите использовать его для изображения, тег может обрабатывать размещенный в нем , как и в других обычных ситуациях с: jpg" alt="Позвоните по номеру 555-555-5555" />

9

Правильная схема URL — [номер], поэтому вы должны сделать

 Call 5551234567

0

Хочу добавить сюда ответ для полноты картины.

 Позвоните по номеру 123-4567

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

Кроме того, вы должны знать, что Skype (довольно популярный) по умолчанию использует другой синтаксис (но его можно настроить для использования tel:).

 Позвоните по номеру 123-4567

Однако я думаю, что в последних мобильных браузерах (на Android я точно знаю) теперь синтаксис tel должен предлагать всплывающее окно с доступными приложениями, которые можно использовать для завершения действия вызова.

1

Интерактивный код ссылки на смартфон:

Следующую ссылку можно использовать для создания интерактивной телефонной ссылки. Вы можете скопировать приведенный ниже код и вставить его на свою веб-страницу, а затем отредактировать, указав свой номер телефона. Этот код может работать не на всех телефонах, но работает на iPhone, Droid/Android и Blackberry.

 1-847-555-5555

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

 1-847-555-5555

Также можно использовать любой текст в ссылке, если в качестве номера телефона указан «тел: 18475555555», как в этом примере:

 Нажмите здесь, чтобы позвонить Поддержка 1-847-555-5555

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

ПРИМЕЧАНИЕ. Браузер Safari для iPhone автоматически обнаружит номер телефона на странице и преобразует текст в ссылку для вызова без использования кода на этой странице.

Код ссылки на смартфон WTAI:
Код ссылки WTAI или «Интерфейс приложения беспроводной телефонии» показан ниже. Этот код считается правильным протоколом для мобильных телефонов и будет работать на таких смартфонах, как Droid, однако он может не работать в Apple Safari на iPhone, поэтому рекомендуется приведенный выше код.

 Нажмите здесь, чтобы позвонить в службу поддержки 1-847-555-5555

По сути, используйте элемент с атрибутом href , указывающим на номер телефона с префиксом tel: . Обратите внимание, что плюсы могут использоваться для указания кода страны, а дефисы могут быть включены просто для человеческого глаза.

Веб-документы MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link

Элемент HTML (или элемент привязки) вместе со своим атрибутом href создает гиперссылку на другие веб-страницы, файлы, местоположения на той же странице, адреса электронной почты или любой другой URL-адрес.

[…]

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

+49 157 0156

Документы IETF

https://www.rfc-editor.org/rfc/rfc3966

URI tel для телефонных номеров

URI «tel» имеет следующий синтаксис:

телефон-ури = "тел:" телефон-абонент

[…]

Примеры

тел:+1-201-555-0123 : этот URI указывает на номер телефона в США
Состояния. Дефисы включены, чтобы сделать число более человечным
удобочитаемый; они разделяют страну, код города и номер абонента.

tel:7042;phone-context=example.com : URI описывает локальный телефон
число допустимо в контексте «example.com».

тел:863-1234;phone-context=+1-914-555 : URI описывает локальный
номер телефона, действительный в пределах определенного телефонного префикса.

Просто используйте тег привязки HTML и начните атрибут href с тел: . Я предлагаю начинать номер телефона с кода страны. обратите внимание на следующий пример:

 НЕТ отличий, что это такое

В этом примере код страны +98 .

Подсказка : Это так подходит для мобильных телефонов, я знаю, что тел: префикс вызывает FaceTime на macOS, но на Windows я не уверен, но я предполагаю, что это вызвало запуск Skype.

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

В настоящее время (2021 г.) для работы на ПК или планшете и Android (не тестировалось в IOS, но должно работать) вам нужно добавить data-rel=»external» к тегу «a», например:

 Позвоните мне...

html — href=»tel:» и мобильные номера

спросил

Изменено
2 года, 6 месяцев назад

Просмотрено
1,4 млн раз

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

 61709

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

  • html
  • href
  • тел

7

При наборе номера внутри страны, в которой вы находитесь, вам по-прежнему необходимо набирать национальный внешний номер перед остальной частью номера. Например, в Австралии можно набрать:

 0 - префикс внешней линии.
   2 - Код города для Нового Южного Уэльса
6555 - STD-код конкретной телефонной станции
1234 - добавочный номер телефонной станции.

Для мобильного телефона это становится

 0 - префикс внешней линии
   4 - Код города для мобильного телефона
1234 5678 - Номер мобильного телефона

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

 + - Короткая рука для номера внешней линии страны
  61 - Код страны для Австралии
   4 - Код города для мобильного телефона
1234 5678 - Номер мобильного телефона

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

Таким образом, в соответствии с префиксом внешней линии для Германии отбросьте 0 и добавьте +49 для международного телефонного кода Германии (например), получив:

 
    Позвони мне, позвони мне в любое время
      Позвони мне (позвони мне) я приеду
        Когда вы будете готовы, мы можем разделить вино!

8

Я знаю, что ОП спрашивает о международных кодах стран, но для Северной Америки вы можете использовать следующее:

 1-847-555-5555
Нажмите здесь, чтобы позвонить в службу поддержки 1-847-555-5555

Это может вам помочь.

5

Браузер BlackBerry и Safari для iOS (iPhone/iPod/iPad) автоматически определяют номера телефонов и адреса электронной почты и преобразуют их в ссылки. Если вам не нужна эта функция, вам следует использовать следующие метатеги.

Для Сафари:

Для BlackBerry:

Источник: mobilexweb.com

4

В качестве дополнительного примечания вы также можете добавить язык разметки для приостановки или ожидания, я узнал об этом из iPhone iOS, который позволяет хранить номера с добавочными номерами в одной строке. Точка с запятой устанавливает подождите , что будет отображаться в качестве следующего шага при вызове номера. Это помогает упростить рабочий процесс вызова номеров с добавочными номерами на их доске. При появлении запроса вы нажимаете кнопку, показанную в левом нижнем углу экрана iPhone, и iPhone набирает ее автоматически.

 Позвоните сейчас

Пауза вводится с запятой «,», что позволяет сделать небольшую паузу для каждой запятой.

This entry was posted in Ссылочное