Яркие социальные кнопки для Blogger

05.04.2013

Не секрет, что социальные кнопки помогают авторам продвигать блог. Если читателям понравилась статья, наверняка, они захотят поделиться информацией о ней с друзьями. Или добавить статью в закладки, чтобы потом быстро ее найти. Для этого и служат социальные кнопки. Сегодня расскажу, как добавить в блог на Blogger'е яркие кнопки от Pluso.


 1. Заходим на сайт http://share.pluso.ru/

2. Выбираем социальные сети, кнопки которых хотим добавить в блог:
 Я добавила к основным популярным соцсетям ВКонтакте, Одноклассники, Facebook, Twitter, Google+, Мой мир@Mail.Ru еще Blogger, LiveJornal, В Кругу Друзей, Я.ру. А также сервисы закладок: от Yandex, Yahoo, Google, Бобрдобр.


 3. Настраиваем внешний вид социальных кнопок:

  • большие/средние/мелкие
  • квадратные/круглые
  • в одну строку/в две строки
  • горизонтальные/вертикальные
  • со счетчиком/без счетчика
  • без фона/с фоном


 4. Слева можем осуществить предпросмотр кнопочек. Например:



5. Если Все нравится - копируем код:

6. В настройках блога ищем пункт Дизайн. Дальше на схематичном изображении нажимаем Добавить гаджет > Основы > HTML/JavaScript и поле Содержание вставляем код социальных кнопок. И сохраняем гаджет.

Перетаскиваем его в нужное место.

Чтобы вставить вертикальные фиксированные социальные кнопки , нужно (идею взяла здесь):

1) В настройках внешнего вида кнопок выбрать - вертикальные, в одну строку. Большие или средние - в зависимости от Вашего блога (ширины полей справа или слева).

2) Скопировать код.

3) Вставить код кнопок в новый гаджет (смотри выше шаг 6). Пока не сохранять.

4) Добавить строку в код (для фиксации и расположения социальных кнопок):
  • Если Вы выбрали кнопки с фоном, то в строку                               
<div class="pluso" data-options="medium,square,line,vertical,nocounter,theme=04"
        после слова "pluso" вставить строку:

       display:scroll; position:fixed; top:90px; left:50px;

  • Если выбрали кнопки без фона, то также после слова "pluso" вставить строку:
        style="display:scroll; position:fixed; top:90px; left:50px;"
5) Нажать Просмотр. Если кнопки далеко "наезжают" на контент блога или не входят по высоте, это можно отредактировать.

     top - отступ кнопок от самого верха блога (его можно уменьшить).
     left:50px - расположение кнопок слева на расстоянии 50. Я заменила left на right (справа) и уменьшила расстояние до 1px.

ПРИМЕР кода фиксированных вертикальных социальных кнопок по правому краю блога:

<script type="text/javascript">(function() {
      if (window.pluso) {return};
       var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
       s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
       s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://x.pluso.ru/pluso-x.js';
       var h=d[g]('body')[0];
       h.appendChild(s);
    })();
 </script>
<div class="pluso-engine" style="display:scroll; position:fixed; top:55px; right:1px;" pluso-sharer={"buttons":"vkontakte,odnoklassniki,facebook,twitter,google,moimir,googlebookmark,blogger,liveinternet,livejournal,myspace,friendfeed,vkrugu,moikrug,email,print,more","style":{"size":"big","shape":"square-corner","theme":"theme05","css":"background:transparent"},"orientation":"vertical","multiline":false} ></div>

6) Сохранить гаджет.

Теперь и на Вашем блоге появятся красивые и яркие социальные кнопки. 

