Кнопки социальных сетей для Blogger

Очень часто, заходя на чей-то блог, можно увидеть кнопки социальных сетей. И этот атрибут служит вовсе не для красоты. 

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

Кнопки социальных сетей позволяют читателям в один клик разместить ссылку на понравившуюся статью в любой социальной сети. Пользователи будут делиться информацией с вашего блога в той сети, где они зарегистрированы. А значит популярность вашего блога будет расти.

Владельцу же блога не обязательно быть зарегистрированным на всех социальных сервисах. Это нужно для посетителей блога.

Наверняка вы уже видели такие кнопки на моем блоге, поэтому сейчас я поделюсь с вами, как вы можете сделать такие же у себя.

Итак, 

Вариант №1

На Blogger уже существует некоторый набор кнопок. Но привлекательными они не выглядят. Давайте их раскрасим. Если такие кнопки у вас не стоят, то зайдите на вкладку "Дизайн" и в настройках сообщения блога поставьте галочку "Показывать кнопки для публикации".

Теперь добавим цвета. Выбираем вкладку "Шаблон" ---- "Изменить HTML"  --- поставить галочку в чекбокс " Расширить шаблоны виджета" и перед кодом ]]></b:skin> вставляем: 

.sb-email {background-position: 0 -40px !important;}

.sb-blog {background-position: -20px -40px !important;}

.sb-twitter {background-position: -40px -40px !important;}

.sb-facebook {background-position: -60px -40px !important;}

.sb-buzz {background-position: -80px -40px !important;}

a.share-button{

-moz-box-shadow: 0 0 1px #FFF inset;

-webkit-box-shadow: 0 0 1px #FFF inset;

box-shadow: 0 0 1px #FFF inset;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

}

a.share-button:hover {

-moz-box-shadow: 0 0 4px #FFF inset;

-webkit-box-shadow: 0 0 4px #FFF inset;

box-shadow: 0 0 4px #FFF inset;

}

Для того чтобы вам легко было найти код ]]></b:skin> нажмите клавиши CTRL+F и введите его в окошке.

ВНИМАНИЕ!!! Перед тем как вносить изменения в HTML код шаблона, сделайте резервное копирование. Чтобы потом вы могли восстановить все настройки!

ДО                        ПОСЛЕ

Вариант №2

Сервис  Яндекс предлагает нам готовые и очень симпатичные кнопочки. Код кнопок можно вставить в код шаблона, тогда они будут появляться автоматически в конце каждой статьи, а можно вставлять отдельно в каждую статью. Во втором случае они не будут видны на главной странице.

Для того чтобы установить подобные кнопки перейдите по ссылке http://api.yandex.ru/share/, сделайте все необходимые настройки. Скопируйте полученный код и вставьте его в HTML код шаблона после <data:post.body/> Как это сделать смотрите в описании первого варианта.

Вариант №3

Вот еще очень интересный вариант. Для установки этого горизонтального виджета в  HTML шаблоне блога  найти тег  <data:post.body/> и вставить после него код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id="share42init">

</div>

<script type="text/javascript" src="http://blogabloger.ru/share42/gorizontal/share42.js"></script>

<script 

type="text/javascript">share42('http://blogabloger.ru/share42/gorizontal/')</script>

<link type='text/css' rel='stylesheet' 

href='http://blogabloger.ru/share42/gorizontal/share42.css' />

</b:if>

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

Все эти варианты были опробованы мною лично. Все работает. Пока я остановилась на варианте №2.

Вам, понравилась статья?

Хотите получать интересную информацию и приглашения на эксклюзивные мероприятия?

Подпишитесь на новости блога.

Сделайте это прямо сейчас!

Ваш e-mail: * Ваше имя: *

Как только нажмете на кнопку ПОЛУЧИТЬ, сразу проверьте свою электронную почту, там пришло сообщение подтвердить подписку от службы Smart Responder. Подтвердите подписку. И как только Вы это сделаете, Вам будут регулярно приходить письма о новостях блога. 

Понравилась статья? Поделитесь ей с друзьями.