Flamio.ru

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

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

Как сделать ссылку на номер телефона в 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 — пытается инициировать набор номера.
  • Andro >Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.

    Оформление ссылки tel: в HTML

    Поскольку линк находится в теге А, то отображение ссылки номера телефона полностью зависит от его стилей. Например, если для А добавили класс phone-style, то будет:

    Убираем подчеркивание с text-decoration чтобы элемент выглядел как текст.

    Если хотите применить один и тот же стиль всем телефонам на сайте, то пишете:

    С помощью псевдо класса before и представления символов в unicode можно добавить небольшую иконку в начале:

    Советы по созданию ссылки на номер телефона

    Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.

    Определение мобильных устройств

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

    Здесь, в зависимости от результата условия в IF, в блоке с >

    SEO оптимизация

    В оригинальной статье есть пример кода контактов для бизнес сайтов, где информация может быть использована в Google выдаче.

    Beach Bunny Swimwear

    Теоретически, в линке можно еще указать rel=»nofollow».

    Убираем автоопределение

    Если вы собираетесь внедрять сегодняшний урок в свой шаблон, то вероятнее всего захотите отключить автоопределение телефона в iOS. Как минимум, чтобы система не переопределила существующие стили. Для этого в HEAD дописываете строку:

    Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.

    Читать еще:  Создания сайта бесплатно

    Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?

    Делаем кликабельным номер телефона, Whatsapp, Telegram и E-mail

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

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

    Разберемся, как проработать такую маленькую, но очень важную деталь сайта, как кликабельные кнопки связи (телефон, почта, мессенджеры).

    Номер телефона

    Чтобы при клике на номер телефона начинался звонок нужно сделать следующие шаги.

    HTML-код сайта

    Некликабельный номер телефона (просто текст) может выглядеть в коде по-разному, например, так:

    Чтобы сделать обычный текст кликабельным нужно сделать из него гиперссылку и указать действие, которое будет совершено по клику (в нашем случае набор номера).

    Для создания любых ссылок используется тег . Между тегами располагается текст ссылки или картинка (например, иконка трубки). Атрибут href=“” указывает адрес ссылки или действие. Для набора номера используется параметр: tel:+7XXXXXXXXXX, где +7XXXXXXXXXX — нужный номер телефона.

    Если доработать предыдущие примеры, то получится следующий код:

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

    Зная, как устроен HTML-код вы легко сможете реализовать на любом движке или конструкторе.

    В WordPress

    Метод создания кликабельной ссылки на движке WordPress аналогичен пункту «HTML-код сайта» данной статьи. Главная задача в том, чтобы найти нужный фрагмент кода в админ-панели.

    Шапка сайта

    1. Если телефон находится в шапке сайта, то заходим в административной панели: «Внешний вид» -> «Редактор».
    2. Справа, в Файлах темы находим «header.php», нажимаем на него.
    3. В коде находим телефон. Для быстрого поиска кликнете левой кнопкой мыши на поле с кодом и нажмите комбинацию на клавиатуре: “Ctrl” + “F”. Затем введите несколько цифр телефона и нажмите “Enter”. Нужный фрагменты станут выделены желтым цветом.

    1. Теперь остается обернуть простой текст в гиперссылку. Как это сделать смотрите в предыдущем пункте статьи.В данному случае получается по итогу так:

    1. Нажимаем “Обновить файл” и изменения сохраняются. Проверяем работоспособность на сайте. Готово!

    Записи/страница

    1. Если телефон находится в записи, то переходим в редактор записи/страницы.

    1. Переходим в редактор кода, нажав на вкладку “Текст”:

    1. Выделяем номер и нажимаем кнопку “link”. В поле “URL” добавляем гиперссылку для номера:

    1. Получается так:

    1. Нажимаем “Обновить” и страница сохраняется. Готово!

    В Tilda

    Zero-блок

    • Переходим к редактированию блока, нажав на кнопку “Редактировать блок” в конструкторе нужной страницы:

    • Выделяем телефон и нажимаем кнопку “Setting”:

    • В поле Link в настройках вводим ссылку: “tel:+ номер телефона с +7”

    • Сохраняем изменения в блоке и публикуем страницу.

    Стандартный блок

    • Нажимаем “Контент”:

    • Находим нужный блок, выделяем телефон и нажимаем иконку “Ссылка”:

    • Выбираем пункт: “Вставить ссылку”:

    • В поле “URL” вводим “tel:+ номер телефона с +7” и нажимаем кнопку “Вставить”:

    • Сохраняем изменения в блоке и публикуем страницу.

    Активная ссылка на WhatsApp

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

    Для размещения кликабельного текста на сайте подойдут все инструкции, как для телефонного номера.

    Кликабельная иконка для сайта

    Но обычно кликабельным делается не номер телефона, а специальная иконка WhatsApp. Для этого:

    1. Находим иконку, которую будем использовать. Для этого подойдет, например, сервис Flaticon.com.

    1. Выбираем подходящее по стилистике изображение. Кликаем на него, выбираем формат SVG.
    2. Дальше будет показан алгоритм действия, если сайт на Тильде. Если сайт на другой CMS, то нужно будет загрузить файл на хостинг и добавить небольшой HTML и CSS-коды на сайт, чтобы разместить иконку, например, в шапке. Для этого понадобятся минимальные знания верстки, либо помощь верстальщика.
    3. На Тильде переходим в редактирование Zero блока.
    4. Выбираем пункт добавить изображение и загружаем иконку.
    Читать еще:  Как сделать принтскрин всей страницы сайта

    1. Масштабируем ее и размещаем в нужном месте блока.
    2. Добавляем в поле Link ссылку https://wa.me/номертелефона

    1. Сохраняем изменения в блоке и публикуем страниц сайта. Готово! Кнопка Whatsapp теперь кликабельная и сразу перенаправляет пользователя на диалог в мессенджере.

    Ссылка на Telegram

    С Телеграм тот же алгоритм действий, что и Whatsapp (смотрите предыдущий пункт данной статьи), но основное отличие в том, что в РФ, например стандартные ссылки в формате https://t.me/seoforge не работают. Поэтому необходимо использовать редирект через такие сервисы, как tele.gg, telegram.im и другие. Сервисы полностью бесплатны и существует большой список таких сервисов без сторонней рекламы, используйте именно их.

    Ссылка будет выглядеть следующим образом.

    На канал @seoforge в Телеграм: telegram.im/seoforge

    На пользователя @webengineer в Телеграм:

    Кликабельная почта E-mail

    При клике на e-mail открывался почтовый клиент:

    Кликабельный Skype

    При клике на кнопку открывался чат в Skype с указанным пользователем пользователем:

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

    Часто задаваемые вопросы

    Мой сайт отключен. Что делать?

    Как использовать свои шаблоны в системе?

    Как изменить URL, Title, Description и Keywords страницы сайта?

    Предоставляется ли доступ по FTP?

    Можно ли временно закрыть сайт, сделать его недоступным?

    Вопросы по редактированию сайта

    Закон о персональных данных (152-ФЗ)

    Поиск по сайту не находит новую страницу. Почему?

    Сайт — редактирование информации

    Включение и отключение редактирования

    Добавление категории или товара

    Как разместить фотографии на сайте

    Работа со слайдером

    Работа с таблицами

    Добавление видео на сайт

    Добавление аудиозаписи на сайт

    Как сделать баннер?

    Как создать личный кабинет

    Лендинг: управление меню

    Работа с CRM и обратная связь

    Работа с файловым менеджером

    Редактируемая форма при создании заказа

    Создание заказов в карточке клиента

    Доставка через СДЭК

    Интеграция с 1С:УТ

    Интеграция с 1С:УНФ

    Изменение количества товаров

    Фильтрация по опциональным свойствам

    Интеграция с интернет-сервисом «МойСклад»

    Контент — содержимое сайта

    Структура и меню

    Копирование страниц в структуре сайта

    Управление формами обратной связи

    Запись на прием

    Дизайн — внешний вид сайта

    Пример работы с CSS

    Изменение внешнего вида сайта

    Домены — имя сайта

    Как добавить поддомен

    Распространенные ошибки DNS

    Почта на вашем домене

    Создание почты для домена в Яндекс.Коннект

    Реклама и SEO — поисковая оптимизация

    Контекстная реклама и продвижение

    Подтверждение владения сайтом

    Карта сайта (sitemap.xml)

    Перенаправления страниц (редиректы)

    Отображение сайта в поисковой выдаче

    Как сохранить посещаемость сайта при переезде на другой домен

    Вывод сайта из системы

    Настройки — управление сайтом

    Подключение reCaptcha от Google

    Удаление временных файлов

    Установка CallbackHunter на сайт

    Настройки партнерской программы

    Партнерская реферальная ссылка

    Настройки сайта партнера на другом хостинге для создания сайтов на домене партнера

    Работа с партнерской программой через API

    Для того, чтобы сделать номер кликабельным (для звонков с мобильной версии сайта по клику на номер телефона) , необходимо получить код селектора элемента и вставить его в подготовленный нами скрипт.

    Удобнее всего искать код нужных элементов с помощью встроенного редактора в браузерах Google Chrome, Mozilla Firefox и Internet Explorer, для его вызова нажмите F12 и щелкните на иконке анализа элементов страницы в левом верхнем углу (отмечено красными стрелками). В данном примере мы используем devTools от Google Chrome:

    Если необходимо найти элемент в мобильной версии сайта, нужно нажать иконку эмулятора (отмечено красными стрелками):

    После этого выбираем нужный нам элемент(отмечено красными стрелками), он выделяется синим цветом, и внизу в devTools подсвечивается код этого элемента.

    Необходимо навести курсор на выделенный фрагмент кода, нажать правую кнопку мыши, в открывшемся контекстном меню необходимо выбрать “Copy” -> “Copy selector” (отмечено красными стрелками). В этот момент определенный код скопируется в буфер обмена.

    Затем, из буфера обмена необходимо вставить полученный код вместо слова “РЕЗУЛЬТАТ” в следующий код:

    После всех произведенных действий необходимо вставить полученный код в раздел “Реклама/SEO” -> “Код счетчика.
    Также, потребуется добавить код ниже в раздел “Реклама/SEO” -> «Подтверждение владения сайтом»:

    Читать еще:  Нарисовать прототип сайта онлайн

    Если требуется сделать несколько номеров кликабельными, необходимо скопировать код со слов “/*Начало блока кода*/” до “/*Конец блока кода*/”, внеся дополнительно изменения: нужно добавить к слову “check” (оно встречается в двух местах) цифру 1. Для следующего блока — 2, и так далее, а также подставить вместо слова “РЕЗУЛЬТАТ” значение для другого номера.

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

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

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

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

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

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

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

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

    • sms – послать смс сообщение;
    • fax – для отправки факса.

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

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

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

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

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

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

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

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

    Выводы

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

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

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

  • Ссылка на основную публикацию
    Adblock
    detector