Как добавить свои социальные кнопки на сайт. Часть 2

как-добавить-соцкнопки-2

В прошлой статье, мы добавляли кнопки социальных сетей на свой сайт. Теперь давайте научимся делать (точнее будет использовать свои или чужие), а затем и добавлять их на сайт. Возможно, Вы уже сами догадываетесь как это сделать :) Самые любопытные могут взглянуть на пример.

Совершенно естественно, если у Вас возник вопрос: А чем данный метод добавления социальных кнопок отличается от предложенного ранее?

Данный метод не использует 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 архив. И идем к настройкам.

css-spritecss-sprite социальные кнопки онлайн генератор css-sprite

  1. Выбираем вертикальное или горизонтальное положение. Это зависит от Вашего дизайна блога/сайта. Я выбрал горизонтальное для наших кнопок.
  2. Смещение по горизонтали – это расстояние между кнопками, например ставим 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 года) – полностью новый город. Многие говорят похож на Дубаи, честно не знаю не был там :)

      • #

        Летом с вашими земляками в Анталии отдыхали в одном отеле, они тоже мне говорили про современный город и т.д. Хотел потом по приезду домой в сети поискать картинки, да забыл. Вчера вот вы напомнили своим роликом.

        Прийдется нанести официальный визит лично. ))

  • #

    Спасибо. Добавил кнопочки к себе на сайт!

    • #

      Не за что :) а что за сайт если не секрет?