18 окт. 2014 г.

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

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

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

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


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

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

Светлана Ковалева Светлана Ковалева

Ирина, не только на главной, но и на страницах сообщений не отображается. Возможно у вас конфликт с приборной панелью, которая у вас слева установлена. Попробуйте второй вариант, только кнопки расположите справа.

Ольга Никитина

Как мне создать свой блог на блогстопе?

Светлана Ковалева Светлана Ковалева

Ольга, самое первое сообщение посмотрите: Как создать блог на Blogspot

Andrei Demenkov

День добрый. А не работает ни один из вариантов. Кога вставляю код в шаблон, блоггер плюется и пишет: More than one widget was found with id: HTML1. Widget IDs should be unique.

Светлана Ковалева Светлана Ковалева

Это не от меня, Andrei, зависит. На самом сервисе, по какой-то причине, скрипты перестали работать. Возможно временное явление, не могу ничего сказать.

Andrei Demenkov

А не, все-таки заработал виджет. Спасибо за наводку: очень хорошая вещь, у самого блоггера кнопок недостаточно.

Светлана Ковалева Светлана Ковалева

Все понятно, у них адрес расположения скрипта изменился. Внесла поправку в сообщение.

Наталья Конда

Отличная статья, все получилось с первого раза) Спасибо

Марина

Всё отлично работает кроме кнопки одноклассники. С чем это может быть связано? Спасибо.

Вячеслав

Удобные кнопки и при мобильном просмотре

Наталья Носникова

Благодаpю все получилось :)

Отправить комментарий