Боковая панель кнопок социальных сетей

Добавим боковую плавающую панель кнопок социальных сетей в Blogger. Хотя, можно и на любой другой сайт.

Кнопки будем устанавливать используя сервис AddThis.

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

Вариант 1. Непосредственно в шаблон

Для этого идем в Шаблон — Изменить HTML, с помощью сочетания клавиш Ctrl+F находим </body> и перед ним добавляем код:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=vipbiz" async="async"></script>

После сохраняем шаблон.

Можете использовать данный скрипт, а можете зарегистрировать свой аккаунт и заменить username, выделенный красным на свой.

Кроме того, если вы хотите применить другие стилевые решения, например, круглые кнопки или квадратные, белые или черные, тогда попробуйте настроить свой код непосредственно на сайте. Все это подробно в сообщении: Установка кнопок Поделиться AddThis на Blogger.

Перед всеми манипуляциями не забывайте делать бэкап, а после сохранять сделанные изменения.

Этот вариант установки не во всех шаблонах может корректно работать. Поэтому посмотрим еще вариант.

Вариант 2. В гаджет HTML/JavaScript

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

Этот вариант самый простой, которым может воспользоваться даже «чайник». Для его установки не надо лезть в шаблон, достаточно просто добавить код, сгенерированный с помощью сервиса, в гаджет HTML/JavaScript.

Гаджет оставьте без названия и расположите в Дизайне над или под блоком Сообщения блога. Кстати, если код вам больше будет не нужен его легко можно будет удалить, просто удалив гаджет.

Работу кнопок можете проверить непосредственно на странице этого сообщения.

12 комментариев

Ирина Александровна Кудрявцева: Здравствуйте. Установила кнопки по 1 варианту, закрепила справа, но почему-то на главной странице не отображаются. В чем может быть причина? http://diva106.blogspot.ru/; 19 октября 2014 г. в 11:51
Светлана Ковалева: Ирина, не только на главной, но и на страницах сообщений не отображается. Возможно у вас конфликт с приборной панелью, которая у вас слева установлена. Попробуйте второй вариант, только кнопки расположите справа.; 19 октября 2014 г. в 22:03
Unknown: Как мне создать свой блог на блогстопе?; 4 ноября 2014 г. в 19:53
Светлана Ковалева: Ольга, самое первое сообщение посмотрите: Как создать блог на Blogspot; 4 ноября 2014 г. в 20:17
Andrei Demenkov: День добрый. А не работает ни один из вариантов. Кога вставляю код в шаблон, блоггер плюется и пишет: More than one widget was found with id: HTML1. Widget IDs should be unique.; 27 декабря 2014 г. в 17:23
Светлана Ковалева: Это не от меня, Andrei, зависит. На самом сервисе, по какой-то причине, скрипты перестали работать. Возможно временное явление, не могу ничего сказать.; 27 декабря 2014 г. в 19:42
Andrei Demenkov: А не, все-таки заработал виджет. Спасибо за наводку: очень хорошая вещь, у самого блоггера кнопок недостаточно.; 27 декабря 2014 г. в 20:07
Светлана Ковалева: Все понятно, у них адрес расположения скрипта изменился. Внесла поправку в сообщение.; 27 декабря 2014 г. в 20:50
Unknown: Отличная статья, все получилось с первого раза) Спасибо; 25 января 2015 г. в 10:40
Марина: Всё отлично работает кроме кнопки одноклассники. С чем это может быть связано? Спасибо.; 21 марта 2016 г. в 16:17
Вячеслав: Удобные кнопки и при мобильном просмотре; 6 июня 2016 г. в 23:41
Unknown: Благодаpю все получилось :); 4 февраля 2017 г. в 17:10