jQuery-cкрипт “Добавить в закладки”

Данный скрипт - это усовершенствованная версия JS-скрипта “Добавить в закладки”, который я представил читателям более года назад.

Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его “добить”. Скрипт уже давно был почти готов, но одна деталь не давала мне его выложить на блоге.

jQuery-cкрипт “Добавить в закладки” можно прикрутить практически к любому сайту, а его установку я покажу на примере WordPress.

Особенности скрипта

• В шаблон сайта вставляется всего одна строчка кода. Все остальное находится в подключаемом скрипте.

  Ребята, ну ради Бога, не используйте вы плагины и скрипты, которые в исходном коде выводят целые портянки html-кода. Яркий пример того, как делать не надо - блог Яна Такушевича. Я ужаснулся, когда заглянул в код страницы - даже на моем большом разрешении монитора 1920×1200 html-код закладочного плагина не вмещается в один экран (скриншот)! При этом размер текста поста как минимум раза в 2 меньше этого кода для закладок. И так для каждого поста. Теперь представьте, сколько лишнего “веса” это дает для каждой страницы сайта. Ян, задумайся об этом!

• Никаких лишних внешних ссылок, а, соответственно, нет надобности в добавлении множества из несуществующего в HTML-стандарте тега <noindex>, придуманного Яндексом.
• Небольшой вес скрипта (если не считать фреймворк jQuery). А учитывая, что скрипт кешируется браузером посетителя, как и сам фреймворк, разница в “весе” загружаемой страницы становится существенной по сравнению с html-вариантом, упомянутым чуть выше.
• Ссылки разделены на 2 части: 1-я - закладочные сервисы, 2-я - социальные сервисы. Все это красиво оформлено в виде выпадающего списка. Если вы дружите с CSS и у вас есть желание оформить списки по-своему, то можете легко это сделать.
• Несложная настройка скрипта.

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

Демо

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

Скачать

Установка

Процесс установки скрипта показан на примере WordPress.

1. Содержимое архива (за исключением файла index.html) скопируйте в папку с вашей темой. Место расположения всех файлов не принципиально, только учитывайте пути до них при подключении.
2. Подключите эти файлы, добавив в файл header.php перед тегом </head> следующие 2 строки:

   1 2	<link href="<?php bloginfo('stylesheet_directory'); ?>/jqsocial.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/jqsocial.js"></script>

   Если у вас есть какой-то файл со скриптами, то можно перенести в него содержимое файла jqsocial.js и соответствующую строчку не писать. Аналогично можно поступить со стилями - содержимое jqsocial.css перенести в файл style.css. Смысл этого - снизить количество запросов к серверу.

3. Если в вашей теме не подключен фреймворк jQuery, то перед двумя строками из предыдущего пункта добавьте эту:

   1	<?php wp_enqueue_script('jquery'); ?>

   Для тех, кто будет использовать скрипт не на WordPress - jQuery подключается следующим образом. Вместо вышеуказанной строки вставлять эту:

   1	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

4. В файле jqsocial.js найдите строку:

   1	var folder = 's/';

   и в кавычках укажите путь до папки с иконками.

5. Теперь в те файлы шаблона, которые выводят посты (например, index.php, archive.php, search.php, single.php) добавьте такую строчку:

   1	<script type="text/javascript">jqsocial(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))</script>

   Для тех, кто будет использовать скрипт не на WordPress, поясняю, где должны подставляться URL и название статьи:

   1	<script type="text/javascript">jqsocial(encodeURIComponent('полная_ссылка_на_статью'),encodeURIComponent('название_статьи'))</script>

6. Вот, собственно, и все. Наслаждаемся результатом.

Настройка сервисов

Если появилось желание изменить/дополнить/сократить список сервисов, то в файле jqsocial.js находим вот такой кусок кода для первого блока ссылок (закладочные сервисы):

и такой кусок кода для второго блока ссылок (социальные сервисы):

Покажу на примере delicious.com, как добавляется сервис. delicious.com дает нам вот такой код для добавления закладки:

Из него мы вычленяем следующую ссылку:

Теперь делаем 2 замены: encodeURIComponent(location.href) меняем на u, а encodeURIComponent(document.title) меняем на t. В результате получаем следующую строку, которую нужно вставить в скрипт:

И таким образом по аналогии можно добавлять новые сервисы.

Заметьте, что после последнего сервиса в списке (который перед закрывающейся скобкой), запятая стоять не должна. Также при добавлении новых сервисов обратите внимание, что файл иконки сервиса должен быть с расширением .ico, а название файла состоять из имени домена.

Если у вас возникнут трудности с конвертированием ссылок сервисов, то обратитесь в комментариях, я помогу.

Обновления

• 04.06.09 - доработан файл стилей (jqsocial.css) с целью избежать некоторых багов в отображении панельки с ссылками в связи с особенностями верстки на сайтах.