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

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

1

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

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

До:

<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
2

Отключить распознавание телефонов

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

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

Оборачивание телефонов ссылками

Замечена одна особенность – на андроид устройствах не всегда срабатывает клик по ссылке если в атрибуте 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
4

Обвернуть телефон регулярным выражением

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

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 53
Предыдущая запись Manifest.json

Поделится

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

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать...
Набор PHP функций для работы с файлами и директориями, получение списка файлов в папке, безопасное сохранение файлов.
Для форматирования текста иногда требуется заменить все кавычки в тексте на французские «ёлочки», сделать...
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...