Здравствуйте, уважаемые читатели. Сегодня мы разберем, как можно поставить симпатичные социальные кнопки в вашем блоге или сайте.
Недавно ставил сайт на DLE, и нашел довольно симпатичный модуль кнопок социального обмена, потом захотел адаптировать для своего сайта, но не в виде кнопок социального обмена, а как кнопки групп и твиттера сайта. Есть множество плагинов кнопок соц. обмена, но в многих много ограничений, и из подобных плагинов с красивым дизайном по пальцам можно по пальцам пересчитать. Давайте расскажу в деталях о модуле. Оригинальное название модуля soc.panel, и его можно без проблем найти в сети. Адаптировать его будем на WordPress, но вы без проблем на других движках (на Joomla и Drupal работает, как родной). Социальные кнопки работают за счет скрипта на писаного на jQuery. Сразу предупреждаю, что скрипт не работает на IE6, поэтому либо придется прописывать, чтобы в поле зрения IE6 не попадал скрипт, но я не рекомендую этого делать, потому что это влечет много разных проблем. В данном случаи можно обойтись заглушкой, которая не будет пускать на сайт устаревшие браузеры, даже не обязательно ее писать самому, есть такой хороший плагин WP-NoIE6.
Вернемся к нашему скрипту, отличительная часть скрипта это: весь HTML-код кнопок находится непосредственно в скрипте. Это лучше тем, что:
— на сайте не появятся дополнительные внешние ссылки (т.е. PR страницы перетекать не будет);
— HTML-код страниц не будет захламляться кодом кнопок;
— за счет кэширования скрипта браузером скорость загрузки страниц будет чуть быстрее.
Приступим к делу! В архиве с модулем 2 папки: папка с картинками соц. кнопок и папка с js-скриптом, ну и инструкция. Строение шаблонов для DLE отличается от WordPress, поэтому мы пойдем другим путем.
Для начала скопируем папки socimg (картинки по умолчанию имеют размер 48×48 для корректного отображения измените размер на 36×36) и js в корневую папку нашего сайта. Теперь поправим наши стили обычно это файл style.css в самом конце файла добавляем:
#socializ {
display: inline-block;
border: 1px solid #E5E5E5;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 6px 0 6px 6px;
background: #FFF;
overflow: hidden;
}
* html #socializ {display: inline}
*+html #socializ {display: inline}
#socializ:hover {
background: #F6F6F6;
border: 1px solid #D4D4D4;
-moz-box-shadow: 0 0 5px #DDD;
-webkit-box-shadow: 0 0 5px #DDD;
box-shadow: 0 0 5px #DDD;
}
#socializ a {
float: left;
width: 36px;
height: 36px;
margin: 0 6px 0 0;
padding: 0;
background-color: #F6F6F6;
}
#socializ img {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}Сохраняем, теперь редактируем файл header.php в 98% процентах шаблонов для WordPress он есть перед тегом размещаем следующий код:
Далее все просто добавляем где нам необходимо, чтобы отображались кнопки, (можете добавить в шаблон сразу после поста, но я поступил иначе, и добавил кнопки в sidebar через виджет) вставляем следующий код:
Все готово! Настроить цвета и все остальные мелочи можно через стили. Но мы сейчас пойдем немного дальше разберем немного код скрипта, откройте файл socializ_3.js любым редактором (блокнотом не рекомендую может нарушится структура), и найдите эту часть кода:
Тут сразу видно за она отвечает, тут можете убрать не нужную кнопку или наоборот добавить нужную, достаточно просто основываясь на существующих рисунков кнопок сделать свою, и добавить сюда ссылку, структура ссылки элементарная.
На этом и закончим. Исходники можете скачать тут. Все следующие статьи можно будет найти тут и на моем сайте. Удачи в ваших начинаниях.