Как скрыть E-mail и номер телефона на сайте



Вы создали сайт и хотите указать на нём свои контакты для связи: адрес, телефоны и адрес электронной почты email.

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

Как можно от этого защититься?

В этой статье я предложу Вам оригинальный способ защиты.

Спам-боты используют обычные регулярные выражения (regular expession) в своей работе, чтобы распознавать адрес электронной почты на вашем сайте, если адрес опубликован в виде обычного текста, но вы можете обмануть ботов, скрыв ваш адрес электронной почты с помощью простых CSS и JavaScript методов. Также можно вместо адресов размещать на сайте картинки их обозначением.

Я предлагаю совместить два эти варианта.

Как это работает.

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

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

Посмотреть пример работы можно на сайте Мастер Ok — Комплекс ремонтных услуг в Нижнем Новгороде

Как же это сделать?

В самом начале вам нужно подготовить небольшие картинки с изображением номера телефона и адресом электронной почты e-mail.

На 90% современных сайтов используется язык JavaScript, а в частности библиотека jQuery.

Для этого нужно в коде страницы найти строку с подключением данной библиотеки:

[html]

<script src="jquery/jquery.min.js"></script>

[/html]

Она должна быть подобного вида, можно поискать сроку jquery.

Мы создаем дополнительный JavaScript-файл следующего вида:

[code lang=»js»]

$(‘#nashemail’).click(function() {
$(‘#nashemail’).html(‘<a href="mailto:ваш@email">ваш@email</a>’);
});

$(‘#nashphone1’).click(function() {
$(‘#nashphone1’).html(‘<a href="tel:номер_телефона">номер_телефона</a>’);
});

[/code]

Здесь #nashemail — id элемента с изображением адреса электронной почты e-mail,

#nashphone1 — id элемента с изображением номера телефона.

А на саму страницу в то место, где должны быть контакты добавляем код:

[html]

<div id="nashemail"><img class="img-fluid" src="img/email-remont.jpg" title = "Наш email — кликните два раза" alt="Наш email — кликните два раза"></div>

[/html]

и

[html]

<div id="nashphone1"><img class="img-fluid" src="img/phone1-remont.jpg" title = "Наш первый телефон — кликните два раза" alt="Наш первый телефон — кликните два раза"></div>

[/html]

Файл JavaScript подключаем к данной странице такой строкой:

[html]
<script src="code/js/nashicontakts.js"></script>
[/html]

Вот и всё.

Если библиотека jQuery не используется, то можно записать файл nashicontakts.js на обычном
JavaScript:

[code lang=»js»]

document.getElementById(‘nashemail’).onclick = function() {
document.getElementById(‘nashemail’).innerHTML='<a href="mailto:ваш@email">ваш@email</a>’;
}

document.getElementById(‘nashphone1’).onclick = function() {
document.getElementById(‘nashphone1′).innerHTML='<a href="tel:номер_телефона">номер_телефона</a>’;
}

[/code]

Используйте данный метод для борьбы со спамом.

Пишите в комментариях, что у Вас получилось.

[uptolike]

Добавить комментарий