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

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

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

Установка:

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

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

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

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

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

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

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

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

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

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

XDebug, установка на XAMPP

"Поделиться" - быстро, дёшево и сердито!

url социальные кнопки копирование url infobar инфобар хак instant2 instantcms2

6 комментариев

Реклама #

Алексей Т 3 года назад #

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

Capitan 3 года назад #

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

Викторыч 3 года назад #

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

Сергей 3 года назад #

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

AndroS 3 года назад #

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

Panda58dev 3 года назад #

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

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

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