Недавно создавалась новая тема для заказчика, где был поставлен вопрос как скопировать адрес страницы в буфер обмена. Нужно было добавить такую кнопку, чтобы посетитель нажав на нее получил ссылку текущей страницы. Данная функция довольно полезна, если у вас есть кнопки шаринга в социальных сетях. Кнопка с копированием ссылки хорошо впишется к ним, если человек просто хочет отправить, а среди ваших кнопок нет нужной ему социальной сети. Когда-то я уже делал подобное и у меня была заготовка. Пытался найти новый рабочий метод, но как показала практика, данный все же лучший из всех. И так приступим.
Скрипт
Работа кнопки копирования текущей ссылки зависит от файла - clipboard.js. Это такая библиотека, которая и будет совершать весь процесс. Данный файл можно подключить указав на него ссылку на сторонний источник или скопировать его содержимое в свой файл и подключить из своего хостинга. Вот собственно сам файл, можно его таким подключить:
Подключать его нужно после библиотеки 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 стили
Стили могут быть любыми, как пример использовать можно эти:
