Кнопки социальных сетей для сайта.

Переопредепение иконок социальных сетей для сервиса Pluso.

Приветствую всех читателей блога. Сегодня мы с Вами научимся устанавливать блоки кнопок соц сетей на сайт с помощью онлайн сервиса «Pluso», а главное, научимся переопределять иконки, предустановленные самим «Pluso» на более подходящие к дизайну нашего сайта.
Итак, давайте приступим.



Для начала создадим на локальном сервере папку «Pluso» или с любым другим названием на Ваше усмотрение. В ней папку «www» и в ней файлы index.html и style.css. Так же создадим папку «img» для наших иконок.
Теперь нам понадобятся иконки социальных сетей. Можете нарисовать их сами в Photoshop или скачать PSD исходники подходящего Вам дизайна в интернете. Благо их там огромное количество на любой вкус. Что я собственно и сделал для этого урока.
Дальше заходим на сервис «Pluso» по адресу share.pluso.ru и выбираем нужные соц сети. Для этого из правой колонки перетаскиваем их в левую. Не нужные наоборот перетаскиваем из левой в правую. На панели выбора стиля иконок выбираем любую позицию.


Скролим ниже и устанавливаем размер кнопок – «Большие». Необходимый размер мы все равно будем переопределять по нашим потребностям. Квадратные или круглые так же не имеет значения. Определяйтесь по тем кнопкам, какие у Вас есть. Дальше выбираем «Горизонтальные», «Без счетчика» и «Без фона». Нажимаем кнопку «КОПИРОВАТЬ».


Теперь во вкладке «Опции» выбираем пункт «Настройки…». В открывшемся окне переходим в пункт «Новый документ». Здесь мы задаем параметры для всех новых создаваемых документов. В списке «Синтаксис» устанавливаем HTML. Тетерь, при создании документа теги будут подсвечиваться, а при его сохранении будет автоматически выбран тип файла HTML.
В блТеперь открываем любым редактором кода наши файлы index.html и style.css. В индексном файле прописываем доктайп, подключаем наш файл стилей и внутри «body» вставляем скопированный код. Файл стилей пока не трогаем. Запускаем локальный сервер и в адресной строке браузера набираем http://«имя нашей папки». Должна открыться страница с подобным содержимым:


Для дальнейшей работы нам понадобится Firebug если используем Firefox (страница для установки https://getfirebug.com/). Для этого нажимаем F12. Если используем Хром, все равно F12. Нажимаем синюю стрелку и выбираем любую из кнопок соц сетей. Теперь мы сможем определить какие стили отвечают за внешний вид наших кнопок:


Определим эти стили в style.css. Для этого копируем их со всем содержимым и вставляем в наш файл стилей. Причем значение Background-position для каждой кнопки свое и прописывается отдельно. Должно получиться так:
.pluso-010010100101-06 .pluso-wrap a {
background-image: url(http://share.pluso.ru/img/pluso-like/square/big/06.png);
}
.pluso-010010100101-06 .pluso-wrap a.pluso-vkontakte {
background-position: -168px 0;
}
.pluso-010010100101-06 .pluso-wrap a.pluso-odnoklassniki {
background-position: -126px 0;
}
.pluso-010010100101-06 .pluso-wrap a.pluso-facebook {
background-position: -0px 0;
}

Как Вы заметили, файл с иконками подгружается с сервера Pluso. Чтобы подключить свои иконки, мы должны создать свой файл PNG. Для образца скачаем исходный файл по указанному в стилях адресу.
Открываем Photoshop и в нем файл с нашими иконками. Отключаем все лишние слои и с помощью Crop с соотношением сторон один к одному аккуратно вырезаем первую иконку:


Ширина скачанного с Pluso файла в моем случае 40 px. Соответственно и наш файл не должен отличаться. По крайней мере пока. Поэтому заходим в «Размер изображения» и устанавливаем размер 40 на 40 пикселей. Нажимаем «Ок».


Теперь нажимаем Ctrl+Shift+Alt+S и сохраняем как PNG24 в нашу папку для изображений с именем social.png. Дальше в слоях скрываем данную иконку и открываем следующую. Тем же сочетанием клавиш сохраняем под именем 1.png, следующую под именем 2.png и так далее все необходимые иконки. Основной файл можно закрыть без сохранения. Открываем все созданные ранее png файлы в фотошопе.
Теперь подправим файл social.png. Заходим в «размер холста» и увеличиваем ширину в зависимости от количества всех иконок. Например, если иконки три, по 40 пикселей, плюс какое-то расстояние между ними (пикселя по 4-5, это не критично), то получается примерно 150 пикселей.


Дальше просто перетаскиваем на него иконки из отальных файлов и равномерно расставляем. Сохраняем.


Все, наш файл готов. Теперь его нужно прописать в файл стилей, заменив старый url. Для того, чтобы переопределить нужные нам стили на наш css файл, необходимо в конце каждого свойства прописать !important. Так же следует обнулить значения для Background-position. В результате должно получиться следующее:
.pluso-010010100101-06 .pluso-wrap a {
background-image: url("../img/social.png") !important;
}
.pluso-010010100101-06 .pluso-wrap a.pluso-vkontakte {
background-position: 0 0 !important;
}
.pluso-010010100101-06 .pluso-wrap a.pluso-odnoklassniki {
background-position: 0 0 !important;
}
.pluso-010010100101-06 .pluso-wrap a.pluso-facebook {
background-position: 0 0 !important;
}

Обратите внимание, что в стилях в Firebug появились стили определенные в файле style.css. И теперь мы должны выставить правильные первые значения для Background-position всех кнопок. Для этого кликаем по значению в Firebag там где стиль прописан в нашем файле и стрелками «вверх» или «вниз» устанавливаем необходимое значение для каждой кнопки, прописывая соответствующие значения в файл стилей (можно воспользоваться CSSUpdater).


Для изменения размера кнопок открываем в Фотошопе наш файл с иконками, заходим в «Размер изображения» и при включенном режиме сохранения пропорций, изменяем высоту до нужной высоты кнопки. Нажимаем «ОК» и сохраняем файл.
В файле стилей прописываем ширину и высоту кнопок в том же стиле, где указан url. И обязательно с !important.
В Firebag настраиваем положение для Background-position для каждой кнопки и вносим соответствующие значение в файл стилей. На этом все.
Финальный вид файла стилей с кнопками по 20 пикселей:
.pluso-010010100110-07 .pluso-wrap a {
    background-image: url("../img/social2.png") !important;
 width: 20px !important;
 height: 20px !important;
}
.pluso-010010100110-07 .pluso-wrap a.pluso-vkontakte {
    background-position: -25px 0 !important;
}

.pluso-010010100110-07 .pluso-wrap a.pluso-odnoklassniki {
    background-position: -49px 0 !important;
}

.pluso-010010100110-07 .pluso-wrap a.pluso-facebook {
    background-position: 0px 0 !important;
}
.pluso-010010100110-07 a.pluso-more {
    display: none !important;
}

И в заключение хочется добавить, что на локальном сервере Pluso не работает. Поэтому не пугайтесь, увидев сообщение «Bad request». На «живом» хостинге все работает. Проверено.



Видеоверсия поста.


Скачать видео.


2 комментария :

  1. Большое спасибо за статью!
    Особенно за "
    И в заключение хочется добавить, что на локальном сервере Pluso не работает. Поэтому не пугайтесь, увидев сообщение «Bad request». На «живом» хостинге все работает. Проверено.
    ".
    А то мучался, с вопросом почему не работает ))

    ОтветитьУдалить

Ваш комментарий: