Как добавить кликабельные телефонные номера на сайт

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

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

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

{Код страны} {Код зоны} {Местный номер}

Пример: +38 (044) 01-23-456

(этот номер является вымышленным и приведен лишь в качестве примера)

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

+380440123456
+38.044.012.3456
044-01-23-456
044 012 3456

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

<span>(044) 01-23-456</span>

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

<!-- Эта ссылка будет работать для Android и iPhone. Она будет отображаться и на ПК, но при нажатии кнопки будет показываться ошибка -->
<a href="tel:+380440123456">+38 (044) 01-23-456</a>
<a href="tel:+380440123456">Позвоните нам!</a>

Проблема с приведенными выше ссылками заключается в том, что они будут показываться пользователям на всех устройствах. Но если нажать такую ссылку на компьютере, она не сработает в Google Chrome, а в Firefox будет показываться ошибка.

<!-- Эта ссылка откроет программу Skype на настольных компьютерах и ноутбуках, а на мобильных устройствах спросит пользователей, хотели бы они открыть Скайп или набрать этот номер с помощью телефона -->
<a href="callto:380440123456">+38 (044) 01-23-456</a>

В приведенном выше примере мы использовали протокол callto:. Этот протокол используется программой Skype вместе с протоколом skype:. Использование этого протокола имеет большее преимущество по сравнению с протоколом tel:, поскольку пользователи с мобильных телефонов смогут позвонить по этому номеру, а пользователи на ПК и других устройствах смогут позвонить с помощью программы Skype.

<!-- Кликабельный номер в виде картинки -->
<a href="callto:380440123456" title="Позвоните нам"><img src="/img/call-our-number.jpg" alt="Позвоните нам"/></a>

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

Вы также можете создавать ссылки на имена пользователей Skype для оказания поддержки. Для этого используйте следующий синтаксис:

<a href="skype:123456789">Поддержка по Skype</a>

Замените 123456789 на свое имя пользователя в программе Skype.

Вот и все! Надеемся, что эта статья была для вас полезной!

Tags: HTML5Web

Recent Posts

Инструкция по скачиванию видео с сервиса TikTok (бесплатно и без watermark)

Если вы еще не слышали о TikTok, тогда рекомендуем вам сначала ознакомиться с этим кратким… Read More

17/09/2020

Что есть в бюджетном ноутбуке – на какие характеристики рассчитывать?

Прошли те времена, когда приличный ноутбук стоил от 1000 долларов. Сегодня можно купить довольно неплохой… Read More

16/09/2020

Что лучше – цифровое телевидение Т2 или интернет-телевидение?

Современную жизнь невозможно представить без телевидения. Оно позволяет узнавать о событиях в Украине и мире,… Read More

02/09/2020

Гипоаллергенная подушка. Для чего она важна?

Сейчас найдется мало людей, у которых нет аллергии на продукты или пыльцу растений. Считается, что… Read More

28/08/2020

Футбольный Инстаграм: что нового у топовых футболистов

Некоторые известные футболисты тщательно скрывают свои личную жизнь, а другие - активно постят фотографии с… Read More

24/08/2020

Виды и типы компрессионных чулков

Изделия называют компрессионными, когда их применяют для лечения, а также профилактики нарушений кровотока в нижних… Read More

22/08/2020