P.S. Кстати, Вы можете протестировать мои вертикальные кнопочки справа, понажимать их.

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

  1. Да, кнопки эти вещь хорошая и нужная!

    ОтветитьУдалить
  2. Большое спасибо за совет, мне очень пригодилось!

    ОтветитьУдалить
  3. Большое вам спасибо!!!!!!!!!!!!!
    все получилось!!! http://picture-design.blogspot.ae/

    ОтветитьУдалить
    Ответы
    1. Пожалуйста! Рада за Вас :)

      Удалить
    2. Жду ещё каких нибудь навороченных гаджетов!)))

      Удалить
  4. А как их вставить после каждого сообщения в блоге?
    Спасибо, у вас замечательный блог.

    ОтветитьУдалить
  5. Надо будет тоже поставить

    ОтветитьУдалить
  6. Как убрать подписку на ATOM внизу страницы

    ОтветитьУдалить
    Ответы
    1. Александр найди в HTML коде строку и удали её навсегда , или законспектируй вот так: . Больше оно тебя тревожить не будет ).

      Удалить
    2. не получилось вставить код в ответ(. слова нарисовались а коды нет. пробей по инету подсказок куча.

      Удалить
  7. спасибо большое) ваши уроки мне очень помогают

    ОтветитьУдалить
  8. Спасибо Мария что ответили на моё письмо ! Отличный вариант кнопки сбоку, не занимает в баре лишнее место гаджетов и выглядит достойно. Вот только сайт плюсо не грузится как назло 2-й день и сайт из за этого медленно грузится ( стоят у меня кнопки плюсо только в баре )и нет возможности испытать новый вариант расположения кнопок. Неужели только у меня, или у всех это?

    ОтветитьУдалить
    Ответы
    1. Юрий, вчера, наверное, у всех тормозило все... Я аж плюнула и ушла...сил не было этот бардак терпеть

      Удалить
  9. Скажите пож-та а как вставить данные кнопки после каждого сообщения в блоге?, точнее чтобы они работали на пост а не на блог в целом

    ОтветитьУдалить
  10. Этот комментарий был удален автором.

    ОтветитьУдалить
  11. Скопировал код пробовал и вертикально и горизонтально нет кнопок только в блоге отображаеться отвертка и гайочний ключ

    ОтветитьУдалить
    Ответы
    1. Попробуйте взять код из статьи о том, как вставить социальные кнопки в пост: http://samasajt.blogspot.ru/2013/08/kak-vstavit-socialnye-knopki-v-statju.html

      Удалить
  12. Не получается 5-ый пункт. Кнопки не передвигаются
    5) Нажать Просмотр. Если кнопки далеко "наезжают" на контент блога или не входят по высоте, это можно отредактировать.
    top - отступ кнопок от самого верха блога (его можно уменьшить).
    left:50px - расположение кнопок слева на расстоянии 50. Я заменила left на right (справа) и уменьшила расстояние до 1px. - не получается

    ОтветитьУдалить
  13. Спасибо! Воспользовался советом!

    ОтветитьУдалить
  14. Получилось заходите http://chertezhi-kompas3d.blogspot.com/

    ОтветитьУдалить
  15. уххх ты, спасибо большое;)))

    ОтветитьУдалить
  16. Мария, спасибо за ваши уроки! Благодаря Вам настраиваю свой новорожденный блог. Поставила яркие кнопочки и в правую колонку и в каждый пост. Но смотрится очень наляписто. Пожалуйста подскажите, как в сообщениях их заменить на меньшие, а из правой колонки сделать такую красоту вертикальную и статичную как у Вас.
    И ткните меня носом, на Ваш урок с колокольчиками ( можно их заменить? мне по названию блога светлячки нужны). Спасибо огромное!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Светлана! Рада, что мои статьи Вам помогают в "рождении" блога ))
      1. По Вашей заявке написала пост про то, как в верхнюю часть блога добавить свою любую картинку: http://samasajt.blogspot.ru/2014/01/kartinka-v-verhnih-uglah-bloga.html Осталось только светлячков найти.
      2. Во второй части статьи выше и рассказывается, как сделать вертикальные фиксированные соц. кнопки. При выборе кнопок на Pluso - размер лучше выбрать средний.
      3. Как вставить кнопки в статью описывается здесь: http://samasajt.blogspot.ru/2013/08/kak-vstavit-socialnye-knopki-v-statju.html но это также вариант от Pluso. По этому же принципу Вы можете поставить и др. кнопки: http://samasajt.blogspot.ru/2012/05/blogger_15.html Они поменьше.

      Удалить
    2. Доброе утро, Мария! Благодарю за быстрый ответ и Вашу отзывчивость!

      Удалить
  17. Здравствуйте Мария, я добавил иконки по вашему руководству но почему то у меня они только влево редактируются а вправо дальше центра не могу сдвинуть хоть и указываю 1 пиксель справа, и еще остался видимым кусок от HTML гаджета . Подскажите в чем причина как исправить можно, ссылка на блог http://pokupkinternet.blogspot.ru/

    ОтветитьУдалить
  18. Спасибо огромное! Наконец-то нашёл! Вот: http://placeforbeatlemans.blogspot.com/

    ОтветитьУдалить
  19. Здравствуйте Мария! У меня не получилось. Кнопок самих нет, есть только название "Социальные кнопки"???
    см. http://alla-petelki.blogspot.com/

    ОтветитьУдалить
    Ответы
    1. Открыла другие браузеры, там кнопки есть!!! Не отображаются, почему-то только в браузере Chrome - Google. Как исправить???

      Удалить
    2. Не дождалась Вашего ответа.Удалила эти кнопки.

      Удалить
  20. Благодарю, все получилось. Раз есть боковые кнопочки, можно удалить из сообщений? Я так думаю, чтобы не перегружать

    ОтветитьУдалить
  21. Хорошая статья, только у меня никак не получается сделать кнопки сбоку, все равно внизу под сообщением видны...

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Юлия. Если шаблон блога от сторонних разработчиков - может на работать этот способ.

      Удалить
  22. Здравствуйте, подскажите. Как можно сделать так, чтобы пользователь любой мог написать пост, статью на моем блоге. Как можно установить кнопку "Добавить пост" ? Вообще то мне нужно что бы посетитель опубликовал свое объявление у меня на блоге. Так как это делаю я www.habrahabr.org

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Вы можете в настройках блога (Настройки >> Основное >> Разрешения) добавить авторов блога, но для этого Вам нужно знать их электронную почту, чтобы оставить приглашение. Если же Вы хотите организовать Доску объявлений с возможностью подачи объявления посетителями, то нужен платный хостинг+CMS+скрипты. Встроенная доска объявлений есть в Instant CMS - сама CMS бесплатна, но хостинг нужен платный. Пример - мой сайт http://www.kamenskie-r.ru/

      Удалить
  23. Кнопки только под всеми гаджетами. Сдвинуть как у вас на страничке в правый край экрана не получается. Кнопки не фиксируются. Подскажите, пожалуйста )))

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Добавила в статью (см. шаг 5) ПРИМЕР кода фиксированных вертикальных социальных кнопок по правому краю блога. Попробуйте его просто скопировать и вставить в пустой гаджет HTML/JavaScript.

      Удалить
    2. Спасибо, Мария!!! Всё получилось. Ваш блог это просто восхищение!!! Ни когда не думал что на блогспоте можно так шикарно оформиться. Я вечный поклонник Вашего блога! Я Вас обожаю )))

      Удалить
    3. И Вам спасибо, Игорь, за теплые слова :) Поделитесь ссылкой на ваш блог - в гости загляну)

      Удалить
    4. Вот мой блог: http://ziznzdorowaja.blogspot.com.by/ Я недавно его создал так что строго не судите :)

      Удалить
  24. Добрый день! А если блог, это динамический просмотр "фотоальбом"! Не получается размещения соц. ссылок!

    ОтветитьУдалить
  25. Спасибо большое, очень пригодился урок)

    ОтветитьУдалить
  26. Спасибо за подробную инструкцию. Очень помогло мне)

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

Загляните и на другие страницы ^