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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


$('#nashemail').click(function() {
$('#nashemail').html('<a href="mailto:ваш@email">ваш@email</a>');
});
  
$('#nashphone1').click(function() {
$('#nashphone1').html('<a href="tel:номер_телефона">номер_телефона</a>');
});

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

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

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


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

и


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

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

<script src="code/js/nashicontakts.js"></script>

Вот и всё.

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


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>';
}

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

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



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

Войти с помощью: 

Закрыть меню