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


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

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

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

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

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

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

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

Лицензионная Windows 10 на Алиэкспресс всего за 3$

windows 10 aliexpress
<!-- кнопка копировать --->
<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>

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

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

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

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