Кнопки закладок и социалок для сайта

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

Используемый в том посте плагин мутировал, и теперь он не только содержит больше кнопок, но и стал более лёгким в загрузке, удобным в установке и настройке.

Обновлённую панельку с кнопками вы можете наблюдать сейчас между правой границей записи и сайдбаром.

Ну и сразу к делу. Идём на сайт данного скрипта (напоминаю, что скрипт универсальный, т.е. подходит к любой CMS или статичному сайту, даже по следующей ссылке есть рекомендации по установке на популярные движки): share42.com.

Тут всё стало очень шикарно. Выбираем размер кнопок (щелчком по нужной кнопке, при этом вокруг неё появляется рамка), кодировку, положение (горизонтальное, вертикальное). Кнопки можно перетаскивать, чтобы изменить порядок.

После можно воспользоваться кнопкой предварительного просмотра или сразу закачать себе скрипт. В прошлый раз я придумывал свои костыли, чтобы положить скрипт не в корень сайта, а в папку темы. Теперь этим заниматься не придётся — всё продумано. Остаётся только процитировать рекомендации по установке. Вставьте этот код в шаблон вашего сайта:

<script type="text/javascript" src="http://site.ru/share42/share42.js"></script>
<script type="text/javascript">share42('http://site.ru/share42/','<?php the_permalink() ?>','<?php the_title(); ?>')</script>

Конечно, http://site.ru/share42/ надо заменить на ваш реальный путь к папке со скриптом. И ещё редактируем наш файл стилей, чтобы панель действительно плавала, а не светилась в том месте, где мы её вставили. Плюс, добавим красивости. У меня используются следующие стили:

#share42 {
  position: fixed;
  z-index: 1000;
  margin-left: 636px; /* смещение панели влево от края контента */
  padding: 6px 6px 0;
  background: #FFF;
  border: 1px solid #E9E9E9;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
* html #share42 {display: none}
#share42:hover {
  background: #F6F6F6;
  border: 1px solid #D4D4D4;
  -webkit-box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}
#share42 img {margin: 0 !important; padding: 0 !important; border: none !important;}

Но я был бы не я, если бы не предложил одну фишку от себя. Замечено, что некоторые символы заголовков статей (кавычки, тире) WP кодирует в HTML-мнемоники, и потом эти мнемоники так и выводятся в полях для добавления описания ссылки в социалках, как набор непонятных символов. Чтобы символы становились такими, какими должны быть, надо их декодировать... Проще говоря, я скрипт кнопок вызываю так:

<script type="text/javascript" src="https://pavluha.net/wp-content/themes/pavluha-theme/share42/share42.js"></script>
<script type="text/javascript">share42('https://pavluha.net/wp-content/themes/pavluha-theme/share42/','<?php the_permalink() ?>','<?= html_entity_decode(the_title('','',FALSE),ENT_QUOTES,'UTF-8'); ?>')</script>

Путь к папке скрипта поменяйте на свой. Если у вас не WP, а другой движок, то вместо функций the_permalink () и the_title ('','',FALSE) у вас будет что-то другое.

Запись опубликована в рубрике Web-мастеринг с метками , . Короткая ссылка для добавления в закладки: Кнопки закладок и социалок для сайта.

19 Responses

  1. Уведомление: $-Zone.Ru » Архив блога » Это не обзор! Это просто бомба!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.