Как установить кнопки социальных сетей со своим дизайном и счетчиком
Всем доброго времени суток!
Этот день знаменателен для моего блога, потому что на нем наконец-то появится статья о том, как установить на сайт кнопки «Поделиться»
Каждый уважающий себя веб-мастер считает своим долгом рассказать, как скопировать код виджетов с фейсбука себе на сайт. Статей на эту тему море. Но в них нет ни слова о том, как сделать кнопки со своим уникальным дизайном, да еще чтобы учитывалось количество тех, кто запись оценил.
И когда однажды я захотела сделать блок «Поделиться» таким же красивым, как, например, у Борисова, пришлось поломать голову. Где-то в глубине души я догадывалась, что обычным html-кодом тут не обойтись, нужен скрипт. Но где его взять, если в jQuery ты полный ноль? К счастью, решение все-таки нашлось, поэтому оставляю очередную шпаргалку.
Рекомендую вам сервис share24.com на котором можно не только сгенерировать блок кнопок социальных сетей, но и скачать его себе. А раз есть возможность закачать, значит можно и отредактировать на свое усмотрение.
Я записала для вас видео, в котором показываю установку кнопок социальных сетей на примере своего сайта. Сайт, как вы, наверное догадываетесь, на MODx Revolution. Впрочем, основная часть видео будет полезна владельцам сайтов и блогов на любой CMS.
Еще раз краткий план действий:
- Создаем единый png-файл с изображением всех иконок;
- Генерируем скрипт на share24.com;
- Скачиваем скрипт, редактируем стили в файле share42.js;
- Подключаем share42.js скрипта в хедере сайта, если у вас уже есть подключенные скрипты компрессируем все файлы в один на www.refresh-sf.com;
- Заливаем скрипт и наш файл с иконками на сервер;
- Добавляем стили в свой .css файл;
- Копируем код на страницах сайта.
В итоге мы не только получаем индивидуальный дизайн кнопок добавления материала в социальные сети, но и оптимизируем код: подключен только один скрипт, нет лишнего кода в футере или в шапке, все иконки аккуратные, одного размера, а для отображения кнопок используется только один графический файл.
Еще несколько заметок для вебмастеров: