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

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

• Установка кнопки добавления в Facebook для Blogger
• Установка кнопки Google Buzz в блоге на Blogger (хотя сервис сейчас уже не актуален)
• Инструменты и сервисы Twitter для Blogger (кстати, у твиттера появилась оригинальная собственная кнопка)

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

Согласитесь, очень удобно и компактно организовано. Что подобное не составляет труда повторить на WordPress, потому что для этой платформы существуют специальные плагины для кнопок социальных закладок. С Blogspot все как обычно сложнее, тем не менее близкую по сути и форме секцию организовать можно и на нашей любимой платформе.

Вариант 1

Перво-наперво не забудьте сделать резервную копию шаблона. После этого заходим в раздел «Дизайн», меню «Изменить HTML», ставим галочку расширить шаблоны виджета.

Шаг1. Находим в верхней части кода ]]></b:skin> и перед ним добавляем стили оформления:

#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}

#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}

Шаг 2. Находим строку <div class=’post-header-line-1′ /> и вставляем после нее следующий фрагмент:

<b:if cond='data:blog.pageType ==  &quot;item&quot;'>
<div id='sharebox'>
<div class='float'><script  src='https://tweetmeme.com/i/scripts/button.js'  type='text/javascript'/></div>
<div class='float'><a  href='http://www.facebook.com/sharer.php' name='fb_share'  type='box_count'>Share</a><script  src='https://static.ak.fbcdn.net/connect.php/js/FB.Share'  type='text/javascript'/><div class='clear'/></div>
<div class='float'><a  class='google-buzz-button' data-button-style='normal-count'  href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script  src='https://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script  src='https://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
</b:if>

В данном случае вы найдете кнопки добавления в социальную сеть tweetmeme, facebook, сервис Google Buzz, а также популярных на западе stumbleupon.

Вариант 2

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

Шаг1. Как и в первом варианте находим ]]></b:skin>, но добавляем перед ним в этот раз другие стили:

.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:215px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}

Шаг 2. Находим блок похожий на <p><data:post.body/></p> (может быть без Р) и вставляем впереди данный фрагмент:

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

  <div class='post_share'> 
  <div class='wdt_button'> 
  <center> 
  <script type='text/javascript'> 
  tweetmeme_url = &#39;<data:post.url/>&#39;; 
  </script> 
  <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script> 
  </center> 
  </div>
  <div class='wdt_button'> 
  <center> 

  <a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; +   data:post.title'   expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot;   + data:post.id + &quot;\&quot;,0);&quot;' onClick='return   buzzPopup(this, &apos;Buzz this&apos;)'   rel='nofollow'><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S3Y8Gi87V8I/AAAAAAAADDc/xpLQ5jnX_Gk/s1600/g-buzz.png'/></a> 
  </center> 
  </div> 
  <div class='wdt_button'> 
  <center>
  <script type='text/javascript'> 
  scoopeo_url=&quot;<data:post.url/>&quot;; 
  </script> 
  <script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/> 
  </center> 
  </div> 
  <div class='wdt_button'> 
  <center>
  <a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
  </center> 
  </div> >
  <div class='wdt_button'> 
  <center> 
  <span class='post-icons'> 
            <!-- email post links --> 
            <b:if cond='data:post.emailPostUrl'> 
              <span class='item-action'> 
                <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> 
                  <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email 
                </a> 
              </span> 
            </b:if>
            <!-- quickedit pencil --> 
            <b:include data='post' name='postQuickEdit'/> 
          </span> 
  </center> 
  </div> 
  </div> 
  </b:if> 

Здесь кроме Tweetmeme, Google Buzz и Facebook найдете некий сервис scoopeo, а также возможность отправить ссылку на статью друзьям по почте.

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