Кнопки закладок на сайт в виде плавающей панели

Обратите внимание, слева плавает панелька с кнопками закладок. Одним кликом по кнопкам можно добавить ссылку на эту статью (как и любую другую статью моего блога) в популярные социальные закладки и сервисы. Если вы это сделаете, польза для меня будет очевидна: вы привлечёте внимание своих друзей к моему сайту, а также поисковые системы заметят эти ссылки и сделают некоторые выводы о популярности моего сайта.

Какая польза вам от добавления ссылки на меня в свои аккаунты? А почему сразу польза? — Я надеюсь, что альтруизм в людях ещё жив. Но если копнуть глубже, найдётся и польза: вы добавляете частичку своего присутствия в свой аккаунт, привлекаете моё внимание (я ведь тоже смотрю, кто на меня ссылается) — хороший повод подружиться.

А если вопросы полезности данного явления исчерпаны, самое время подумать о том, как добавить подобную штуковину (плавающую панельку с кнопками закладок) на свой сайт. Так как у меня сайт на WordPress, то более детальные инструкции будут касаться именно этой CMS. Но по большей части инструкция универсальна. Для установки панельки вам нужен будет доступ к файловой системе вашего сайта (FTP или файловый менеджер в панели управления хостингом). Также понадобится внести небольшие изменения в тему оформления вашего блога.

Обратите внимание. Вот более крутой скрипт кнопок закладок — пользуйтесь лучше им, там выбор кнопок богаче, более гибкая настройка и проще установка.

Сам скрипт панельки я взял тут, затем его немножко изменил. Изначальный вариант предполагает, что скрипт должен находиться в корне сайта, но для меня по ряду причин удобней, чтобы папка скрипта лежала в папке темы оформления блога, с этим и связаны внесённые мной изменения.

Если вы не используете WordPress, то вам будет проще, пожалуй, скачать скрипт по ссылке выше, а если ваш блог на WordPress, то качаем этот скрипт:

Внимание! Есть более крутой скрипт закладок, более простой в установке, к тому же (выше уже писал об этом, но не все замечают). Вот в этом посте читайте его описание и инструкцию по установке.

Этот архив нужно распаковать в папку вашей WordPress-темы на хостинге: wp-content\themes\папка-темы\. Затем (или предварительно — как удобней) нужно внести небольшие изменения в скрипт. Находим в папке скрипта файл socializ_2.js, открываем текстовым редактором и задаём следующие значения:

var m1 = 250; /* расстояние от начала страницы до плавающей панели */
var m2 = 10; /* расстояние от верха видимой области страницы до плавающей панели */

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

В этом же файле найдите два слова: @Pavluha_Net и pavluha.net — это мой ник в Твиттере и домен сайта. Поменяйте на ваши значения.

Теперь начинаем внедрение скрипта. Нужно открыть файл темы оформления header.php. Если вы делаете это первый раз, убедительно рекомендую ознакомиться с тем, как редактировать файлы темы правильно, иначе своими действиями можно нарушить корректную работу блога.

В этом файле находим закрывающий тег </head>, и вставляем прямо перед ним следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/socializ-floating-panel/socializ_2.js"></script>

Обратите внимание, если где-то в теге head уже подключена библиотека jquery, то второй раз её подключать не обязательно — можно убрать первую строчку указанного выше кода.

Теперь открываем файл single.php темы оформления. Туда надо вставить код, вызывающий отображение панели. Вообще, код можно вставить в любое место — дальше указанные стили отображения сделают своё дело, но обязательно следует вставить код внутри цикла while (have_posts ()) ... endwhile;.

Код для вставки:

<script type="text/javascript">socializ(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'),'<?php bloginfo('template_directory'); ?>')</script>

Пример вставленного кода в мою тему оформления (строка № 16 — это и есть вставленный код панельки) дан ниже. Не надо копировать этот код. Он дан лишь для примера, если вы не поняли, куда именно вставлять код скрпита.

<?php if (have_posts()) : while (have_posts()) : the_post() ?>
	<div class="post_meta">
	<h1><?php the_title() ?></h1>
	<span class="pm-date"><?php the_time(' j F Y') ?></span>
	<?php $categories = get_the_category_list(', ');
	if ($categories) echo '<span class="pm-category">Рубрика: ',$categories,'</span>' ?>
	</div><!-- /post_meta -->
	<div class="post_view">
	<?php the_content('<b>» Читать далее...</b>') ?>
	<div class="post_meta clear_both margin_bottom">
	<?php edit_post_link('Правка', '<div class="edit_lnk">', '</div>'); ?>
	<?php the_tags('<span class="pm-labels">Метки: ', ', ', '</span>') ?>
	</div><!-- /post_meta -->
	<?php comments_template(); ?>
	</div><!-- /post_view -->
	<script type="text/javascript">socializ(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'),'<?php bloginfo('template_directory'); ?>')</script>
<?php endwhile; else : ?>
Извините, такого не найдено
<?php endif; ?>

Затем нужно добавить следующий код в конец файла стилей style.css темы:

/* Плавающая панель */
#socializ {
	position: fixed;
	margin-left: -225px;
	z-index: 900;
	border: 1px dashed #c39;
	border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;
	padding: 6px 6px 0;
	background: #eee;
}
* html #socializ { display: none }
#socializ:hover {
	-moz-box-shadow: 0 0 5px #DDD;
	-webkit-box-shadow: 0 0 5px #DDD;
	-khtml-box-shadow: 0 0 5px #DDD;
	box-shadow: 0 0 5px #DDD;
}
#socializ a {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 0 6px;
}
#socializ a img {
	border: 0;
}
#socmore {
	text-align: center;
	cursor: pointer;
	margin: -11px 0 4px;
	width: 32px;
}
/* конец Плавающая панель */

Если разбираетесь в CSS, можно поколдовать над внешним видом панельки, хотя она и так неплохо выглядит. Единственный момент, где почти наверняка вам придётся внести коррективы — 4 строка: margin-left: -225px; — здесь нужно указать своё значение отступа панельки от левого края той позиции, где она изначально отображена. У меня это значение — минус 225 пикселей. Если ваша панелька «залазит» на текст статей, значение нужно уменьшить (например, сделать минус 250 или минус 300). А если панелька слишком далеко влево ушла — увеличиваем значение. Если панельки вообще не видно, возможно, она скрылась за краем экрана, тогда установим значение — ноль, а потом уже добавим или убавим на нужную величину.

Сложно? Могу заверить, что сложно только в первый раз. Изменения лучше делать рано утром (когда на блоге самая низкая посещаемость). Также можете сделать резервную копию файлов темы (не обязательно плагинами, можете просто заархивировать файлы темы в файловом менеджере на хостинге). Ну а если какие-то проблемы или вопросы — обращайтесь, помогу.