Блог saintista

Кнопка «Добавить в социальные закладки» распространенный элемент современных сайтов. Простое и удобное решение на jQuery позволит логко добавить такую кнопку на сайт.

Что и как ?

Возьмем jquery.bookmark.package-1.1.3.zip

Подключим jquery

и

<style type="text/css">@import "jquery.bookmark.css";</style>
<script type="text/javascript" src="jquery.bookmark.js"></script>

Добавим в HTML код div или span с нужным ID.

Добавим js код.

$(‘#defaultBookmark’).bookmark();

И все, закладки готовы.

Но вряд ли нам подойдет текущий внешний вид.

Что же в наличии несколько опций позволяющих изменить внешний вид функционала.

Опции:

$.bookmark.setDefaults({icons: ‘img/bookmarks.png’}); - изменим подложку изображение отвечающий за внешний вид социальных сервисов. Придется правда поменять немного код css под свои нужды в таком случае

$(‘#selectBookmark’).bookmark({sites:
['delicious', 'digg', 'furl', 'stumbleupon']}); — показываем только закладки на выбранные социальные сервисы.

$(‘#expandedBookmark’).bookmark({compact: false,
sites: ['facebook', 'google', 'magnolia', 'mixx']}); — вывод в стандартном формате, с названиями социальных сервисов.

$(‘#popupBookmark’).bookmark({popup: true, popupText: ‘Добавить в соц закладки’}); — показывать плашку с иконками при нажатии на выбранный елемент, компактный попап вариант. popupText — дополнительный параметр, какую надпись выводить.

$(‘#popupImageBookmark’).bookmark({popup: true,
popupText: ‘‘}); — вместо надписи выводим заданное изображение

$(‘#favouriteBookmark’).bookmark({sites: ['slashdot'], addFavorite: true}); — автоматически добавить в избранное браузера.

$(‘#emailBookmark’).bookmark({ addEmail: true}); — вывод иконки, письмо другу отправить

$(‘#iconsBookmark’).bookmark({icons: ‘img/bookmarks-big.png’, iconSize: 22,
sites: ['digg', 'dzone', 'stumbleupon', 'technorati',
'reddit', 'delicious', 'newsvine', 'furl', 'blinklist']}); — альтернативные иконки

$(‘#otherBookmark’).bookmark({
url: ‘http://сайт/страница’,
title: ‘jQuery Bookmark Reference’,
sites: ['technorati', 'reddit']});
— закладка не на текущую, а на другую, заданную , страницу

$(‘#changeBookmark’).bookmark({sites: ['google', 'furl']});

$(‘#changeButton’).toggle(function() {
$(‘#changeBookmark’).bookmark(‘change’,
{sites: ['stumbleupon', 'propeller']});
},
function() {
$(‘#changeBookmark’).bookmark(‘change’,
{sites: ['google', 'furl']});
}); меняем на лету закладки. Добавляется кнопка при активации которой, будут меняться иконки сервисов (указанных в параметрах) в которых можно оставить закладку на вашу страницу.

Список сайтов.

Список сайтов которые использует плагин довольно объемный.
ID — название сайта

* alltagz — alltagz
* allvoices — Allvoices
* aol — myAOL
* arto — Arto
* ask — Ask
* backflip — Backflip
* ballhype — BallHype
* bebo — Bebo
* bibsonomy — BibSonomy
* blinklist — BlinkList
* bloglines — Bloglines
* blogmarks — Blogmarks
* bookmarkit — bookmark.it
* bookmarksfr — bookmarks.fr
* buddymarks — BuddyMarks
* bx — Business Exchange
* bzzster — Bzzster
* care2 — Care2
* citeulike — citeulike
* connotea — Connotea
* current — Current
* dealsplus — deals plus
* delicious — del.icio.us
* designfloat — Design Float
* digg — Digg
* diigo — Diigo
* dzone — DZone
* evernote — Evernote
* expression — Expression
* facebook — Facebook
* fark — Fark
* faves — Faves
* feedmelinks — Feed Me Links
* folkd — Folkd
* foxiewire — FoxieWire
* fresqui — Fresqui
* friendfeed — FriendFeed
* funp — funP
* furl — Furl
* gabbr — Gabbr
* globalgrind — Global Grind
* google — Google
* gravee — Gravee
* healthranker — HealthRanker
* hemidemi — HEMiDEMi
* hugg — Hugg
* identica — identi.ca
* imera — Imera
* instapaper — Instapaper
* jamespot — Jamespot
* jumptags — Jumptags
* kaboodle — Kaboodle
* khabbr — Khabbr
* kledy — Kledy
* kirtsy — Kirtsy
* kool — Koolontheweb
* linkarena — Linkarena
* linkagogo — LinkaGoGo
* linkedin — LinkedIn
* livejournal — LiveJournal
* magnolia — ma.gnolia
* maple — Maple
* meneame — men?ame
* mindbody — MindBodyGreen
* misterwong — Mister Wong
* mixx — Mixx
* multiply — Multiply
* mylinkvault — MyLinkVault
* myspace — MySpace
* n4g — N4G
* netlog — NetLog
* netscape — Netscape
* netvibes — Netvibes
* netvouz — Netvouz
* newstrust — NewsTrust
* newsvine — Newsvine
* nowpublic — NowPublic
* oknotizie — OKNOtizie
* oneview — OneView
* ping — Ping
* plaxo — Plaxo Pulse
* propeller — Propeller
* protopage — Protopage
* pusha — Pusha
* reddit — reddit
* scoopeo — Scoopeo
* segnalo — Segnalo
* shoutwire — ShoutWire
* simpy — Simpy
* sitejot — Sitejot
* slashdot — Slashdot
* smaknews — SmakNews
* smarking — Smarking
* sphinn — Sphinn
* spurl — Spurl
* squidoo — Squidoo
* startaid — StartAid
* strands — Strands
* stumbleupon — StumbleUpon
* stumpedia — Stumpedia
* symbaloo — Symbaloo
* tagza — Tagza
* tailrank — Tailrank
* technet — TechNet
* technorati — Technorati
* technotizie — Technotizie
* thisnext — ThisNext
* tipd — Tip’d
* tumblr — tumblr
* twitthis — TwitThis
* viadeo — Viadeo
* vodpod — Vodpod
* webnews — WebNews
* wikio — Wikio
* windows — Windows Live
* wishlist — Amazon WishList
* wists — Wists
* xanga — Xanga
* xerpi — Xerpi
* yahoobm — Yahoo Bookmarks
* yahoobuzz — Yahoo Buzz
* yahoo — Yahoo MyWeb
* yardbarker — Yardbarker
* yigg — Yigg
* yoolink — yoolink

Но при желании можно добавить свой сайт.

var html = »;
$.each($.bookmark.getSites(), function(id, site) {
if (id != ‘example’) {
html += ‘

‘ + id + ‘ — ‘ + site.display + ‘

‘;
}
});
$(‘#siteList’).html(html);

где

id — его id
ite.display — выводимый заголовок

Полный список всех параметров

$(selector).bookmark({

url: ‘‘, // url на страницу сервиса добавления закладки
title: », // Заготовок закладки
sites: [], // список ID сайтов
icons: ‘bookmarks.png’, // подложка с иконками сайтов

iconSize: 16, // размер иконок

iconCols: 16, // количество колонок иконок

target: ‘_blank’, // имя tragets для ссылок на закладки

compact: true, // компактный вид

hint: ‘Send to {s}‘, // Для попап варианта текст

popup: false, // попап режим включить отключить

popupText: ‘Bookmark this site…’, // текст для попап тригера

addFavorite: false, // показывать или нет иконку добавить в избранное

favoriteText: ‘Favorite’, // текст для тригера добавить в избранное

favoriteIcon: 0, // Иконка для линка добавить в избранное

addEmail: false, // режим отправить другу по email

emailText: ‘E-mail’, // Текст в режиме отправить другу

emailIcon: 1, // Иконка для email линка

emailSubject: ‘Interesting page’, // Тема email

emailBody: ‘I thought you might find this page interesting:\n{t} ({u})’,
// содержимое письма
});

$(selector).bookmark(‘change’, settings); // переопределение параметров

$(selector).bookmark(‘destroy’); // удалить закладки

$.bookmark.setDefaults(settings); // восстановить стандартные параметры

$.bookmark.addSite(id, display, icon, url); // добавление в закладки дополнительного сайта

$.bookmark.getSites(); // подробная инфа по сайтам в закладках

Тэги: bookmarks, jQuery

jQuery SELECT (jquery-asmselect)

jQuery отслеживаем ввод символа в input (Enter, tab)

WordPress подключение JQuery

jQuery png Fix

Печать картинки на странице через js

jQuery ajax в IE7

Prototype и jQuery используем одновременно

jQuery cookie проще некуда

jQuery watermark input field

jQuery округлые углы

jQuery древовидное меню

jQuery ajax рейтинг

Запись была опубликована Среда, августа 19, 2009 в 10:10 в рубрике jQuery, js, Ultimate jQuery. Читать рассылку RSS 2.0. Вы можете оставить комментарий или трэкбек с Вашего сайта.