Варианты кнопок социальных сетей для 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;
}

Вариант 2

Более симпатичные готовые кнопки социальных сетей нам предлагает Яндекс Выбираем нужный вариант и копируем код. Данный код можно вставить в шаблон блога, а можно в конце каждой статьи, переключившись на вкладку Изменить HTML. В этом случае кнопки будут доступны только на странице статей и не видны на главной. Пробовала вставить в шаблон, тогда список похожих статей выводился с пунктирным подчеркиванием. А так как нравится все менять и экспериментировать, мне легче вставить готовый блог кнопок самой. А вдруг завтра найду лучший вариант? 

Вариант 3

Хотите значков побольше, зайдите на сайт Одна кнопка . Но возможность выбора здесь отсутствует. Устанавливать этот блок кнопок также легко. Два нажатия мышкой и виджет у вас в блоге.

Вариант 4

Очень симпатичные кнопки найдете на сайте AddThis. 

Жмем на кнопку Get AddThis (см. красная стрелка) и попадаем на следующую страницу, где нам предлагают зарегистрироваться. Если хотите попробовать без регистрации, закрываете всплывающее окно и производите настройку. Как только выберете платформу, в нашем случае это Blogger, и стиль кнопок, появляется кнопка Установить виджет Blogger.

Нажав на эту кнопку,  попадете на знакомую страницу.  Выбираем блог и нажимаем "добавить виджет".

Под каждым сообщением увидите очаровательные кнопки. Перетягиваем  гаджет HTML/Java Script под "Сообщения блога". На этом процесс установки закончен.

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

Вариант 5

Кнопки от ShareThis.  Сервис понравился, потому остановлюсь на нем поподробнее. Предлагают зарегистрироваться. Я не регистрировалась и сразу нажала сверху на панели кнопку "Get the Button". После  нажатия  "Получить кнопки" откроется следующая страница:

• Здесь выбираем платформу блога. Для нас это Blogger. 
• Затем определяемся со стилем  кнопок. Возьмем первый стиль. Нажимаем и видим два окошка с кнопками:

• Выбираем размер кнопок: большой или малый.
• Определяемся с расположением кнопок: горизонтальное или вертикальное.
• С помощью стрелок выбираем кнопки социальных сетей, какие хотим установить. Можно перемещать кнопки из правого окошка в левое и наоборот, а также изменять их последовательность.
• Нажимаем большую зелёную кнопку "Get the Button" и оказываемся на знакомой странице.

Выбираем блог и нажимаем "добавить виджет". Все. Наши кнопки красуются под каждым сообщением. Остается только перетащить  гаджет  HTML/Java Script под "Сообщения блога".

Установка других стилей кнопок происходит аналогично.

Все вышеприведенные варианты установки кнопок (кроме первого) не требуют изменения шаблона  и потому каждый новоиспеченный блоггер легко справится с их установкой.

Вариант 6 

Кнопки от share42.  На эти кнопочки я давно поглядывала. Они то мне нравились больше всего. Но для их установки необходимо обзавестись хостингом. Отложила изучение этого вопроса на неопределенное время. Недавно, зайдя на блог "Школа Blogger(a)", нашла виджет социальных кнопок для Blogger. Видимо у многих возникли сложности, автору надоело отвечать в комментариях и он сделал нам подарок - специальный виджет. 

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center'>
Если понравилась статья, поделитесь с друзьями.
  <div align='center'>
<div class="share42init"></div>
<script type="text/javascript" src="http://dl.dropbox.com/u/48089857/share43/share42.js"></script>
<script type="text/javascript">share42('http://dl.dropbox.com/u/48089857/share43/')</script>
</div></div></b:if>

Надпись над кнопками  можно убрать или поменять на свою.

Если вас устраивают яркие кнопки как на картинке, можно на этом и остановиться. Хотите изменить стиль кнопок,  как у меня,  поколдуем еще.  В шаблоне перед строчкой
]]></b:skin> вставим код:

#share42 {
  display: inline-block;
  padding: 6px 0 0 6px;
  background: #FFF;
  border: 1px solid #E9E9E9;
  border-radius: 4px;
}
#share42:hover {
  background: #F6F6F6;
  border: 1px solid #D4D4D4;
  box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5;}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

Не забудьте сохранить шаблон.

Все права на скрипт принадлежат  Share42.com

Вариант 7

Самый простой способ установки кнопок от сервиса Pluso. Множество вариантов на любой вкус.

Выбираем понравившийся стиль кнопок, цвет, фон, размер, соцсети. Предпросмотр. Если все устраивает, копируем код и вставляем в шаблон блога после <data:post.body/> (если в шаблоне будет несколько таких строк,  вставьте код после последней). Не получается вставить кнопки после <data:post.body/> , попробуйте найти строчку - <div class='post-footer-line post-footer-line-1'>

Новичкам, боящимся пока вносить изменения в шаблон, данный код можно вставить в конце поста.

Мой вариант кнопок от Pluso.

Оригинальные изображения кнопок Twitter можно найти здесь 

А хотите привлечь в свои социальные сети новых друзей и последователей? - Установите красивые вращающиеся иконки в сайдбаре.

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы быть в курсе, подпишитесь на  RSS-канал

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