Как сделать ссылку для звонка
Как сделать ссылку на номер телефона в 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 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.
Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?
Как сделать кликабельный телефон на сайте
С каждым годом стремительно растет количество интернет-пользователей, использующих мобильные платформы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность позвонить прямо сейчас.
Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).
Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.
Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.
Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:
То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.
Выглядеть это будет так:
После этого пользователи мобильных устройств смогут просто кликнуть на ссылку и, не совершая дополнительных действий, позвонить вам. Теперь можно добавлять номер телефона в блок контактов на вашем сайте.
Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:
Или можно добавить ссылку для звонка со Skype на телефон:
Как сделать активную ссылку на номер телефона на сайте
На WordPress основано большое количество сайтов, созданных с целью ведения или продвижения бизнеса. Для того чтобы потребители имели возможность связаться с вами, например, для получения услуги или приобретения товара, необходимо оставить свои контактные данные.
Одними из таких контактов является номер телефона. Когда-то пользователям приходилось находить услуги через браузер компьютера, списывать оттуда контактные данные и звонить. Сейчас же все намного проще, они сразу ищут нужную информацию со своих смартфонов.
В этом случае, ссылка на номер телефона на вашем сайте будет отличным решением, чтобы посетители не переписывали номер телефона, а нажали на эту ссылку, после чего сразу совершится вызов.
Ссылка на номер телефона для автонабора
Ссылка на номер телефона – это сегодня обычное дело. В HTML-5 эту возможность реализовать можно одной строчкой кода. Разместить номер вы можете в футере темы, хедере, боковой панели, или в контенте записей. Для этой цели также можно использовать текстовый виджет.
href – это атрибут создания ссылки, tel – это протокол HTML-5, который задает свойство ссылке, обозначая ее телефонной. После двоеточья телефонный номер, на который будет идти звонок. Между парными тегом находится содержание линка. Оно может быть произвольным, например, побуждение «Нажмите, для того чтобы позвонить!» или «Звонок мастеру». Можно просто написать номер телефона, так как на сайт могут заходить с компьютера и не все пользователи увидят при наведении на надпись «Позвоните нам!» всплывающую подсказку с номером на который нужно звонить.
Другие протоколы HTML-5
Вы не ограничены добавлением ссылки только на телефон. С помощью следующих протоколов вы сможете также:
Как видите, ссылка на номер телефона легко реализуется. И не только на номер телефона. Все благодаря современному языку HTML-5 и его новым возможностям.
Возможно, вам будет также интересно узнать о том, как сделать обычную ссылку. Об этом мы рассказали тут.
Ссылка на звонок: для чего она нужна и как ей пользоваться?
Хотите научиться отправлять ссылку на звонок в ВК? Это, на самом деле очень прикольно! Представьте, вы поссорились с девушкой и ищете способ с ней мило помириться, да еще и, чтобы с юмором. Отправляете ей невинную ссылочку. Она, движимая любопытством, разумеется, по ней переходит. И автоматически начинает вам звонить! Конечно, она может в тот же момент отменить вызов, но вы успеете получить сообщение о пропущенном или отмененном звонке. И будете иметь вполне законный повод перезвонить. Ну, а дальше уже, как пойдет – зависит от вашего красноречия, интуиции и прочих свойств, вплоть до знания ее характера и привычек.
Кстати, ссылка со звонком в ВК – это классный способ оригинально познакомиться с парнем или девушкой. Вроде как, первый шаг поступает оттуда, но при этом, вы оба понимаете, что инициатор – вы. Прикольно и необычно!
Можно найти массу причин, по которым человеку может понадобиться вставить ссылку на звонок в ВК. От знакомства, шутки или розыгрыша до ненавязчивого напоминания о себе. Именно поэтому мы и решили рассказать, как можно сделать ссылку на звонок в ВК, чтобы позвонить кому-то, сам того не желая. Мы расскажем, как ее сделать, как скопировать, распознать (чтобы самому не попасться) и как отправить.
Даже если прямо сейчас вам и не нужно знать, как в ВК скинуть ссылку на звонок, рекомендуем, все же, ознакомиться с этими инструкциями. Тем более, там все очень просто, без необходимости устанавливать левый софт, приложения или использовать веб сервисы.
Надеемся, вы вас убедили, давайте уже переходить к делу!
Как сделать ссылку на вызов в ВК?
Ну что же, пришла пора рассказать, как отправить ссылку на звонок в ВК. Для этого вам понадобится применить заготовленный шаблон и узнать ID страницы пользователя, которому должен позвонить получатель ссылки.
Например, вы хотите, чтобы человек позвонил вам:
Как только он совершит по ней переход, автоматически запустится вызов вам. Обратите внимание, чтобы прикол сработал, важно, чтобы получатель совершил переход именно с мобильного телефона. Даже если вам удастся создать правильную ссылку на вызов в ВК, но человек кликнет по ней с компьютера, а, как известно, опция звонков работает лишь в мобильной утилите, шутка не удастся. Вместо запуска дозвона пользователя перекинет на его родной раздел «Новости», и только.
Как и где узнать ID страницы в ВК?
Итак, где взять заготовку для ссылки на звонок в ВК, мы вам рассказали – можете скопировать прямо из этой статьи. Однако, не все знают, как определить ID профиля.
ID – это идентификационный номер страницы, уникальный код, который присваивается каждому новому профилю.
Теперь узнать идентификационный номер для вас – не проблема. Вы сможете кинуть ссылку на звонок в ВК любому человеку. Самое главное запомните – нужно вставлять не ID получателя ссылки, а ID того, кому вы хотите, чтобы он позвонил.
Сами подумайте, если вы вздумаете оставить челу ссылку на звонок в ВК с его собственной айдишкой, он, как бы, попытается позвонить сам себе. Такая опция в ВК не работает, поэтому вся затея провалится.
Как скопировать и отправить?
Далее разберем, как скопировать ссылку на звонок в ВК и какими способами ее можно отправить.
Ссылку на видеозвонок в ВК пока еще не придумали, но, если человек захочет, он сможет переключить аудиовызов на видео, прямо во время звонка. Для этого нужно просто тапнуть по значку с видеокамерой в правом верхнему углу дисплея.
Ну что же, теперь вы знаете, как найти ссылку на звонок в ВК, а точнее, как ее самому создать. Рекомендуем закинуть заготовку куда-нибудь в заметки телефона!
Пара советов в заключение
Ну и в завершение, дадим пару советов, как самому не попасть в такую ловушку:
Желаем вам никогда не попасть впросак. А еще – от души разыграть близкого друга.
Делаем номер телефона — ссылкой (кликабельный)
Опубликовано Roman K в 13.05.2019 13.05.2019
Что бы сделать номер телефона ссылкой, по нажатию на которую будет происходить вызов (с мобильного устройства) и переход в приложение «звонилки» с десктопа, достаточно вставить в HTML код, следующую конструкцию:
Пример как это выглядит ссылка на телефон на сайте:
Теперь разберемся в написаном
Конструкция … говорит браузеру, о том что содержимое которое находится внутри тега «a» (…) представляет из себя ссылку, которая ведет на адрес, в нашем случае адресом ссылки является телефон «tel:+79090010901». Все, что находится внутри тега «a» будет кликабельным и отображаться на странице сайта. Мы можем написать любое содержимое, при клике на которое состоится переход на функцию вызова.
Обратите внимание чтобы сделать номер телефона ссылкой, наполняя текст в визуальном редакторе, как на картинке ниже,
необходимо проделать следующее:
Выделяем необходимы необходимый текст, при нажатии на который будет происходить звонок инажимаем на кнопку «вставить/изменить ссылку»
вводим в поле, конструкцию «tel:88000090807» (без кавычек)
Таким же образом возможно сделать и другие ссылки:
Наше содержимое – ссылка на e-mail адрес;
Наше содержимое – послать смс сообщение;
Инструкция по ссылкам на Телеграм и WhatsApp будет в отдельных постах, так как у нее есть дополнительные возможности.
link::Как сделать ссылку с сайта в телеграм (материал уже готовится)
link::Как сделать ссылку с сайта в whatsapp (материал уже готовится)