Кнопки закладок на сайт в виде плавающей панели
Обратите внимание, слева плавает панелька с кнопками закладок. Одним кликом по кнопкам можно добавить ссылку на эту статью (как и любую другую статью моего блога) в популярные социальные закладки и сервисы. Если вы это сделаете, польза для меня будет очевидна: вы привлечёте внимание своих друзей к моему сайту, а также поисковые системы заметят эти ссылки и сделают некоторые выводы о популярности моего сайта.
Какая польза вам от добавления ссылки на меня в свои аккаунты? А почему сразу польза? — Я надеюсь, что альтруизм в людях ещё жив. Но если копнуть глубже, найдётся и польза: вы добавляете частичку своего присутствия в свой аккаунт, привлекаете моё внимание (я ведь тоже смотрю, кто на меня ссылается) — хороший повод подружиться.
А если вопросы полезности данного явления исчерпаны, самое время подумать о том, как добавить подобную штуковину (плавающую панельку с кнопками закладок) на свой сайт. Так как у меня сайт на 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). А если панелька слишком далеко влево ушла — увеличиваем значение. Если панельки вообще не видно, возможно, она скрылась за краем экрана, тогда установим значение — ноль, а потом уже добавим или убавим на нужную величину.
Сложно? Могу заверить, что сложно только в первый раз. Изменения лучше делать рано утром (когда на блоге самая низкая посещаемость). Также можете сделать резервную копию файлов темы (не обязательно плагинами, можете просто заархивировать файлы темы в файловом менеджере на хостинге). Ну а если какие-то проблемы или вопросы — обращайтесь, помогу.
27 Responses