Как сделать кликабельный телефон на сайте
С каждым годом стремительно растет количество интернет-пользователей, использующих мобильные платформы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность позвонить прямо сейчас.
Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).
Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.
Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.
Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:
То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.
Выглядеть это будет так:
После этого пользователи мобильных устройств смогут просто кликнуть на ссылку и, не совершая дополнительных действий, позвонить вам. Теперь можно добавлять номер телефона в блок контактов на вашем сайте.
Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:
Или можно добавить ссылку для звонка со Skype на телефон:
Как сделать ссылку на телефон HTML?
На сегодняшний день, ввиду того, что количество пользователей, которые используют для просмотра сайтов мобильные устройства, постоянно растет, стало очень популярным размещение на страницах сайта кликабельных ссылок на телефонные номера.
Ссылка на телефон HTML дает возможность посетителю сайта, в случае, если его заинтересовало ваше предложение, сразу же позвонить по данному номеру и сделать заказ на приобретение товара или услуги.
Навигация по статье:
- Протокол HTML5 для ссылок на телефон
- Решение проблемы с определением ссылки на телефон HTML на ПК
- Другие варианты протоколов HTML5
В этой статье я покажу вам, как сделать ссылку на телефон HTML, а так же покажу, как можно ее оформить при помощи CSS.
Протокол HTML5 для ссылок на телефон
Для того чтобы сделать ваш телефонный номер кликабельным его необходимо обернуть в тег … и в атрибуте href указать протокол tel и через двоеточие указать номер без пробелов и дефисов:
< a href = "tel:0955414642" >095 — 541 — 46 — 42 < / a >
Теперь клик по данной ссылке на телефон HTML будет восприниматься любым браузером на любом мобильном устройстве как команда к набору данного номера.
Решение проблемы с определением ссылки на телефон HTML на ПК
Показанную выше запись удобно использовать чтобы принимать заявки от посетителей с мобильных устройств. Но дело в том, что оформленная в таком виде ссылка на телефон HTML будет вызывать неудобство у тех пользователей, которые зашли на ваш сайт с компьютера. При клике по такой ссылке на ПК, в зависимости от браузера, будет выпадать ошибка, либо будет открываться для набора номера Skype или какая-то другая программа. Вряд ли кто-то из пользователей захочет позвонить вам на телефонный номер по Skype и такая функция, скорее всего, отпугнет клиента.
Для решения данной проблемы есть очень интересный скрипт. Но его использование немного затруднит добавление ссылки на телефон HTML.
-
1. На странице там, где вам нужно разместить телефонный номер, вставляем пустой блок с уникальным идентификатором. В моем случае phone-link:
Как в HTML сделать ссылку на телефон, емейл и скайп
В современном HTML появились новые возможности у ссылок – теперь по клику мы можем не только переходить на другие страницы и скачивать файлы, но и совершать звонки на телефоны, отправлять сообщения на почтовый ящик и даже звонить по скайпу.
Как сделать ссылку в HTML на телефон, скайп и e-mail
Все довольно просто:
+7 (495) 123-45-67 example@mail.ru someskype
Атрибут нашего тега , или hypertext reference, должен начинаться со специального слова, после которого идет двоеточие, и уже после мы пишем телефон, емейл или логин скайпа.
Кстати говоря, многие забывают выставлять ссылкам соответствующие события:
a:hover <> a:link <> a:visited <> a:active <>
:hover – вид ссылки при наведении,
:link – непосещенные ссылки,
:visited – посещенные ссылки,
:active – вид активной ссылки.
Соответствующие стили можно задать через вышеперечисленные псевдоклассы.
Как сделать кликабельный номер телефона на сайте?
Почему возникает такой вопрос? Не секрет, что большинство пользователей интернета посещают сайты со своих мобильных устройств. Чтобы вы не потеряли своего клиента, у него должна быть возможность позвонить вам прямо сейчас, просто кликнув по номеру телефона. Для реализации этой задачи предлагается специальная html-разметка: «>+7 (4012) 52 44 07 Результатом такой работы будет текст в виде номера +7 (4012) 52 44 07, кликнув по которому в телефоне в поле вызова номера, появится номер+74012524407. И пользователь вашего сайта сможет позвонить вам, не делая никаких лишних действий. Примечание: Текст между тегами может быть произвольным. А текст после tel: должен содержать телефонный номер в том формате, который вам нужен (с 8, +7, городской и т.д.) .
Инструкция 2
Как сделать кликабельный номер телефона на сайте? Почему возникает такой вопрос? Не секрет, что большинство пользователей интернета посещают сайты со своих мобильных устройств. Чтобы вы не потеряли своего клиента, у него должна быть возможность позвонить вам прямо сейчас, просто кликнув по номеру телефона. Чтобы добавить кликабельный номер телефона нужно: 1) Перейти в режим редактирования блока или ноды, где содержится редактируемый номер (При этом, ваш номер телефона будет расположен в текстовом поле страницы. 2) Выделить мышью номер. (в данное поле также можно вписать любой произвольный номер и текст) 3) В панели инструментов, щелкнуть по значку «Вставить/Редактировать ссылку» 4) Заполнить пустые окошки в открывшемся редакторе Тип ссылки: Ссылка Протокол: Другой В поле ссылка написать ваш номер в формате: Городской: tel:+74012304541 Мобильный: tel:+79118638675 5) Нажать кнопку «ок» 6) Пролистать страничку до самого низа, нажать кнопку «Сохранить блок» 7) Теперь ваша ссылка кликабельна Телефон в ссылке должен содержать телефонный номер в том формате, который нужен вам (с 8, +7, городской и т.д.). Теперь кликнув по вашему номеру, пользователь мобильного устройства будет иметь возможность мгновенно позвонить вам со своего мобильного устройства. Для вас это может быть полезно: Как сделать кликабельным скайп?