X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Кнопка поділитися в Pinterest на сайті без плагінів

Приклад
  • 2024-12-08
  • 2123 переглядів

  • Дизайн та розробка сайту

Доброго вам дня.

На всіх своїх темах, які я роблю для замовників я встановлюю свої кнопки шаринга в соціальних мережах. Вони мають різну кількість кнопок, але найчастіше я використовую стандартний набір популярних соцмереж і месенджерів. Я зробив стандартний набір коду, який додаю в свої теми і настройками в темі можна увімкнути або вимкнути таку панель, якщо людина захоче встановити кнопки шаринга якогось сервісу.

Кнопка поделиться в Pinterest на сайте без плагинов

У мене на сайті вже була стаття про кнопки поділитися - це основа мого набору. Ознайомитися можна в статті - Соціальні кнопки своїми руками без сторонніх сервісів. До них я додав кнопки месенджерів зі статті - Як зробити посилання на 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 на сайт без плагінів. Пробуйте, допрацьовуйте.

На цьому все, дякую за увагу. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 2, в среднем: 5 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078