Как сделать кнопку КОПИРОВАТЬ URL страницы?


Некоторые мои сайты настроены так, что на них нельзя скопировать текст. Достали эти дорвейщики и прочая нечесть, которые воруют твой контент. Приходится хоть как-то защищаться, хотя бы от непрофессионалов.

И вот на таких сайтах мне кажется очень нужна кнопка КОПИРОВАТЬ URL, чтобы человек мог скопировать адрес статьи и разместить там, где ему хочется.

Решений много, я начал с того, что поставил пока кнопку в конце сайта, хотя есть желание сделать ее фиксированной с левого края сайта. Но это потом...

Как сделать кнопку КОПИРОВАТЬ URL сайта?

Нужно всего немного. В месте, где должна быть кнопка, нужно разместить такой код:

<div align="center"><button onclick="CopyLink()">СКОПИРОВАТЬ URL</button></div>

А в подвале сайта такой скрипт:

<!-- кнопка копировать --->
<script defer type= "text/javascript">
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
function CopyLink() {
copyTextToClipboard(location.href);
}
</script>

Вот пока и всё, получилось вот такая простая кнопка:

Как изменить стили в текстовом редакторе Вордпресс?

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

Как сделать отступ сверху для якорных ссылок?
Как оформить заказ на Алиэкспресс и сделать покупку в 2021?

В последнее время я стал использовать на своих сайтах якорные ссылки, так как если статья очень БОЛЬШАЯ, то нужно давать читать дальше...

Как изменить стили в текстовом редакторе Вордпресс?
Редактировать запись ‹ Просто Линукс — WordPress

Когда у меня был старенький ноутбук с диагональю экрана 13 дюймов и разрешение 1366х1080, то писать в текстовом редакторе Wordpress читать дальше...

Как вставить промокоды Алиэкспресс в статью?
Купоны и ПРОМОКОДЫ Алиэкспресс на декабрь 2021 от продавцов...

Недавно передо мной встала задача: вставить промокоды Алиэкспресс в статью. Казалось бы, что сложного? Скопируй промокод и всё... Но сложность читать дальше...

Открытие и ведение ресторанного бизнеса в Сети
Титанический труд под красивой картинкой

Кто не любит вкусно поесть? Странный вопрос. Тематика еды и общественного питания интересна современному человеку. Особое внимание привлекают к себе читать дальше...

Напишите комментарий