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

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

По умолчанию на мобильных телефонах номера телефона распознается автоматически и преобразуются в ссылки.

До:

<div class=phone>+7 (495) 123-45-67</div>
HTML

После:

<div class=phone><a href="tel:+74951234567">+7 (495) 123-45-67</a></div>
HTML

Чтобы задать нормальные стили на мобильных, нужно писать два правила.

.phone {
	color: #000;
	font-size: 16px;
	font-weight: 900;
}
.phone a {
	color: #000;
	font-size: 16px;
	font-weight: 900;
}
CSS

Или по атрибуту:

a[href^="tel:"] {
	color: #000;
	font-size: 16px;
	font-weight: 900;
}
CSS

Автоматическое распознавание телефонов работает не всегда корректно и срабатывает на большие цены. Его можно отключить, добавив метатег в <head> страницы и прописать ссылки у телефонов вручную.

<meta name="format-detection" content="telephone=no">
HTML

Замечена одна особенность – на андроид устройствах не всегда срабатывает клик по ссылке если в атрибуте href форматированный номер телефона.

<!-- Рабочая ссылка -->
<a href="tel:+74951234567">+7 (495) 123-45-67</a>

<!-- Нерабочая -->
<a href="tel:+7 (495) 123-45-67">+7 (495) 123-45-67</a>
HTML

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

function replace_phone_call($matches)
{
	$tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]);
	$tel = str_replace('+7', '8', $tel);
	return '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';
}
 
function replace_phone($text)
{
	return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]{9,}\d/', 'replace_phone_call', $text);
}
 
$text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567';
echo replace_phone($text);
PHP

Результат:

Позвоните по телефону <a href="tel:84951234567">+7 (495) 123-45-67</a>, 
или <a href="tel:88001234567">88001234567</a>

Также можно добавить проверку мобильных с помощью 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 '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';
}
 
function replace_phone($text)
{
	if (IS_MOBILE) {
		return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]{9,}\d/', 'replace_phone_call', $text);
	} else {
		return $text;
	}
}
 
$text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567';
echo replace_phone($text);
PHP

Или сделать на мобильных ссылку с номером телефона, а на десктопе ссылку на форму обратного звонка.

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 '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';		
	} else {
		return '<a class="modal" href="/callbaсk">' . $matches[0] . '</a>';	
	}
}
 
function replace_phone($text)
{
	return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]{9,}\d/', 'replace_phone_call', $text);
}
 
$text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567';
echo replace_phone($text);
PHP

Результат на десктопе и планшетах:

Позвоните по телефону <a class="modal" href="/callbak">+7 (495) 123-45-67</a>, 
или <a class="modal" href="/callbak">88001234567</a>

На мобильных:

Позвоните по телефону <a href="tel:84951234567">+7 (495) 123-45-67</a>, 
или <a href="tel:88001234567">88001234567</a>
23.08.2019, обновлено 18.11.2020
42679
Предыдущая запись Manifest.json

Комментарии 1

Alexander Saryechev Alexander Saryechev
14 октября 2021 в 18:34
0
Уже давно не пишут скобок, так как кодов городов сейчас нет. Бывшие коды городов стали частью номера телефона.

, чтобы добавить комментарий.

Другие публикации

Как дописать стили в атрибут style тегов HTML через PHP
Данный вопрос возникает при верстке писем т.к. стили прописанные в head в почтовых сервисах и программах не работают, а...
11461
+2
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
32193
+13
Отправка sms через «SMS Aero» в PHP
Для отправки SMS-сообщений со своего сайта можно воспользоваться сервисом SMS Aero.
2687
+3
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
29502
+10
Работа с директориями в PHP
Набор PHP функций для работы с директориями, получение списка файлов в папке, копирование и удаление содержимого папок.
17230
+1
Работа с FTP в PHP
Протокол FTP – предназначен для передачи файлов на удаленный хост. В PHP функции для работы с FTP как правило всегда доступны и не требуется установка дополнительного расширения.
6456
+1