- How to mark-up phone numbers?
- Номер телефона на сайте
- Оформление ссылки tel
- До:
- После:
- Отключить распознавание телефонов
- Оборачивание телефонов ссылками
- Обвернуть телефон регулярным выражением
- Результат:
- Результат на десктопе и планшетах:
- На мобильных:
- Как сделать кликабельным номер телефона или кнопку вызова
- Формирование ссылки с атрибутом tel
- Форматируем телефонный номер
How to mark-up phone numbers?
I want to mark up a phone number as callable link in an HTML document. I have read the microformats approach, and I know, that the tel: scheme would be standard, but is quite literally nowhere implemented. Skype defines, as far as I know, skype: and callto: , the latter having gained some popularity. I assume, that other companies have either other schemes or jump on the callto: train. What would be a best practice to mark-up a phone number, so that as many people as possible with VoIP software can just click on a link to get a call? Bonus question: Does anyone know about complications with emergency numbers such as 911 in US or 110 in Germany? Update: Microsoft NetMeeting takes callto: schemes under WinXP. This question suggests, that Microsoft Office Communicator will handle tel: schemes but not callto: ones. Great, Redmond! Update 2: Two and a half years later now. It seems to boil down to what you want to do with the number. In mobile context, tel: is the way to go. Targeting desktops it’s up to you, if you think your users are more Skype people ( callto: ) or will more likely have something like Google Voice ( tel: ) installed. My personal opinion is, when in doubt use tel: (in line with @Sidnicious’ answer). Update 3: User @rybo111 noted, that Skype in Chrome has meanwhile jumped on the tel: bandwagon. I cannot verify this, because no machine with both at hand, but if it’s true, it means we have finally a winner here: tel:
Номер телефона на сайте
В последнее время нельзя пренебрегать кликабельными номерами телефонов т.к. количество клиентов, использующих мобильные телефоны превысило десктопы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность беспрепятственно позвонить.
Оформление ссылки tel
По умолчанию на мобильных телефонах номера телефона распознается автоматически и преобразуются в ссылки.
До:
После:
Чтобы задать нормальные стили на мобильных, нужно писать два правила.
Отключить распознавание телефонов
Автоматическое распознавание телефонов работает не всегда корректно и срабатывает на большие цены. Его можно отключить, добавив метатег в страницы и прописать ссылки у телефонов вручную.
Оборачивание телефонов ссылками
Замечена одна особенность – на андроид устройствах не всегда срабатывает клик по ссылке если в атрибуте href форматированный номер телефона.
Обвернуть телефон регулярным выражением
Если телефонов много, то лучше автоматизировать замену с помощью регулярного выражения.
function replace_phone_call($matches) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > function replace_phone($text) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);
Результат:
Также можно добавить проверку мобильных с помощью mobiledetect и на десктопе ссылки не выводить.
require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet()); function replace_phone_call($matches) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > function replace_phone($text) < if (IS_MOBILE) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > else < return $text; >> $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);
Или сделать на мобильных ссылку с номером телефона, а на десктопе ссылку на форму обратного звонка.
require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet()); function replace_phone_call($matches) < if (IS_MOBILE) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > else < return '' . $matches[0] . ''; > > function replace_phone($text) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);
Результат на десктопе и планшетах:
На мобильных:
Как сделать кликабельным номер телефона или кнопку вызова
У вас нет необходимости использовать JS для решения подобных задачи, такие вещи работают на уровне HTML.
По правилам HTML номер телефона, емейл и прочие мета-данные необходимо помещать в тег ссылки:
Чтобы разместить номер телефона, на который можно нажать и позвонить необходимо использовать аттрибут тега ссылки:
Аналогично будет и с e-mail.
Так же через тег ссылки можно открывать и любые другие приложения пользователя, к примеру Skype.
Если мой ответ Вам помог, то проголосуйте за него пожалуйста.
Здравствуйте, спасибо за ответ. Да это если один телефон или пять, о когда их тысячи и они выводятся с БД, как в таких случаях ?
Точно так же, но вместо номера телефона в моем примере выводить номер телефона из БД. Что у вас за CMS?
Самописная, тот код что в вопросе, выводит номер на странице объявления, потом javascript и еще страница с запросом в БД
Я расскажу, как бы я это реализовал) Имем, к примеру, в БД 1000 фирм и у каждой свой телефон. Для начала определимся, что будет служить ключом для вывода какой то конкретной строки из БД, это может быть название фирмы или адрес, главное, что бы этот ключ был уникальным для каждой строки
«слушаете» пользовательский ввод, например через addEventListener(‘input’, searching) — в данном случае ‘input’ это будет метод, на который реагирует JS, а searching функция, которая и будет «икать». Давайте по порядку:
// Обращаемся к инпуту и начинаем слушать изменения let input = document.getElementById('input').addEventListener('input', searching); // Тут будет подгружен номер телефона let out = document.getElementById('out');
в теле JS запроса создаем простейший запрос, не требующий обновлений страницы:
// та самая функция searching function searching() < let inputed_data = document.getElementById('input').value; out.style.display = 'block'; fetch('php/handlers/helper.php?input='+inputed_data) .then(data =>< return data.text() >) .then(data => < out.innerHTML = data; >) >
Ну а теперь непосредственно обработчик, он тоже очень простенький:
query("SELECT * FROM `firms` WHERE `Main_title` LIKE '%$looking_for%' "); return $sql_looking_for_firms; > // теперь результат кладем в переменную, я для удобства назвал ее так же как и функцию $looking_in_articles = looking_in_articles()
Обратите внимание, что нужно использовать то соединение с БД, которое у вас реализовано, я например через PDO подключаюсь
Это довольно старенький пример, из моих первых больших проектов, но он рабочий.
Не нужно копировать код, разумеется, главное поймите суть.
Результат выведите в конце скрипта обработчика недофункцией echo, текст в результате работы обработчика появится в out вашего JS файла
Формирование ссылки с атрибутом tel
Большинство мобильных гаджетов с доступом к сети интернет одновременно являются телефонами. Поэтому очень удобно номера телефонов сайта делать в виде ссылок, клики по которым вызывают встроенное приложение для звонка. Удобно в первую очередь для посетителей вашего ресурса.
Для этого существует атрибут tel. URI-схемы есть практически во всех мобильных устройствах: браузерах Safari на IOS, Android Browser, WebOS Browser, Symbian браузер, Internet Explorer и Opera Mini.
Конечно, можно в нескольких местах шаблона сделать такую запись:
Но если номер потребуется сменить, придется редактировать код HTML. Это нецелесообразно.
Правильнее будет константы вынести в системные переменные, указав там телефон в понятном формате. А форматирование номера для использования с атрибутом tel возложить на сниппет. Он удалит скобки, дефисы и пробелы.
Форматируем телефонный номер
Создаем сниппет с названием tel_phone следующего содержания:
Вызываем его таким образом:
Здесь number – поле, содержащее сам номер телефона в обычном формате, к примеру +7 (XXX) XXX-XX-XX, а tel_phone, как решили – имя сниппета.
В результате форматирование произойдет автоматически, код страницы примет нужный вид: