Георгиевская ленточка

Яркие социальные кнопки для 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. Кстати, Вы можете протестировать мои вертикальные кнопочки справа, понажимать их.

45 комментариев:

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

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

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

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

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

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

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

      Удалить
  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. Не получается сделать кнопки вертикальными - после установки кода они прокручиваются вместе с страницей

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

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

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

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

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

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

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

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

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

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