Скрипт
Работа кнопки копирования текущей ссылки зависит от файла - clipboard.js. Это такая библиотека, которая и будет совершать весь процесс. Данный файл можно подключить указав на него ссылку на сторонний источник или скопировать его содержимое в свой файл и подключить из своего хостинга. Вот собственно сам файл, можно его таким подключить:
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
Подключать его нужно после библиотеки jQuery. Она должна быть подключена на вашем сайте, только после нее нужно добавлять скрипт. Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?
После подключения clipboard.js, нужно добавить небольшой скрипт, что запустит исполнение библиотеки clipboard при нажатии определенной кнопки. Код совсем не большой, как его подключить, можете посмотреть в той же статье, упомянутой выше.
jQuery(document).ready(function($){
var url = document.location.href;
new Clipboard('.copy_link', {text: function(){ return url;}});
});
Скрипт работает так, что при нажатии на кнопку, ссылка копируется и ничего не происходит. Можно вывести сообщение об успешном копировании, чтобы посетитель понимал. что все хорошо. Тогда код будет выглядеть так:
jQuery(document).ready(function($){
var url = document.location.href;
new Clipboard('.copy_link', {text: function(){ return url;}});
$('.copy_link').click(function(){alert('Cсылка успешно скопирована в буфер обмена.');});
});
Вместо alert, можно добавить модальное окно или появление текста под кнопкой. Все зависит от вашей фантазии. Можете кастомизировать идею как хотите.
В скрипте, стоит обратить внимание на класс кнопки, по нажатию на которую будет копироваться ссылка. .copy_link - и есть класс кнопки, если захотите указать свой. смените его.
HTML разметка
Теперь в нужное место на сайте, где должна быть размещена кнопка, добавьте такую HTML разметку:
<span class="copy_link">Копировать ссылку</span>
Как видите тут указан тот самый класс - copy_link. Данная кнопка - простой span элемент. Можете задать ему любые стили, чтобы он вписывался в общий дизайн вашего сайта.
CSS стили
Стили могут быть любыми, как пример использовать можно эти:
.copy_link{cursor:pointer;display:inline-block;padding:0 10px;line-height:25px;background:#fc0;color:#000;}
Пример того что получится в итоге можно посмотреть и скачать тут:
На этом все, спасибо за внимание. 🙂
