Свой набор кнопок социальных сетей

Полагаю, что большинство блогеров знает, для чего нужны кнопки социальных сетей (те, кто не знает, срочно идут знакомиться со статьей 'Правило трех "И"'). Разработчики платформы Blogger (Blogspot) не обошли вниманием этот вопрос, предоставив нам панель с наиболее популярными, по их мнению, кнопками. Но что делать, если стандартного набора нам недостаточно, хотя бы потому, что в нем нет кнопок популярных в России социальных сетей? Или, в случае, если нам не нравится дизайн этой панельки? Тут вам поможет эта статья!

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

Для начала я хочу, чтоб вы усвоили основные принципы того, что из себя представляет одна кнопка. По сути, кнопка - это картинка, которую мы видим, когда подводим к ней курсор, плюс ссылка на которую мы кликам для перехода. Ссылка снабжена рядом дополнительных опций: черно-белая подложка под картинку, которую мы видим, пока не навели на нее курсор, и описание размера окна, которое откроется, если нажать на ссылку. Довольно упрощенно, но большего, думаю, и не надо. Если вам, к примеру, не нравятся используемые мной картинки для кнопок, ты вы без труда их замените, владея и этим минимумом знаний.

Преимущества моего кода кнопок перед аналогами с других сайтов:

1. Кнопки, где это возможно, отдают максимум информации: название статьи, ссылку на нее, уменьшенную копию первой картинки в статье, небольшой фрагмент статьи.
2. Где это полезно для оформления, производится выделение передаваемых данных курсивом, жирным шрифтом и пр.
3. Корректная работа в Internet Explorer: текст, набранный кириллицей, передается без искажений.

Перейдем от теории к практике. Перво-наперво отключаем стандартный набор кнопок, если он у вас задействован. Для этого идем в настройки внешнего вида блога (Дизайн->Элементы страницы) и нажимаем в модуле "Сообщения блога" ссылку "Изменить". В открывшемся окне снимаем галочку с пункта "Показывать кнопки для публикации".

Теперь открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета", после чего находим этот код:

<div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>

...и сразу под этим кодом добавляем следующее:

