Кнопка поделиться страницей в соц.сетях
Основные возможности:
Хоть код и выглядит большим, но данный функционал практически не влияет на скорость загрузки страницы благодаря использованию легковесных HTML/CSS решений вместо тяжелых внешних виджетов Поделиться.
Инструкция:
- Кнопка поделиться закреплена в одном из углов экрана и появляется только после прокрутки 100 px, скрываясь за 200 px до конца страницы (можно поменять - смотри комментарии в коде).
- При нажатии раскрывается список с ссылками на Telegram, VK, WhatsApp, E-mail и кнопкой «Скопировать ссылку».
- Каждая ссылка открывает нативный диалог выбранной соцсети в новом окне; «E-mail» формирует письмо, а «Скопировать» копирует текущий URL в буфер обмена и показывает уведомление «Скопировано!».
- Расположение блока (сверху/снизу, слева/справа) и отступы легко меняются одной-двумя строками CSS (смотри комментарии в коде).
- Кнопка поделиться в соц.сетях отправляет ссылку с уже написанным текстом (его можно задать свой)
Хоть код и выглядит большим, но данный функционал практически не влияет на скорость загрузки страницы благодаря использованию легковесных HTML/CSS решений вместо тяжелых внешних виджетов Поделиться.
Инструкция:
- В блок T123 добавили код ниже.
<!-- Плавающая кнопка поделиться страницей. https://t.me/breeze_tilda -->
<div id="share-float" class="share-float">
<div class="share-toggle">
<img src="https://static.tildacdn.com/tild3062-3930-4231-b638-666134396330/free-icon-share-icon.png" alt="">
</div>
<div class="share-list">
<a class="share-item" data-share="telegram" aria-label="Telegram">
<svg width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M11.94 0A12 12 0 0 0 0 12 12 12 0 0 0 12 24 12 12 0 0 0 24 12 12 12 0 0 0 12 0zm4.97 7.22c.1 0 .32.02.47.14a.53.53 0 0 1 .17.33c.02.1.04.3.02.47-.18 1.9-.96 6.5-1.36 8.63-.17.9-.5 1.2-.82 1.23-.69.07-1.22-.46-1.90-.90-1.06-.7-1.66-1.13-2.68-1.80-1.19-.78-.42-1.21.26-1.91.18-.18 3.25-2.98 3.31-3.23 0-.03.01-.15-.06-.21s-.17-.04-.25-.02c-.11.02-1.80 1.14-5.06 3.34-.48.33-.91.49-1.30.48-.43 0-1.25-.24-1.87-.44-.75-.24-1.35-.38-1.30-.79.03-.22.33-.44.89-.66 3.50-1.52 5.83-2.53 7.00-3.02 3.33-1.39 4.03-1.63 4.48-1.64z"/></svg>
</a>
<a class="share-item" data-share="vk" aria-label="VK">
<svg width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M15.68 0H8.32C1.59 0 0 1.59 0 8.32v7.36C0 22.41 1.59 24 8.32 24h7.36C22.41 24 24 22.41 24 15.68V8.32C24 1.59 22.41 0 15.68 0zM19.69 16.5c0 .6-.6 1.2-1.8 1.2h-1.2c-.6 0-.9-.3-1.5-.9-.6-.6-.9-.9-1.2-.9s-.6.3-.6.9v.9c0 .3-.3.6-.9.6-1.8 0-3.9-.6-6-2.7-1.8-1.8-3.3-5.1-3.3-5.4 0-.3.3-.6.9-.6h1.2c.6 0 .9.3 1.2.9.9 2.1 2.1 3.9 2.7 3.9.3 0 .6-.3.6-.9v-2.1c0-.9-.3-1.5-1.2-1.5h-.3c.3-.6 1.2-.9 2.1-.9h.9c.9 0 1.5.3 1.5 1.5v2.7c0 .9.3 1.2.6 1.2.3 0 .9-.3 1.5-.9 1.2-1.2 2.1-3 2.1-3.3 0-.3.3-.6.9-.6h1.2c.9 0 1.2.6.9 1.2-.3 1.2-2.1 3.6-2.1 3.9 0 .3.3.6.9 1.2.6.6 1.2 1.2 1.2 1.8z"/></svg>
</a>
<a class="share-item" data-share="whatsapp" aria-label="WhatsApp">
<svg width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M17.47 14.38c-.30-.15-1.76-.87-2.03-.97-.27-.10-.47-.15-.67.15-.20.30-.77.97-.94 1.16-.17.20-.35.22-.64.07-.30-.15-1.26-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.30-.02-.46.13-.61.13-.13.30-.35.45-.52.15-.17.20-.30.30-.50.10-.20.05-.37-.03-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.50-.67-.51-.17 0-.37-.01-.57-.01-.20 0-.52.07-.79.37-.27.30-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.08.15.20 2.10 3.20 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.20 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.69.25-1.29.17-1.41-.07-.12-.27-.20-.57-.35zm-5.42 7.40h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1.00-3.65-.24-.37A9.86 9.86 0 0 1 1.06 12c0-5.45 4.44-9.88 9.89-9.88 2.64 0 5.12 1.03 6.99 2.90a9.83 9.83 0 0 1 2.89 6.99c-.01 5.45-4.44 9.88-9.88 9.88z"/></svg>
</a>
<a class="share-item" data-share="email" aria-label="Email">
<svg width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
</a>
<div class="share-copy" data-share="copy" aria-label="Copy link">
<img src="https://cdn-icons-png.flaticon.com/512/88/88263.png" width="22" height="22">
</div>
</div>
</div>
<div id="copy-notification" class="copy-notification">
<span>Ссылка скопирована!</span>
</div>
2. В другой блок T123 размести стили и по желанию поменяй расположение иконки (не забудь также поменять расположение у списка соц.сетей - share-list)
<style>
/* Плавающая кнопка поделиться страницей. https://t.me/breeze_tilda */
.share-float {
position: fixed;
right: 40px; /* отступ справа 40px от края экрана. left: 40px - если надо расположение слева. */
bottom: 40px; /* расположение снизу справа. top: 40px; - если надо расположение сверху. */
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.share-item svg path {
fill: #4e6afe; /* цвет иконок соц.сетей */
}
.share-float.visible {
opacity: 1;
pointer-events: auto;
}
.share-toggle {
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 10px;
transition: transform 0.2s ease;
}
.share-toggle:hover {
transform: scale(1.1);
}
.share-toggle img {
width: 24px;
height: 24px;
}
.share-list {
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
pointer-events: none;
position: absolute;
right: 0; /* left: 0 - если надо расположение слева. */
bottom: 75px; /* top: 60px - если надо расположение сверху. */
min-width: 50px;
}
.share-float.active .share-list {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.share-item,
.share-copy {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 6px;
}
.share-item:hover,
.share-copy:hover {
transform: translateX(-5px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.copy-notification {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #fff;
color: #4CAF50;
padding: 16px 24px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
font-size: 14px;
font-weight: 500;
opacity: 0;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 10001;
white-space: nowrap;
font-family: Arial, sans-serif;
}
.copy-notification.show {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
</style>3. В 3 блок T123 размести данный скрипт. При желании можно поменять, когда будет появляться и скрываться кнопка Поделиться (в function handleScroll)
И также можно поменять преднаписанный текст, который будет отправляться вместе с ссылкой. Удалите его, если он вам не нужен.
И также можно поменять преднаписанный текст, который будет отправляться вместе с ссылкой. Удалите его, если он вам не нужен.
<script>
// Плавающая кнопка поделиться страницей. https://t.me/breeze_tilda
document.addEventListener('DOMContentLoaded', function initShareWidget() {
const shareFloat = document.getElementById('share-float');
const shareToggle = shareFloat.querySelector('.share-toggle');
const shareItems = shareFloat.querySelectorAll('.share-item');
const shareCopy = shareFloat.querySelector('.share-copy');
const copyNotification = document.getElementById('copy-notification');
// Тут можно задать свой текст, который будет отправляться вместе с ссылкой. Если он не нужен - оставьте кавычки пустыми - ''
const SHARE_TEXT = `Смотри, что есть! Реально полезно. - ${document.title}`;
const SHARE_URL = window.location.href;
handleScroll();
window.addEventListener('scroll', handleScroll);
shareToggle.addEventListener('click', function toggleList(e) {
e.stopPropagation();
shareFloat.classList.toggle('active');
});
document.addEventListener('click', function closeList(e) {
if (!shareFloat.contains(e.target)) shareFloat.classList.remove('active');
});
shareItems.forEach(function bindShare(item) {
item.addEventListener('click', function share(e) {
e.preventDefault();
const type = this.dataset.share;
const url = encodeURIComponent(SHARE_URL);
const title = encodeURIComponent(SHARE_TEXT);
shareContent(type, url, title);
});
});
if (shareCopy) {
shareCopy.addEventListener('click', function copy() {
copyToClipboard(window.location.href);
});
}
function handleScroll() {
const scrollTop = window.pageYOffset;
const docHeight = document.documentElement.scrollHeight;
const winHeight = window.innerHeight;
const scrollBottom = docHeight - scrollTop - winHeight;
if (scrollTop > 100 && scrollBottom > 200) {
shareFloat.classList.add('visible');
} else {
shareFloat.classList.remove('visible');
}
}
function shareContent(type, url, title) {
let shareUrl = '';
switch (type) {
case 'telegram':
shareUrl = `https://t.me/share/url?url=${url}&text=${title}`;
break;
case 'vk':
shareUrl = `https://vk.com/share.php?url=${url}&title=${title}`;
break;
case 'whatsapp':
shareUrl = `https://wa.me/?text=${title}%20${url}`;
break;
case 'email':
shareUrl = `mailto:?subject=${title}&body=${url}`;
break;
default:
return;
}
if (type === 'email') {
window.location.href = shareUrl;
} else {
window.open(shareUrl, '_blank', 'width=550,height=450');
}
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function copied() {
showCopyNotification();
}).catch(function fallback() {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
showCopyNotification();
} catch (err) {
console.error('Could not copy text: ', err);
}
document.body.removeChild(textArea);
});
}
function showCopyNotification() {
copyNotification.classList.add('show');
setTimeout(function hide() {
copyNotification.classList.remove('show');
}, 2500);
}
});
</script>Помести все блоки в самый конец страницы для лучшей скорости загрузки страницы.