как номер телефона сделать ссылкой
Как сделать активную ссылку на номер телефона на сайте
На WordPress основано большое количество сайтов, созданных с целью ведения или продвижения бизнеса. Для того чтобы потребители имели возможность связаться с вами, например, для получения услуги или приобретения товара, необходимо оставить свои контактные данные.
Одними из таких контактов является номер телефона. Когда-то пользователям приходилось находить услуги через браузер компьютера, списывать оттуда контактные данные и звонить. Сейчас же все намного проще, они сразу ищут нужную информацию со своих смартфонов.
В этом случае, ссылка на номер телефона на вашем сайте будет отличным решением, чтобы посетители не переписывали номер телефона, а нажали на эту ссылку, после чего сразу совершится вызов.
Ссылка на номер телефона для автонабора
Ссылка на номер телефона – это сегодня обычное дело. В HTML-5 эту возможность реализовать можно одной строчкой кода. Разместить номер вы можете в футере темы, хедере, боковой панели, или в контенте записей. Для этой цели также можно использовать текстовый виджет.
href – это атрибут создания ссылки, tel – это протокол HTML-5, который задает свойство ссылке, обозначая ее телефонной. После двоеточья телефонный номер, на который будет идти звонок. Между парными тегом находится содержание линка. Оно может быть произвольным, например, побуждение «Нажмите, для того чтобы позвонить!» или «Звонок мастеру». Можно просто написать номер телефона, так как на сайт могут заходить с компьютера и не все пользователи увидят при наведении на надпись «Позвоните нам!» всплывающую подсказку с номером на который нужно звонить.
Другие протоколы HTML-5
Вы не ограничены добавлением ссылки только на телефон. С помощью следующих протоколов вы сможете также:
Как видите, ссылка на номер телефона легко реализуется. И не только на номер телефона. Все благодаря современному языку HTML-5 и его новым возможностям.
Возможно, вам будет также интересно узнать о том, как сделать обычную ссылку. Об этом мы рассказали тут.
Как сделать ссылку на номер телефона в HTML: протокол tel:, оформление и советы
Недавно читал, что объемы мирового мобильного трафика уже превышают десктопных пользователей. В данном блоге этого пока не случилось, но в интернет-магазине одного из моих клиентов бОльшая часть людей заходит именно через планшеты/смартфоны. Поэтому меня попросили сделать продвинутую ссылку на телефон на сайте, которая при нажатии автоматически бы открывала соответствующее приложение с набором номера.
Некоторые устройства без проблем понимают написанные телефоны, например, слышал, что в Android для этого достаточно заключить линк в span:
При клике по тексту, в теории, весь номер должен выделиться, но на практике у меня это почему-то не получилось.
Лучше использовать в ссылке tel параметр:
Фишка работает с 2011 года, хотя не все браузеры одинаково с ней дружат(жили) — как это часто бывает в верстке, есть определенные нюансы. Поэтому я решил опубликовать немного инфы по теме из интересной англоязычной статьи.
Спецификация и поддержка
По факту tel: — это не опция «А» тега, а протокол (такой же как http: или mailto:, отвечающие за линки на веб-страницы и почтовые адреса соответственно). Конкретного и детального его описания в HMTL5, вроде бы, нет, но после принятия данного стандарта в iOS, он стал использоваться повсеместно.
Даже без спецификации многие браузеры вполне адекватно понимают ссылку на телефон в HTML, однако процесс обработки клика встречается разный: начиная от открытия диалогового окна с выбором приложения и заканчивая банальным игнорированием.
Как реагируют типовые программы:
Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.
Оформление ссылки tel: в HTML
Поскольку линк находится в теге А, то отображение ссылки номера телефона полностью зависит от его стилей. Например, если для А добавили класс phone-style, то будет:
Убираем подчеркивание с text-decoration чтобы элемент выглядел как текст.
Если хотите применить один и тот же стиль всем телефонам на сайте, то пишете:
С помощью псевдо класса before и представления символов в unicode можно добавить небольшую иконку в начале:
Советы по созданию ссылки на номер телефона
Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.
Определение мобильных устройств
Как я уже сказал выше, в декстопнах подобный линк срабатывает далеко не всегда, поэтому разумно использовать разный код под разные типы устройств. Чтобы опция функционировала только в мобильных браузерах добавляете в шаблон, например, следующий JavaScript:
Здесь, в зависимости от результата условия в IF, в блоке с создается либо ссылка на телефон с tel:, либо просто HTML текст.
SEO оптимизация
В оригинальной статье есть пример кода контактов для бизнес сайтов, где информация может быть использована в Google выдаче.
Beach Bunny Swimwear
Теоретически, в линке можно еще указать rel=»nofollow».
Убираем автоопределение
Если вы собираетесь внедрять сегодняшний урок в свой шаблон, то вероятнее всего захотите отключить автоопределение телефона в iOS. Как минимум, чтобы система не переопределила существующие стили. Для этого в HEAD дописываете строку:
Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.
Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?
Делаем номер телефона — ссылкой (кликабельный)
Опубликовано Roman K в 13.05.2019 13.05.2019
Что бы сделать номер телефона ссылкой, по нажатию на которую будет происходить вызов (с мобильного устройства) и переход в приложение «звонилки» с десктопа, достаточно вставить в HTML код, следующую конструкцию:
Пример как это выглядит ссылка на телефон на сайте:
Теперь разберемся в написаном
Конструкция … говорит браузеру, о том что содержимое которое находится внутри тега «a» (…) представляет из себя ссылку, которая ведет на адрес, в нашем случае адресом ссылки является телефон «tel:+79090010901». Все, что находится внутри тега «a» будет кликабельным и отображаться на странице сайта. Мы можем написать любое содержимое, при клике на которое состоится переход на функцию вызова.
Обратите внимание чтобы сделать номер телефона ссылкой, наполняя текст в визуальном редакторе, как на картинке ниже,
необходимо проделать следующее:
Выделяем необходимы необходимый текст, при нажатии на который будет происходить звонок инажимаем на кнопку «вставить/изменить ссылку»
вводим в поле, конструкцию «tel:88000090807» (без кавычек)
Таким же образом возможно сделать и другие ссылки:
Наше содержимое – ссылка на e-mail адрес;
Наше содержимое – послать смс сообщение;
Инструкция по ссылкам на Телеграм и WhatsApp будет в отдельных постах, так как у нее есть дополнительные возможности.
link::Как сделать ссылку с сайта в телеграм (материал уже готовится)
link::Как сделать ссылку с сайта в whatsapp (материал уже готовится)
Добавить ссылку на телефон
В конструкторе можно сделать так, чтобы читателю не пришлось копировать номер телефона, а он мог позвонить вам прямо из письма.
Разберем, как добавить ссылку на телефон в виде номера, текста, кнопки или иконки.
В виде номера
Поставьте курсор на то место в тексте, куда хотите добавить телефон, и выберите Insert/edit link.
Затем в Link Type укажите тип ссылки Tel, в поле Number добавьте номер телефона, поле Text to display оставьте пустым.
Телефон добавится в письмо в виде номера.
Если хотите убрать подчеркивание, снимите галочку в поле Underline Link.
В текст
Напишите в текстовом блоке слово или фразу, на которую вы хотите добавить ссылку на телефон. Например, «Позвонить».
Выделите текст и выберите Insert/edit link, в Link Type снова укажите значение Tel, а в поле Number впишите телефон.
Теперь при клике на текст «Позвонить» у читателей на мобильных будет открываться телефон с набранным номером.
На кнопку
Для начала добавьте в письмо блок «Кнопка». Затем нажмите на блок и в свойствах выберите нужный тип ссылки — «Позвонить».
Укажите номер телефона в формате +9999999999. На самой кнопке можете написать любой текст.
На иконку
Добавьте блок «Иконка» и выберите изображение телефонной трубки. Вы можете загрузить иконку в сервис или добавить ссылку на нужную картинку в свойствах блока слева.
Далее нажмите «Подробнее». Выберите тип ссылки «Позвонить» и укажите номер телефона.
К иконке можно добавить любой текст и разместить его в нужном месте с помощью выравнивания.
Мы добавили ссылку на телефон в письмо. Теперь клиент сможет быстро набрать ваш номер, нажав на слово, кнопку, картинку или телефон в тексте. По ссылке откроется приложение телефон с уже введенным в него номером, останется лишь нажать кнопку вызова.
Как сделать кликабельный номер телефона на сайте
HTML-код
Сайт на WordPress
Сайт на mottor (LPmotor)
Сайт на Wix
Сайт на Tilda
Как отслеживать клики по номеру телефона
Как пригнать 551 заявку на 100к бюджета в B2B тематике. Кейс по продаже аккумуляторных батарей Статья
Маркетинговый анализ аудитории перед созданием продающего контента Статья
Facebook Business Manager: полное практическое руководство Статья
нашела похожую статью и было тоже полезно бы прочесть https://karpenko.studio/blog/klikabelnyj-nomer-telefona-na-sajte/
Реклама в Google Картах: все функции сервиса, настройка и анализ местной поисковой рекламы Статья
6 способов перевести аудио и видео в текст Статья
Android против iOS или как выбрать платформу разработки приложения Статья
Клиенты в диджитал: какие типы бывают, чего они хотят и как оправдать ожидания Статья
Как увеличить видимость карточки Google My Business до 7 раз: лайфхаки SEO-студии 146% Статья
Инструкция по созданию сайта-агрегатора с примерами Статья