<b:if cond='data:blog.pageType == "item"'>
  <div>
    <!--Blogger-->
    <a class='shareme' expr:href='&quot;http://blogger.com/blog-this.g?u=&quot; + data:post.url + &quot;&amp;n=&quot;' expr:name='data:post.snippet' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;t=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;); return false;&quot;' expr:title='data:blog.title + &quot;: &quot; + data:post.title' rel='nofollow' style='background: url(&quot;https://lh3.googleusercontent.com/-zd86rZgogpY/TzURYbnkfQI/AAAAAAAAAbE/9fpYkwVGFNA/s25/but1bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Blogger' src='https://lh6.googleusercontent.com/-hoxDpt12RVs/TzURYrLal8I/AAAAAAAAAbM/zG-tKxM6Odk/s25/but1color.png' title='Опубликовать в Blogger'/></a>

    <!--Twitter-->
    <a class='shareme' expr:href='&quot;http://twitter.com/intent/tweet?original_referer=&quot; + data:post.url + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;text=&quot;' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title), \&quot;_blank\&quot;, \&quot;height=240,width=510\&quot;); return false;&quot;' expr:title='data:blog.title + &quot;: &quot; + data:post.title' rel='nofollow' style='background: url(&quot;https://lh4.googleusercontent.com/-YiTfX-3BJSk/TzURY5VnEkI/AAAAAAAAAbY/XfgI7nlwi3c/s25/but2bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Twitter' src='https://lh3.googleusercontent.com/-RE2kB1W5OV0/TzURZBJNQHI/AAAAAAAAAbQ/oCpbf38DKjQ/s25/but2color.png' title='Опубликовать в Twitter'/></a>

    <!--Живой Журнал-->
    <a class='shareme' expr:href='&quot;http://livejournal.com/update.bml?subject=&quot;' expr:name='data:post.url + &quot;&gt;&lt;b&gt;&quot; + data:post.title + &quot;&lt;/b&gt;&lt;/a&gt; от &lt;b&gt;&quot; + data:post.author + &quot;&lt;/b&gt; (&quot; + data:blog.title + &quot;) : &lt;i&gt;&quot; + data:post.snippet  + &quot;&lt;/i&gt;&quot;' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;event=&lt;a href=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://lh5.googleusercontent.com/-7LyaWP03TPg/TzURaSYqwcI/AAAAAAAAAbw/Z_-_jq_rI_8/s25/but5bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Живой Журнал' src='https://lh4.googleusercontent.com/-l64jF-dqcvE/TzURavNk_OI/AAAAAAAAAb0/ZKEpghoy6hw/s25/but5color.png' title='Опубликовать в ЖЖ'/></a>

    <!--ВКонтакте-->
    <a class='shareme' expr:href='&quot;http://vk.com/share.php?url=&quot; + data:post.url + &quot;&amp;image=&quot; + data:post.thumbnailUrl + &quot;&amp;title=&quot;' expr:name='data:post.snippet' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;description=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;, \&quot;height=280,width=480\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://lh3.googleusercontent.com/-R6JuHs_66ys/TzURZslznKI/AAAAAAAAAbo/nN7HQg4nqO4/s25/but4bw.png&quot;) no-repeat; font-size:25px;'><img alt='во ВКонтакте' src='https://lh6.googleusercontent.com/-Z_lKcxulFwI/TzURZ5LxaXI/AAAAAAAAAbs/Q_6l9HppIdo/s25/but4color.png' title='Опубликовать во ВКонтакте'/></a>

    <!--Одноклассники-->
    <a class='shareme' expr:href='&quot;http://odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=0&amp;st._surl=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=385,width=600\&quot;); return false;&quot;' rel='nofollow' style='background: url(&quot;https://lh3.googleusercontent.com/-3ZggCbbQWqo/TzVaeh8zSCI/AAAAAAAAAdw/9BdzxoWAUTU/s25/but9bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Одноклассники' src='https://lh3.googleusercontent.com/-i50nQdPu_KQ/TzVaecZoRcI/AAAAAAAAAds/7K6QEGQxfhc/s25/but9color.png' title='Опубликовать в Одноклассниках'/></a>

    <!--Я.ру-->
    <a class='shareme' expr:href='&quot;http://my.ya.ru/posts_add_link.xml?URL=&quot; + data:post.url + &quot;&amp;title=&quot;' expr:name='data:post.author + &quot; (&quot; + data:blog.title + &quot;) :&lt;/b&gt; &lt;i&gt;&quot; + data:post.snippet  + &quot;&lt;/i&gt;&quot;' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;body=&lt;b&gt;\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;, \&quot;height=560,width=1005\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://lh6.googleusercontent.com/-3gnlQVPOQcQ/TzURgEWMOBI/AAAAAAAAAdA/iGxaDkWX9RA/s25/but7bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Я.ру' src='https://lh4.googleusercontent.com/-m8LwONvloFU/TzURbjS48aI/AAAAAAAAAcQ/jAT6H-Y3arI/s25/but7color.png' title='Опубликовать в Я.ру'/></a>

    <!--Мой Мир-->
    <a class='shareme' expr:href='&quot;http://connect.mail.ru/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot; + data:post.thumbnailUrl + &quot;&amp;title=&quot;' expr:name='data:post.snippet' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;description=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;, \&quot;height=360,width=537\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://lh6.googleusercontent.com/-Q9JTxREWlb8/TzURa9QpEHI/AAAAAAAAAcE/Dm9UdwJznZM/s25/but6bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Мой Мир' src='https://lh3.googleusercontent.com/-uL4hMd1Bpyo/TzURa3zi7hI/AAAAAAAAAcI/M5Z47vV9rQg/s25/but6color.png' title='Опубликовать в Моем Мире'/></a>

     <!--LiveInternet-->
    <a class='shareme' expr:href='&quot;http://liveinternet.ru/journal_post.php?action=n_add&amp;cnurl=&quot; + data:post.url + &quot;&amp;cntitle=&quot;' expr:name='data:post.url + &quot;]&quot; + data:post.title + &quot;[/URL][/B] от [B]&quot; + data:post.author + &quot;[/B] (&quot; + data:blog.title + &quot;) : [I]&quot; + data:post.snippet + &quot;[/I][/QUOTE]&quot;' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;cntext=[QUOTE][B][URL=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://lh3.googleusercontent.com/-V1qrtuecAu0/TzURZKi1I2I/AAAAAAAAAbc/fzQLdVuWxCc/s25/but3bw.png&quot;) no-repeat; font-size:25px;'><img alt='В LiveInternet' src='https://lh5.googleusercontent.com/-DRj24WA6Cy8/TzURZfiGgwI/AAAAAAAAAb8/u_mNL15otYI/s25/but3color.png' title='Опубликовать в LiveInternet'/></a>

    <!--Facebook-->
    <a class='shareme' expr:href='&quot;http://facebook.com/sharer.php?s=100&amp;p[url]=&quot; + data:post.url + &quot;&amp;p[images][0]=&quot; + data:post.thumbnailUrl + &quot;&amp;p[title]=&quot;' expr:name='data:post.snippet' expr:onclick='&quot;window.open(this.href.replace(/\/s72-c\//,/s125-c/) + encodeURIComponent(this.title) + \&quot;&amp;p[summary]=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;, \&quot;height=352,width=640\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://lh3.googleusercontent.com/-AMe2KniFK00/TzURbnpPaeI/AAAAAAAAAcM/ayEkODi6g00/s25/but8bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Facebook' src='https://lh5.googleusercontent.com/-Xizbo1KGk8w/TzUReaC-S5I/AAAAAAAAAc0/dqbtSKosFd8/s25/but8color.png' title='Опубликовать в Facebook'/></a>

    <!--AddThis-->
    <a class='addthis_button shareme' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' style='background: url(&quot;https://lh4.googleusercontent.com/-HCew6spKMOs/TzURYeptFVI/AAAAAAAAAbA/Hdu1V0A07lk/s25/but0bw.png&quot;) no-repeat; font-size:25px;'><img alt='В закладки' src='https://lh4.googleusercontent.com/-lkoVJfokYVQ/TzURYXhp6gI/AAAAAAAAAbI/hubZqYIjrBs/s25/but0color.png'/></a><script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script><script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=XX-XXXXXXXXXXXXXXXX' type='text/javascript'/>
  </div>
</b:if>

* Я сделал так, чтобы социальные кнопки не отображались на главной странице, а были доступны только на страницах самих статей. Если вы хотите, чтобы кнопки социальных сетей отображались и на главной странице, то удалите из кода первую и последнюю строки. Здесь они подсвечены.

Внимание! Кнопка AddThis персонифицирована.

Прежде, чем вы получите окончательный код кнопки, необходимо будет внести кое-какие данные и подтвердить регистрацию через электронную почту. Для этого идем на сайт сервиса AddThis, выбираем кнопку для Website и первый стиль в списке стилей, соглашаемся зарегистрироваться, чтобы получать статистику и жмем на большую оранжевую кнопку. В полученном коде ищем "#pubid=". Идентификационный код, что идет после знака равенства и до закрывающей кавычки, копируем в аналогичное место в нашем коде для кнопки AddThis, заменив им иксы.

Остался один небольшой нюанс: добавляем стили для отображения кнопок, чтобы они меняли свой цвет и размер при наведении. Для этого находим в шаблоне строку "/* Posts" и вставляем под ней следующий код:

/* Posts
----------------------------------------------- */
.shareme img {
  opacity: 0;
  filter: alpha (opacity = 0);
  vertical-align: text-top;
}

.shareme img:hover {
  opacity: 1;
  filter: alpha (opacity = 100);
  vertical-align: text-top;
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
}

Вот, собственно, и все. Если у вас возникли по ходу прочтения какие-то вопросы - не стесняйтесь. Буду рад ответить :-)