Доброго времени суток
На всех своих темах, которые я делаю для заказчиков я устанавливаю свои кнопки шаринга в социальных сетях. Они имеют разное количество кнопок, но чаще всего я использую стандартный набор популярных соцсетей и мессенджеров. Я сделал стандартный набор кода, который добавляю в свои темы и настройками в теме можно включать или отключать такую панель, если человек захочет установить кнопки шаринга какого-то сервиса.
У меня на сайте уже была статья про кнопки поделиться - это основа моего набора. Ознакомится можно в статье - Социальные кнопки своими руками без сторонних сервисов. К ним я добавил кнопки мессенджеров из статьи - Как сделать ссылки на 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','https://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 на сайт без плагинов. Пробуйте, дорабатывайте.
На этом все, спасибо за внимание. 🙂