В последнее время нельзя пренебрегать кликабельными номерами телефонов т.к. количество клиентов, использующих мобильные телефоны превысило десктопы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность беспрепятственно позвонить.
1.Оформление ссылки tel
По умолчанию на мобильных телефонах номера телефона распознается автоматически и преобразуются в ссылки.
До:
<div class=phone>+7 (495) 123-45-67</div>
После:
<div class=phone><a href=”tel:+74951234567″>+7 (495) 123-45-67</a></div>
Чтобы задать нормальные стили на мобильных, нужно писать два правила.
.phone {
color: #000;
font-size: 16px;
font-weight: 900;
}
.phone a {
color: #000;
font-size: 16px;
font-weight: 900;
}
Или по атрибуту:
a[href^=”tel:”] {
color: #000;
font-size: 16px;
font-weight: 900;
}
2.Отключить распознавание телефонов
Автоматическое распознавание телефонов работает не всегда корректно и срабатывает на большие цены. Его можно отключить, добавив метатег в <head> страницы и прописать ссылки у телефонов вручную.
<meta name=”format-detection” content=”telephone=no”>
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>
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);
Результат:
Позвоните по телефону <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);
Или сделать на мобильных ссылку с номером телефона, а на десктопе ссылку на форму обратного звонка.
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);
Результат на десктопе и планшетах:
Позвоните по телефону <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>
