Кнопка "скопировать ссылку"

+14
634
Кнопка "скопировать ссылку"

Кнопка копирующая текущий url (ссылка на эту страницу).

Демо
В прошлый раз я писал про кнопки «поделиться», но тогда забыл про ещё одну кнопку: «скопировать ссылку». Сегодня про неё мне напомнил Алексей, и даже был готов заплатить за такую мелочь. Решено было написать такую кнопку, как обычно: быстро, дёшево и сердито.

Установка:

Важно! Копирование будет работать только, если на сайте есть ssl сертификат

Заходим в нужный нам, тип контента → настройки → просмотр записи → HTML код для социальных кнопок.

Изображение

Скорее всего, у Вас он будет пустой, но у меня там уже лежат кнопки. Вставляем туда такой код:

  1. <button class="btn btn-outline-secondary btn-sm" onclick="urlCopyButton()">
  2. Скопировать ссылку
  3. </button>
  4.  
  5. <script type="text/javascript">
  6. function urlCopyButton(){
  7. var record_url = document.URL; //Узнаю текущий url
  8. navigator.clipboard.writeText(record_url); //Копирую в буфер обмена
  9. toastr.success('Ссылка скопирована в буфер обмена.'); //Вывожу уведомлялку
  10. }
  11. </script>

Теперь в вашем infobar-е появится такая кнопка:
Изображение

Как навести марафет:

В таком виде, кнопка использует стили bootstrap 4 (важно! будет работать только на modern и его дочерних шаблонах), следовательно, Вы можете попробовать все возможные стили кнопок, нужно будет редактировать блок «button». Так же, можете задавать ему свои классы и стили.

Быстро, дёшево и сердито :)

Кроссбраузерность:
Изображение

Если кто-то беспокоится по теме кроссбраузерности — посмотрите эту страницу. Всё что нужно — ssl сертификат (такая политика безопасности браузеров).

+1
Алексей Т Алексей Т 5 месяцев назад #

Отличное решение! Дело в том что очень неудобно в мобилки в некоторых браузерах копировать ссылку  на страницу и вставить допустим в письмо или другой документ. Спасибо за решение. В карму +

+1
Capitan Capitan 5 месяцев назад #

Добавил. Все работает. Супер!

+1
Викторыч Викторыч 5 месяцев назад #

Задействовал. Точно не помешает… ) Спасибо!

+1
Сергей Сергей 5 месяцев назад #

Конечно +++ Супер!

+1
AndroS AndroS 4 месяца назад #

Не сочтите за наглость… А можно полностью код из скриншота приложить? 😀

0
Panda58dev Panda58dev 4 месяца назад #

Весь код, можно посмотреть в моём прошлом посте: тут. Но никаких гарантий не даю — ваши селекторы могут отличаться :) Но в итоге, должно получиться это:

  1. <a id="vk_share_link" href="" target="_blank">
  2. <img src='/upload/share-logo/vk_logo.svg'>
  3. </a>
  4. <a id="ok_share_link" href="" target="_blank">
  5. <img src='/upload/share-logo/ok_logo.svg'>
  6. </a>
  7. <a id="telegram_share_link" target="_blank">
  8. <img src='/upload/share-logo/tg_logo.svg'>
  9. </a>
  10. <a id="viber_share_link" href="" target="_blank">
  11. <img src='/upload/share-logo/viber_logo.svg'>
  12. </a>
  13. <button class="btn btn-outline-secondary btn-sm" onclick="urlCopyButton()">
  14. Скопировать ссылку
  15. </button>
  16. <script type="text/javascript">
  17. var record_title = document.querySelector('h1').textContent;
  18. var record_value = document.querySelector('meta[name="description"]').content;
  19. var record_url = document.URL;
  20. document.getElementById('vk_share_link').setAttribute('href', 'https://vk.com/share.php?url=' + record_url);
  21. document.getElementById('ok_share_link').setAttribute('href', 'https://connect.ok.ru/offer?url=' + record_url + '&title=' + record_title.replace(/\s+/g, ''));
  22. document.getElementById('telegram_share_link').setAttribute('href', 'https://t.me/share/url?url=' + encodeURIComponent(record_url) + '&text=' + encodeURIComponent(record_value));
  23. document.getElementById('viber_share_link').setAttribute('href', 'viber://forward?text=' + record_url);
  24. function urlCopyButton(){
  25. navigator.clipboard.writeText(record_url);//копирую в буфер
  26. toastr.success('Ссылка скопирована в буфер обмена.'); //Вывожу уведомлялку
  27. }
  28. </script>

(Не забудьте скачать архив с иконками, а то точно работать не будет 😃)

Еще от автора

XDebug, установка на XAMPP
Как найти жуков там, где казалось бы их нет.
Blog Output v1.1.0
Тип поля Blog Output - обновление.
Тип поля Blog Output v1.0.0
Тип поля Blog Output позволяет вывести до 3-х записей от автора контента.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.