Blogger: настройка блока "Поделиться" от Яндекс

Встроенные в Blogger кнопки "поделиться" не очень удобны: там представлен довольно ограниченный набор соц. сетей, да и сложно заставить их находиться там, где нужно (мне в итоге это не удалось в полной степени). К счастью, Яндекс предлагает свой настраиваемый блок "Поделиться". Проблемы начинаются, если хочется разместить кнопки не только на странице поста, но и на главной под каждым постом в списке, причем так, чтобы при нажатии на кнопку использовалась ссылка именно на пост, а не на страницу, на которой эта кнопка размещена. Для этого нужно использовать дополнительные настройки блока (полный список найтроек можно найти в документации).
Для начала вставим блок в шаблон блога. Для этого надо: зайти в Blogger, выбрать свой блог и перейти в Template->Edit HTML. Найти конец блока head (для этого можно просто выполнить поиск по странице выражения </head>), и вставить перед стокой </head> фрагмент кода, подключающий необходимый javascript:

<!-- Yandex share -->
<script charset='utf-8' src='//yastatic.net/es5-shims/0.0.2/es5-shims.min.js' type='text/javascript'/>
<script charset='utf-8' src='//yastatic.net/share2/share.js' type='text/javascript'/>

Затем нужно найти место, где кнопки должны располагаться. Чтобы поместить их туда же, где они расположены у меня (то есть после меток поста), можно там же выполнить поиск по строке post-labels.  На данный момент метки располагаются в блоке span, поэтому ищем конец блока (закрывающий тег </span>), и после него вставляем наш блок, сгенерированный Яндексом (ссыка на генератор еще раз).

<div class="ya-share2" data-services="vkontakte,facebook,gplus,twitter,linkedin"></div>

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

• data-description
• data-image
• data-title
• data-url

соответствующие значения, которые предоставляет движок Blogger:

• data:post.snippet
• data:post.thumbnailUrl
• data:post.title
• data:post.url

Результирующий html-код у меня получился таким:

<div id='sharethis'>
    <div class='ya-share2' data-services='vkontakte,facebook,twitter,blogger,linkedin' expr:data-description='data:post.snippet' expr:data-image='data:post.thumbnailUrl' expr:data-title='data:post.title' expr:data-url='data:post.url'/>
</div>

Я обернул блок дополнительным div c id sharethis, чтобы было легче настроить его поведение на странице.
В моем случае блок оказался слишком близко к предшествующему ему блоку с метками и при этом имел дополнительный отступ. Эту и подобные проблемы легко поправить с помощью CSS: идем в Template->Customize->Advanced->Add CSS (в самом низу списка) и добавляем стили для ранее добавленного блока (в моем случае он имеет id sharethis), например:

#sharethis {
    margin-left: -15px;
    margin-top: 10px;
}