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

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


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


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

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

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


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



<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>


Добавляем стили для отображения кнопок, чтобы они меняли свой цвет и размер при наведении. Для этого находим в шаблоне строку "/* 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);
}


Вот и все.


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

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

Комментариев нет: