SexyBookmarks — очень удобный закладочный плагин для WordPress, во многом похожий на AddThis, только заточенный специально для блогов на этом движке.
Эта статья поможет вам встроить и использовать плагин на любом сайте, не только WordPress. Для этого нам понадобится оригинальный плагин и немножко терпения. Совсем чуть-чуть.
Преимущества плагина SexyBookmarks очевидны:
- для установки нужно только залить пару файликов на сервер
- великолепный дизайн и шикарно отрисованные иконки сервисов
- легко настраиваемое отображение
- 50 с небольшим социальных сайтов, куда вы можете добавить свой
- админка
На текущий момент SexyBookmarks можно вставить лишь на несколько наиболее распространенных блого-платформ: WordPress, Joomla, bbPress. В этом руководстве я покажу вам, как добиться того же на своем сайте, применяя исключительно CSS, Javascript и HTML, без каких-либо серверных скриптов. Да, из-за отсутствия php-скриптов будут некоторые ограничения, но и вам, и вашим посетителям должно хватить того, что мы сделаем. По установке для различных движков — пожалуйста, гуглите.
Подготовка
Для этого нам понадобится последняя сборка плагина SexyBookmarks с главной страницы проекта. Из архива мы возьмем три файла:
- js/sexy-bookmarks-public.js
- css/style.css
- images/sexy-sprite.png
После этого качаем ядро фреймворка jQuery и закидываем его в папку js. Или подключаем динамически с гугла, кому как удобнее.
Чуть-чуть пишем на Javascript
Открываем файл js/sexy-bookmark-public.js, находим функцию автоматического выравнивания иконок (autocentering) и вставляем следующий код после нее:
/*
click handler for SexyBookmarks
Credit: Phong Thai Cao - http://www.JavaScriptBank.com
Please keep this creadit when you use this code
*/
jQuery('.sexy-bookmarks a.external').click(function() {
// get the current URL & encode it into the standard URI
var url = encodeURIComponent(window.location.href), desc = '';
// parse the description for the above URL by the text() method of jQuery
// the text must be placed in the P tag with ID="sexy-bookmarks-content"
// so you can change the container of description with another tag and/or another ID
if( jQuery('p.sexy-bookmarks-content').length ) {
desc = encodeURIComponent(jQuery('p.sexy-bookmarks-content').text());
}
// detect the social bookmark site user want to share your URL
// by checking the className of site that we'll declare in the HTML code
// and assign the URL & description we got into the current anchor
// then redirect to the clicked bookmark site, you can use window.open() method for opening the new window
switch(this.parentNode.className) {
case 'sexy-twittley':
this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc + '&pcat=Internet&tags=';
break;
case 'sexy-digg':
this.href += '?phase=2&title=' + document.title + '&url=' + url + '&desc=' + desc;
break;
case 'sexy-twitter':
this.href += '?status=RT+@your_twitter_id:+' + document.title + '+-+' + url;
break;
case 'sexy-scriptstyle':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-reddit':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-delicious':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-stumbleupon':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-mixx':
this.href += '?title=' + document.title + '&page_url=' + url + '&desc=' + desc;
break;
case 'sexy-technorati':
this.href += '?add=' + url;
break;
case 'sexy-blinklist':
this.href += '?Action=Blink/addblink.php&Title=' + document.title + '&Url=' + url;
break;
case 'sexy-diigo':
this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc;
break;
case 'sexy-yahoobuzz':
this.href += '?submitHeadline=' + document.title + '&submitUrl=' + url + '&submitSummary=' + desc + '&submitCategory=science&submitAssetType=text';
break;
case 'sexy-myspace':
this.href += '?t=' + document.title + '&u=' + url;
break;
case 'sexy-facebook':
this.href += '?t=' + document.title + '&u=' + url;
break;
case 'sexy-designfloat':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-devmarks':
this.href += '?posttitle=' + document.title + '&posturl=' + url + '&posttext=' + desc;
break;
case 'sexy-newsvine':
this.href += '?h=' + document.title + '&u=' + url;
break;
case 'sexy-google':
this.href += '?op=add&title=' + document.title + '&bkmk=' + url;
break;
}
})
Подключаем код
Открываем файл страницы (или шаблона), на которой должен работать плагин, ищем в нем секцию head и вставляем следующий код:
Без него плагин не заработает. Если jQuery уже подключен, первую строку естественно нужно исключить.
Настраиваем HTML
Ищем место на странице, куда собирались вставить кнопки, и вставляем туда этот HTML-код:
Тайтлы и текст у ссылок конечно же можно менять, но вот имена классов не следует — плагин обрабатывает именно их.
Готово
Демонстрационную страницу можно поглядеть тут.
Заключение
Во-первых, мы можем легко обновиться, до этого достаточно перезалить файлы из нового дистра плагина SexyBookmarks. Во-вторых, мы можем навешать любых дополнительных событий на кнопки в плагине и до невозможности их наизменять.
Надеюсь, вам понравилось и пригодилось это руководство. Если что-то непонятно — задавайте вопросы в комментариях, помогу.
