jQuery-cкрипт “Добавить в закладки”
Данный скрипт – это усовершенствованная версия JS-скрипта “Добавить в закладки”, который я представил читателям более года назад.
Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его “добить”. Скрипт уже давно был почти готов, но одна деталь не давала мне его выложить на блоге.
jQuery-cкрипт “Добавить в закладки” можно прикрутить практически к любому сайту, а его установку я покажу на примере WordPress.
Особенности скрипта
- В шаблон сайта вставляется всего одна строчка кода. Все остальное находится в подключаемом скрипте.
Ребята, ну ради Бога, не используйте вы плагины и скрипты, которые в исходном коде выводят целые портянки html-кода. Яркий пример того, как делать не надо – блог Яна Такушевича. Я ужаснулся, когда заглянул в код страницы – даже на моем большом разрешении монитора 1920×1200 html-код закладочного плагина не вмещается в один экран! При этом размер текста поста как минимум раза в 2 меньше этого кода для закладок. И так для каждого поста. Теперь представьте, сколько лишнего “веса” это дает для каждой страницы сайта. Ян, задумайся об этом!
- Никаких лишних внешних ссылок, а, соответственно, нет надобности в добавлении множества из несуществующего в HTML-стандарте тега
<noindex>, придуманного Яндексом. - Небольшой вес скрипта (если не считать фреймворк jQuery). А учитывая, что скрипт кешируется браузером посетителя, как и сам фреймворк, разница в “весе” загружаемой страницы становится существенной по сравнению с html-вариантом, упомянутым чуть выше.
- Ссылки разделены на 2 части: 1-я – закладочные сервисы, 2-я – социальные сервисы. Все это красиво оформлено в виде выпадающего списка. Если вы дружите с CSS и у вас есть желание оформить списки по-своему, то можете легко это сделать.
- Несложная настройка скрипта.
Из минусов я отметил бы разве что раздельные иконки для каждого сервиса, т.е. сколько иконок, столько и запросов к серверу, что не есть хорошо. Можно было бы использовать технологию CSS-спрайтов, однако, тогда потеряется простота настройки – при каждом изменении списка сервисов придется пересобирать картинку с иконками, да к тому же подгонять CSS-стили.
Демо
Чтобы вам было проще разобраться с установкой скрипта, я подготовил чистый пример без всего лишнего.
Скачать
jQuery-cкрипт “Добавить в закладки”
Загрузок: 10654 | Размер: 22 Кб
Установка
Процесс установки скрипта показан на примере WordPress.
- Содержимое архива (за исключением файла
index.html) скопируйте в папку с вашей темой. Место расположения всех файлов не принципиально, только учитывайте пути до них при подключении. - Подключите эти файлы, добавив в файл
header.phpперед тегом</head>следующие 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. Смысл этого – снизить количество запросов к серверу. - Если в вашей теме не подключен фреймворк jQuery, то перед двумя строками из предыдущего пункта добавьте эту:
<?php wp_enqueue_script('jquery'); ?>Для тех, кто будет использовать скрипт не на WordPress – jQuery подключается следующим образом. Вместо вышеуказанной строки вставлять эту:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> - В файле
jqsocial.jsнайдите строку:var folder = 's/';и в кавычках укажите путь до папки с иконками.
- Теперь в те файлы шаблона, которые выводят посты (например,
index.php,archive.php,search.php,single.php) добавьте такую строчку:<script type="text/javascript">jqsocial(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))</script>Для тех, кто будет использовать скрипт не на WordPress, поясняю, где должны подставляться URL и название статьи:
<script type="text/javascript">jqsocial(encodeURIComponent('полная_ссылка_на_статью'),encodeURIComponent('название_статьи'))</script> - Вот, собственно, и все. Наслаждаемся результатом.
Настройка сервисов
Если появилось желание изменить/дополнить/сократить список сервисов, то в файле jqsocial.js находим вот такой кусок кода для первого блока ссылок (закладочные сервисы):
var s=new Array(
'100zakladok.ru','save/?bmurl='+u+'&bmtitle='+t,
'delicious.com','post?url='+u+'&title='+t,
'google.com','bookmarks/mark?op=edit&bkmk='+u+'&title='+t,
'bobrdobr.ru','add.html?url='+u+'&title='+t,
'links.i.ua','mark/?url='+u+'&ename='+t,
'memori.ru','link/?sm=1&u_data[url]='+u+'&u_data[name]='+t,
'moemesto.ru','post.php?url='+u+'&title='+t,
'mister-wong.ru','add_url/?bm_url='+u+'&bm_description='+t,
'linkstore.ru','servlet/LinkStore?a=add&url='+u+'&title='+t,
'lopas.ru','add_story.php?story_url='+u,
'myscoop.ru','add/?title='+t+'&URL='+u,
'ruspace.ru','index.php?link=bookmark&action=bookmarkNew&bm=1&url='+u+'&title='+t,
'vaau.ru','submit/?action=step2&url='+u
);
и такой кусок кода для второго блока ссылок (социальные сервисы):
var s2=new Array(
'badabadu.com','?url='+u+'&posttitle='+t,
'chipp.ru','submit.php?url='+u,
'feedblog.ru','submit.php?url='+u,
'korica.info','add_story.php?story_url='+u+'&story_title='+t,
'monrate.ru','submit.php?url='+u,
'news2.ru','add_story.php?url='+u,
'newsland.ru','News/Add/type/news/',
'sloger.net','submit.php?url='+u
);
Покажу на примере delicious.com, как добавляется сервис. delicious.com дает нам вот такой код для добавления закладки:
<img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>
Из него мы вычленяем следующую ссылку:
http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)
Теперь делаем 2 замены: encodeURIComponent(location.href) меняем на u, а encodeURIComponent(document.title) меняем на t. В результате получаем следующую строку, которую нужно вставить в скрипт:
'delicious.com','save?v=5&noui&jump=close&url='+u+'&title='+t,
И таким образом по аналогии можно добавлять новые сервисы.
Заметьте, что после последнего сервиса в списке (который перед закрывающейся скобкой), запятая стоять не должна. Также при добавлении новых сервисов обратите внимание, что файл иконки сервиса должен быть с расширением .ico, а название файла состоять из имени домена.
Если у вас возникнут трудности с конвертированием ссылок сервисов, то обратитесь в комментариях, я помогу.
Обновления
- 04.06.09 – доработан файл стилей (jqsocial.css) с целью избежать некоторых багов в отображении панельки с ссылками в связи с особенностями верстки на сайтах.
Комментарии (135)
Подскажите, как правильно прописывать путь к папке с рисунками. Перепробывал всё, что только можно, не получается. Саму папку залил в корень шаблона. Буду очень признателен за помощь. Спасибо.
Укажите абсолютный путь, и проблемы не должно возникнуть.
Видно мне “везёт”. Я посмотрел, что другим достаточно было прописать относительный путь и всё заработало. Я указывал и абсолютный путь и всё, что только можно – не работает. Что же ещё придумать?
Добрый день уважаемый Dimox!
Вот всё таки сверстал свой шаблон, хотелось бы услышать Ваши коментарии как професионального верстальщика (в отличии от меня).
И вот вопрос у меня подключены скрипты jquery в теге если можете посмотрите и дайте совет как бы лучше оптимизировать. Буду благодарен Вам за помощь!
http://error2003.org.ua/
Единственное, что могу сказать – jQuery у вас подключается аж 3 раза. Спрашивается: “Зачем?”.
Установлены пару jquery фичей которые должны подключаться внутри тега …Если можеет посоветовать как лучше сделать то огромнейшее Вам спасибо!
Вообщем у меня стоит скрипт который по сути должен вписываться внутрь тега …если можете посоветовать как сделать так как должно быть то спасибо!
Ну знаете просто эти jquery скрипты по сути должны вписываться в внутрь
Может я неправ, раскажите как лучше сделать.
Спасибо.
Я так и не увидел нигде рабочего примера. Скажите, пожалуйста, где глянуть?
И ещё один вопрос. Это только для вордпресса?
Значит плохо смотрели. В статье все написано.
Нет, можно на любой сайт прицепить.
Здравствуйте!
Как убрать эти ужасные полосы по краям?
Что за ужасные полосы?
Фу, разобралась…
В таблице стилей у меня было написано:
overflow: scroll;
что и выдавало полоски со стрелочками сбоку и снизу.
Убрала “overflow” и всё стало как надо.
Дима, если не секрет, а что за плагин у тебя выводит в постах чудесную плавающую колонку перепоста слева – с твиттером, баззом, френдфидом, фейсбуком и др.???
Это не плагин, просто jQuery-скрипт.
Собственный? Или сторонний?
Просто очень уж он красиво выглядит, хочется и себе такой же)))
Сам делал. Возможно, что напишу статью.
Было бы очень замечательно =))
А можно код глянуть? Подскажешь, где в странице его искать?
В самом конце файла dimox.name/wp-content/themes/dimox.name/scripts.js фукнция socializ(), а к странице подключается так:
Спасибо огромное!!! =)))
не смог поставить на dle – просто не отображается. у кого-нибудь это получилось ? помогите разобраться, плиз
Dimox, может есть дополнительные рекомендации для установки на DLE ?
Сейчас надпись “Добавить в закладки” стала отображаться, но список не раскрывается, хотя место на странице занимает размером с него
От движка вообще ничего не зависит. Тут главное – в верстке разбираться.
Мда, у меня не все так здорово: В ИЕ7 при подведении мышки выпадает список нормально, но иконки не отображаются. В конце страницы половину иконок обрезает. В стилях копаться я не очень умею…
Почти все решил. Поменял стили. Для IE7 поменял расширения .ico на .png. Уменьшился размер картинок в 3-5 раз. НО в результате такой замены у сервисов badabadu.com и delicious.com картинки не отображаются во всех браузерах. Прямо мистика какая-то… Помогите решить эту головоломку. Сам я вряд ли решу. Посмотреть это чудо можно например здесь: http://service-est.ru/open-business-itself
Эти картинки не отображаются потому, что при обращении к ним напрямую через адресную строку выводится страница 404:
service-est.ru/wp-content/themes/NewsService_est_ru/social/delicious.com.png
service-est.ru/wp-content/themes/NewsService_est_ru/social/badabadu.com.png
Значит таких файлов нет, либо что-то еще.
Спасибо))) Проблема лежала на поверхности: куда-то делся домен .com из названия иконок. Сам я этого сразу не заметил. Наконец-то, хоть один нормальный “летающий” скрипт закладок заработал у меня как надо. Ставил “one button”. Не путать с “одной кнопкой”. Но он не хочет дружить со стилями моей темы. Устал их править.
Спасибо за скрипт :)
Спасибо за скрипт) Для себя добавил в массивы 3 колонку, с названием, чтобы можно было отображать не только доменом, т.к. например в гугле есть кроме /bookmarks/ ещё и /reader/
Првиет, спасибо полезно, пригодится, один вопрос.
Как можно реализовать все то же самое только без эффектов и горизонтально к примеру под каждой статье в шаблоне single.php… Чтобы скрипт был статическим :)
просто картинки и просто a href
не смог понять как передавать данные для каждой соц сети
Найти другой скрипт или плагин, который выводит в таком формате.
'vkontakte.ru','share.php?url='+u+','facebook.com','sharer.php?u='+u+',
'google.com','reader/link?url='+u+'&title='+t,
'connect.mail.ru','share?share_url='+u+',
'livejournal.com','update.bml?event='+u+'&subject='+t,
добавил в js код сверху “Добавить в закладки” со страниц вообще исчезло, вроде без ошибок в чем может быть проблема
Ошибки в синтаксисе есть.
В конце 3-х из вышеуказанных строк вместо этого:
'+u+',должно быть так:
'+u,Добрый день! понравился данный скрипт!
Я использую самописный сайт на PHP, title я прописываю сам отдельно для каждой страницы….как мне сделать чтобы через переменную $title и $link
пример:
(social(encodeURIComponent(‘$link’),encodeURIComponent(‘$title’))) скрипт подставлял бы эти значения.
как мне это осуществить? я то самому прописываать адреса и названия будет очень долго.
$title и $link поподробней как и где это самое главное сделать
Используйте такой код:
а что нужно в коде изменить? чтобы это заработало?
название раздела
и адресс ссылки? где переменные прописать и как:)
спасибо!
Без понятия. Я же не могу знать, как ваш движок работает.
<title>название раздела</title>это не движок! обычные php файлы
без вариантов?
Не могу ничем помочь.
вот же решение
<script type="text/javascript">socializ(encodeURIComponent(location.href),encodeURIComponent(document.title))</script>У меня скрипт, увы, не работает. В смысле даже не выпадает окно со списком сервисов в принципе. Хотя подключила все так, как здесь описано в точности. И строку про jquery тоже.
Извините, все уже исправилось! Почему-то у меня jQuery подключился только через гугль… а как обычно в WP не сработал.