14 февр. 2012 г.

Вставляем кнопки AddThis в Blogger

Привет друзья и читатели блога buxip.blogspot.ru.
Последний пост написанный мною здесь датируется 15 ноября 2011 года, почти два месяца, как блог не обновлялся.
Сегодня я заменил стандартные кнопки социальных сетей на более функциональные от AddThis.
Вернее сказать они здесь уже были, но только не в шаблоне, а в виджете.
И вот виджет я удалил, а код переместил в шаблон, не значительное изменение, но уже не плохой повод об этом рассказать.
Сделал я это ещё и потому, что в комплектации виджета отсутствует кнопка Google+, а в ручную добавить код именно этой кнопки, не представляется сложным.
Вот этот код для кнопки Google+:
<a class='addthis_button_google_plusone'/>

Всем эти кнопки хороши, вот только кнопки Яндекса нет, и РуТвит скрипт, пришлось добавлять отдельно.
Наверное будет интересно посмотреть на весь код и узнать что к чему?
Итак код и пояснение:
<script src="http://rutvit.ru/js/share.js" type="text/javascript"/>
 <!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '   >
 <a class='addthis_button_preferred_1'/>
<a class='addthis_button_preferred_2'/>
 <a class='addthis_button_preferred_3'/>
 <a class='addthis_button_preferred_4'/>
 <a class='addthis_button_google_plusone'/>
 <a class='addthis_button_compact'/>
  <a class='addthis_counter addthis_bubble_style'/>
   </div>
   <script src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e97f28a510df898" type="text/javascript"/>

         <!-- AddThis Button END -->
Скрипт выделенный у меня оранжевым, принадлежит РуТвиту, который я вставил перед блоком кнопок, вы можете его не копировать если он вам не подходит по каким либо соображениям.
Далее, уже сам блок кнопок, зеленым у меня toolbox addthis_default_style задает значение самого наименьшего формата кнопок.
Если хотите крупнее, то значение будет другим.
Далее розовым или маджентой, у кого как отобразится этот цвет, button_preferred_4 количество отображаемых кнопок.
То есть, если вы хотите что бы отображалось например три кнопки, значит нужно удалить четвертую строку, если наоборот хотите добавить пять или более, то для каждой добавьте значение, например:
  <a class='addthis_button_preferred_5'/>
Далее синим цветом обозначен код для кнопки Google+ и ещё, красным pubid=xa-4e97f28a510df898 ваш идентификатор который вам будет присвоен после регистрации вашего сайта в AddThis.
Чуть не забыл самого главного, в какое место шаблона вставлять.
Сохранив предварительно имеющийся шаблон, и установив галочку на Расширить шаблоны виджета.
Ищем это место:
<b:includable id='shareButtons' var='post'>

  <b:if cond='data:top.showEmailButton'>
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if>
 EmailButton, это кнопка с почтовым конвертом, она конечно есть в блоке, но я не стал её удалять, вы же спокойно можете это сделать если захотите.
 Далее удаляем содержимое со всем имеющимся кодом до этого места:


</b:includable>
<b:includable id='threaded_comment_js' var='post'>
И в освободившееся пространство вставляем наш код.
 Жмем на оранжевую кнопку Сохранить шаблон и любуемся новыми кнопками.