У мене на сайті вже була стаття про кнопки поділитися - це основа мого набору. Ознайомитися можна в статті - Соціальні кнопки своїми руками без сторонніх сервісів. До них я додав кнопки месенджерів зі статті - Як зробити посилання на Viber, Whatsapp, Telegram, Skype і звичайний телефонний номер . Але ось останнім часом, мене все частіше і частіше просили до набору додати кнопку поділитися в Pinterest.
Приклад такої кнопки можна побачити за посиланням - Гелі Гельтек гелі для косметологічних апаратів. Як бачите, робота кнопки схожа з роботою кнопок до частини першої статті. При натисканні відкривається маленьке вікно браузера в якому і відбувається процес шаринга.
Сделать это очень просто, даже проще чем в первой статье. Не нужно отдельных скриптов, библиотек и тд. Вам просто нужно добавить ссылку в нужное место, где вы размещаете кнопки шаринга.
<a class="pinterest" href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());" class="social-pt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
Просто посилання, головним елементом якої є код в атрибуті href. Так само я додав SVG іконку, якій можна задати CSS стилі і все. Якщо вам треба картинка, текст і тд, то просто видаліть частину коду з SVG іконкою. Якщо треба змінити розмір іконки, вкажіть ширину і висоту в пікселях в атрибутах SVG іконки. В width="24" height="24" замініть 24 на своє значення.
Нижче приклад найпростіших стилів для кнопки. Просто додайте їх в файл стилів вашого сайту.
.pinterest{
background:#DE2125;
display:flex;
justify-content:center;
align-items:center;
width:40px;
height:40px;
line-height:40px;
text-decoration:none;
transition:.8s;
}
.pinterest:hover{
transform:scale(1.2);
}
.pinterest svg{
fill:#fff;
}
Ось так просто можна додати кнопку поділитися в Pinterest на сайт без плагінів. Пробуйте, допрацьовуйте.
На цьому все, дякую за увагу. 🙂
