1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Как сделать ссылку на номер телефона в HTML: протокол tel:, оформление и советы

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

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

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

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

Фишка работает с 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, то будет:

    Добавление гиперссылки в документ Office на мобильном устройстве

    Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке) .

    Основные гиперссылки можно вставить в любой документ Office на мобильном устройстве. В Word можно также ввести отображаемый текст для любого можно вставить URL-адреса.

    PowerPoint также можно вводить отображаемый текст для любого можно вставить URL-адреса.

    Чтобы просмотреть эту функцию в PowerPoint, должен быть изнутри Office

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

    В любом документе Office

    Основные гиперссылки можно добавить в документ Office на мобильном устройстве, просто введите допустимый URL-адрес, за которым следует возврата каретки. Например введите www.wikipedia.com или http://wikipedia.com и затем нажмите кнопку Вернуть. Office распознает текст как URL-адрес и вставка гиперссылки.

    В Word и PowerPoint

    Помимо команды создания веб-ссылку основные «http», можно также использовать синтаксис «mailto» для создания связи, который можно будет открыть сообщения электронной почты. (Пример: mailto:info@contoso.com)

    Читать еще:  Как сделать подарок из носков для мужчины

    На планшете с Android откройте вкладку Вставка.

    На телефоне с Android нажмите значок «Правка» в верхней части экрана, выберите Главная и нажмите Вставка.

    Введите отображаемый текст и адрес ссылки.

    Помимо команды создания веб-ссылку основные «http», можно также использовать синтаксис «mailto» для создания связи, который можно будет открыть сообщения электронной почты. (Пример: mailto:info@contoso.com)

    На iPhone в верхней части экрана нажмите кнопку Правка и выберите Главная.

    Коснитесь элементов Вставка > Ссылка.

    Введите отображаемый текст и адрес ссылки.

    На iPhone нажмите Готово. На iPad просто коснитесь экрана за пределами диалогового окна, чтобы закрыть его.

    На планшете с Windows откройте вкладку Вставка.

    На телефоне с Windows нажмите Дополнительно в нижней части экрана, откройте вкладку Главная и нажмите Вставка.

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

    12 марта 2018 года. Опубликовано в разделах: Внеклассное чтение. 4161

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

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

    Первый способ, как сделать ссылку на телефон на сайте

    Открываем текстовый редактор и изменяем написание номера следующим образом: +7(123)-456-78-9

    Или: Свяжитесь с нами (текст может быть каким угодно).

    То есть в атрибуте “href” должен быть указан параметр “tel” и номер телефона в нужном формате, либо побуждающая к действию фраза. Данная строка кода может размещаться в хедере, футере, виджетах, отдельных блоках страницы. Атрибут “tel” дает понять браузеру, что содержимое контейнера является ничем иным, как телефонным номером. Также, при необходимости можно использовать следующие параметры:

    • sms – послать смс сообщение;
    • fax – для отправки факса.
    Читать еще:  Как сделать флеш игру на весь экран

    Данный способ решит проблему при использовании юзером мобильного браузера, однако при работе с десктопа ссылка при клике будет перезагружать страницу либо выводить ошибку, в зависимости от версии программы. Потому можно воспользоваться тегом “callto”, который перенаправит пользователя на установления соединения в Skype.

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

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

    Данный метод подразумевает работу на информационной странице какого-либо движка. Мы возьмем в качестве примера Joomla.

    В текстовом редакторе CMS выделяем текст с номером или любым другим текстом, под которым будет скрываться линк, далее жмем на кнопку “Вставить ссылку” (link.desc), находящуюся на панели инструментов. Прописываем в соответствующих полях нужные нам данные. В поле URL пишем тег “tel:” и сам номер, начинающийся со знака “+”. Сохраняем. Вуаля.

    Способ третий

    Если вы используете популярную систему управления контентом WordPress, то можете применить плагин, позволяющий сделать кликабельный номер телефона на сайте. Встречайте — CallPhone’r. Этот модуль выводится на каждой странице портала иконку, при нажатии на которую мобильное устройство переходит в режим вызова. Настройки очень простые, представлены на скриншоте ниже.

    Также имеется возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.

    Выводы

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

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

    – Только качественный трафик из Яндекса и Google
    – Понятная отчетность о работе и о планах работ
    – Полная прозрачность работ

    Источники:

    http://tods-blog.com.ua/web-development/tel-link/
    http://support.office.com/ru-ru/article/%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8-%D0%B2-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82-office-%D0%BD%D0%B0-%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC-%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B5-6516c8d7-b769-420e-91c3-9f0e525c5416
    http://semantica.in/blog/kak-sdelat-nomer-telefona-na-sajte-klikabelnym.html

    Ссылка на основную публикацию
    Статьи c упоминанием слов:

    Adblock
    detector
    ×
    ×