В прошлой статье, мы добавляли кнопки социальных сетей на свой сайт. Теперь давайте научимся делать (точнее будет использовать свои или чужие), а затем и добавлять их на сайт. Возможно, Вы уже сами догадываетесь как это сделать 
Самые любопытные могут взглянуть на пример.
Совершенно естественно, если у Вас возник вопрос: А чем данный метод добавления социальных кнопок отличается от предложенного ранее?
Данный метод не использует javascript и/или вообще сторонние скрипты, т.е. увеличение скорости по сравнению с предыдущим методом очевидно. Это, наверное, главное преимущество данного метода. Ну, конечно главным минусом является – отсутствие счетчиков, т.е. визуально Вы не будете знать, сколько раз нажимали на кнопки. Но если подумать, то на некоторые кнопки в принципе не нужны счетчики. За исключением основных (по моему мнению) социальных сетей, о которых я уже писал.
Помимо всего сказанного выше в процессе мы уменьшим количество http запросов картинок кнопок с 6 до 1 с помощью CSS спрайта. А это приводит только к увеличению скорости загрузки Вашего сайта.
Давайте, уже начнем практическую часть, и Вам все станет ясно, т.к. это очень просто.
Начнем с самих кнопок, точнее с картинок. Для этого я сделал небольшую подборку самых разных иконок, можете пройти и скачать нужное Вам.
1.Подбор иконок социальных сетей и их добавление
Я решил за основу взять основные социальные кнопки: twitter, facebook, vkontakte, livejournal, мой мир, google buzz. Если Вам нужны другие кнопки, можете прогуглить необходимые картинки, выбрать из подготовленной статьи или нарисовать самому. Мы же будем работать с данной подборкой.
2.Создание CSS спрайта
Выбрав необходимые картинки, у нас в итоге получилось их 7. Надеюсь для удобства Вы их назвали facebook.gif, vkontakte.jpg и т.д. ? Если нет, то тогда сделайте это. Названия картинок будет названием классов в css файле!
Делать CSS спрайт можно и самому, но зачем, если уже все придумано. Тем более, что сделать CSS спрайт самому задача не из легких. Перейди по ссылке на сервис онлайн генератора CSS спрайтов. ru.spritegen.website-performance.org Сервис на русском языке, поэтому особых сложностей быть не должно.
Для начала, заархивируйте все картинки в ZIP архив. Теперь загрузите в онлайн генератор. Все остальные функции на картинке с моими комментариями.
В начале, загрузите ZIP архив. И идем к настройкам.
- Выбираем вертикальное или горизонтальное положение. Это зависит от Вашего дизайна блога/сайта. Я выбрал горизонтальное для наших кнопок.
- Смещение по горизонтали – это расстояние между кнопками, например ставим 5 px. Внимание необходимо сразу определить расстояние! Данное расстояние затем не изменить! Смещение по вертикали можете не трогать.
Выбираем формат готовой картинки. Доступны PNG, JPG и GIF форматы. Я выбрал GIF формат.
3. Класс для Ваших кнопок. Я удалил, т.е. оставил пустым. Так ка мне необходим формат типа: .fb {}, а не .sprite-fb {}
4. Копируем данные куски кода в Ваш css файл темы. Обычно это style.css в папке css, либо в корневой папке вашей темы.
Вот мой код:
#container {
background: url("images/buttons.gif") no-repeat top left;
height: 20px;
}
.fb{ background-position: 0 0; width: 95px; height: 20px; float:left;margin-right: 5px;}
.google{ background-position: -100px 0; width: 105px; height: 20px;float:left; margin-right: 5px;}
.moimir{ background-position: -210px 0; width: 95px; height: 20px; float:left;margin-right: 5px;}
.twitter{ background-position: -310px 0; width: 95px; height: 20px; float:left;margin-right: 5px;}
.vk{ background-position: -410px 0; width: 95px; height: 20px;float:left; }
Конечно я изменил название картинки, что и Вам советую
В итоге получим такую картинку и добавил float:left; и margin-right: 5px; для обтекания ссылок слева и отступа справа. Далее Вы поймете.
3. Код добавления социальных кнопок
Теперь займемся добавлением кода социальных кнопок в файл single.php в папке с темой вашего блога wp-content/themes/ваша_тема/ после этого участка:
<?php the_content(); ?>
Т.е. сразу после основного текста.
Приведу сразу коды всех кнопок:
</pre> <div id="container"> </div> <pre>
Теперь немного разберемся: <div id=”container“> класс вывода картинки через css.
Ссылка (href=”http://twitter.com/intent/tweet?text=RT @gtalkkz <?php the_title(); ?>: <?php the_permalink(); ?>“) при нажатии на которую, откроется новое окно (target=”_blank”), при на ведении на картинку появится Добавить в twitter.
<?php the_title(); ?> Это текущий заголовок статьи/страницы.
<?php the_permalink(); ?> Текущая ссылка на статью/страницу.
Ссылки являются стандартами добавления информации в социальную сеть.
Думаю, все стало на свои места.
Еще можно вставить <div class=”buttons”>Коды кнопок</div> для красоты внешнего вида кнопок с помощью css.
В принципе это все. Можете посмотреть и порадоваться 
А вот и живой пример.
с/у УтБ
Используйте для стабильности крупных проектов выделенные сервера, которые отвечают всем современным требованиям.
Сегодня на десерт: Гоночный болид от Яндекс по Астане
не могу разобраться с пунктом №3. подскажите, где находится папка с темой блога? (если речь о blogger,или это доступно только в wordpress?)
Отличная инструкция. Сейчас у меня на моем сайте стоят кнопки яндексовским скриптом, просто и сердито. Люди действительно очень часто рекомендуют товары (вот интересно – на главной странице нажатий единицы, а в товарах – в разы больше!). Плюс Я.Кнопок в том, что они в Метрику интегрируются – все нажатия видны. Но это решение более элегантное. Буду переделывать – локально уже получилось без лишних хлопот, за что спасибо автору! Остается вопрос – как удобнее всего отследить нажатия теперь?
отслеживать не получиться, ведь js не используется
Вот тоже все хочу свои кнопки в блог поставить! А где можно скачать для WP стильные кнопки? Я еще не определился до конца с дизайном, поэтому стилизовать под свой сайт рано.
попробуйте share42.com, неплохо смотрятся и можно выбрать количество.
Я все голову ломал как лчше сдеалть. Ставил блок от яндекса, пробовал от шаре42 да и много других. В итоге решил не париться и использовать готовый вариант в виде плагина.
А если делать самому, то я бы лучше ява скриптом организовал. Не так уж сильно повлияет на скорость загрузки, там кода совсем чутка получается.
Может и займусь самоделкой на досуге.
Я сделала проще. Поставила себе плагин Social Media Widget и никаких проблем. Очень прост в установке и эксплуатации, а значки можно загрузить любые. Я воспользовалась теми, которые были вшиты в самом плагине (там 4 набора разных иконок), а для вКонтакте делала кнопочку сама. Заходите, убедитесь сами (нажав на мой ник над комментом). Да и если нужного варианта социальной кнопки нет, можно создать свой, вписав какое угодно название, урл и поставив картинку. Кстати, дарю идею – это отличная тема новой статьи
По сути я и делаю так: картинка + ссылка. Просто плюс к этому использую css спрайты.
А я установил кнопки плагином Share Buttons.
Неплохо смотрится и настройка удобная.
Ролик красивый.
плагином легче всего
Кнопочки очень нужный элемент, они привлекают читателя заставляя его тем самым дольше задерживаться на блоге, да и трафик с социалок идёт неплохой. Спасибо за статейку!
Большое спасибо, долго искал подобную инструкцию
Классная инструкция! Я в свой сайт на джумле каким-то скриптом кнопки подгужала. Нашла в нете он-лайн генератор скрипта. Потом модулем в нужном месте этот скрипт запускала.
посмотрите на jed есть неплохие решения.
Огромное спасибо автору хочу сказать, за столь объемную, и актуальную на сегодняшний день статью! Спасибо!
не за что всегда рад таким теплым словам:-)
С трудом установил кнопки (по другой рекомендации), но они у меня не такие красивые и выглядят невзрачно. Второй раз, думаю, с подобным подвигом не справлюсь.
у меня здесь все просто;)
Хорошая отсылка на сервис онлайн генератора CSS спрайтов. Раньше подобное не встречалось. А теперь создавать стили станет намного проще.
есть еще пару, но этот пока удовлетворяет моим потребностям
попробую на досуге, спс за такое детальное раписывание, вот только вопрос возник, ведь есть определённые плагины (модули) чем они хуже то?
не за что;) никто не говорит, что хуже. Таким образом мы добавляем только нужное нам
Всё нормально,кнопки работают.Автор молодец.
Кнопки кнопками, а ролик понравился. Это действительно Астана?
Хм. Честно скажу, был практически во всей Европе, к вам правда не заезжал, но судя по ролику весьма и весьма. Неужели и правда так чисто и все так современно?
не верите?=) приезжайте, увидите. Левый берег (с 97 года) – полностью новый город. Многие говорят похож на Дубаи, честно не знаю не был там
Летом с вашими земляками в Анталии отдыхали в одном отеле, они тоже мне говорили про современный город и т.д. Хотел потом по приезду домой в сети поискать картинки, да забыл. Вчера вот вы напомнили своим роликом.
Прийдется нанести официальный визит лично. ))
Спасибо. Добавил кнопочки к себе на сайт!
Не за что
а что за сайт если не секрет?