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

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

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

А если вопросы полезности данного явления исчерпаны, самое время подумать о том, как добавить подобную штуковину (плавающую панельку с кнопками закладок) на свой сайт. Так как у меня сайт на 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). А если панелька слишком далеко влево ушла — увеличиваем значение. Если панельки вообще не видно, возможно, она скрылась за краем экрана, тогда установим значение — ноль, а потом уже добавим или убавим на нужную величину.

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

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

27 Responses

  1. Надюша говорит:

    Удобные такие кнопочки :) Мне на блоги ты тоже такие добавлял, теперь вот по твоему мануалу смогу сама добавлять соцкнопки на свои новые сайты! Спасибо)

  2. Маг говорит:

    Классная панелька.

  3. zusicks438 говорит:

    Тут такое дело...У меня при вставке в single.php панелька появляется, но...именно там, куда ты ее вставил, то есть перед постом, или там после комментариев например. И выводится горизонтально...

    Почему такое может происходить?

    • Pavluha.Net говорит:

      Наиболее вероятно, что покешировался файл стилей. Пропиши в шаблоне что-то типа style.css?2010-12-07 — тогда файл стилей обновится у тебя и у всех, у кого закешировался

  4. zusicks438 говорит:

    В последней версии WordPress не работает плагин :( Пишет, что заголовок некорректный. Не сталкивался?

  5. Pavluha.Net говорит:

    Не сталкивался. Вообще, это не плагин, и для связи с кодом WP используются 3 стандартные функции: the_permalink, the_title и bloginfo ('template_directory'), поддержка которых должна иметься и в новой версии.

    Проверю. Напишу, если что

  6. mefody говорит:

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

    • Pavluha.Net говорит:

      Для этого нужно открыть код панельки и исправить ссылки и их описания на нужные. Например, написано: «Поделиться В Контакте» — и ссылка на страницу share ВКонтакте. Меняем это на «Присоединиться к группе ВКонтакте» и соответствующую ссылку.

      Подпишитесь на обновления моего блога — в ближайшее время будет новый пост о плавающей панельки, теперь она стала лучше

  7. lagun4ik говорит:

    А можно код панельки как у вас на этом сайте? (что бы я ру, лайвинтернет и т.д., нофолоф, и стили сразу в нём)

    • Pavluha.Net говорит:

      Конечно можно! Сейчас наваяю соответствующий пост :)

    • Pavluha.Net говорит:

      Готово:

      pavluha.net/knopki-zaklad... -dlya-sayta.html

      Стили, правда, всё равно придётся отдельно прописать. Но затруднений не должно возникнуть.

      На счёт нофолоф можете не переживать. Он там есть, к тому же ссылки выводятся через JS, потому ссылочный вес всё равно не передаётся

  8. Seo-Блог говорит:

    Суету развели )) комментаторы, мог бы сделать раза в 2 проще и не обязательно для WordPress, я писал об даже статью cms-all.ru/seo/15-social-knopki.html

    вот этот сервис по генерации настройке такой вот панельки ! Извиняюсь за ссылку, павлуха если будет активной прошу убрать :)

    • Pavluha.Net говорит:

      Это уже на вкус и цвет. Ссылку оставил — может кому-то пригодиться. Кстати, когда я писал эту статью, сервиса генерации кнопок ещё не было. Он появился позже, тогда я написал новую статью и здесь дал ссылку на неё. Повторюсь: pavluha.net/knopki-zaklad... -dlya-sayta.html

  9. Рома - Танк говорит:

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

    • Николай говорит:

      Я тоже считаю, что от этого мало проку, но всё же использую это на своих блогах. Только у меня не плавающая панелька, код беру в Яндексе.

      • Pavluha.Net говорит:

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

  10. Spout говорит:

    Кнопки то красивые, но можно было и кроссCMS'ные сделать.

    • Pavluha.Net говорит:

      И ещё раз... Надоело уже ссылку вставлять, пару комментариев выше посмотрите — там кросс-CMS-ный вариант

  11. Мария говорит:

    Плагин понравился, но я честно с первого раза ничего не поняла что делать, как устанавливать. Нужно сидеть работать со статьей, а времени сегодня нет. У меня на блоге есть кнопки социальных сетей, но их мало одна не работает. А другие убрала потому как от них лишние внешние ссылки на блоге появляются. У вас чудесный блог ничего лишнего и тема замечательно оформлена, а у меня никак не получается усваивать информацию за 5 минут, во всем нужно копаться разбираться.

    • Pavluha.Net говорит:

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

  12. Мария говорит:

    Отправила статью в социальные сети

    • Pavluha.Net говорит:

      Спасибо, и я ретвитнул одну из ваших статей, которая привлекла и понравилась

  13. Филипп говорит:

    Здравствуйте. А у меня почему то только горизонтально они ложатся. Как сделать их вертикально столбиком как у вас, не только в постах, а везде на блоге, чтобы всегда отображалась эта панель? У меня есть свои шаблоны кнопок, как бы я мог их заменить вместо стандартных? Пожалуйста помогите.

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

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

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