Встроенные в Blogger кнопки "поделиться" не очень удобны: там представлен довольно ограниченный набор соц. сетей, да и сложно заставить их находиться там, где нужно (мне в итоге это не удалось в полной степени). К счастью, Яндекс предлагает свой настраиваемый блок "Поделиться". Проблемы начинаются, если хочется разместить кнопки не только на странице поста, но и на главной под каждым постом в списке, причем так, чтобы при нажатии на кнопку использовалась ссылка именно на пост, а не на страницу, на которой эта кнопка размещена. Для этого нужно использовать дополнительные настройки блока (полный список найтроек можно найти в документации).
Для начала вставим блок в шаблон блога. Для этого надо: зайти в Blogger, выбрать свой блог и перейти в Template->Edit HTML. Найти конец блока head (для этого можно просто выполнить поиск по странице выражения </head>), и вставить перед стокой </head> фрагмент кода, подключающий необходимый javascript:
Затем нужно найти место, где кнопки должны располагаться. Чтобы поместить их туда же, где они расположены у меня (то есть после меток поста), можно там же выполнить поиск по строке post-labels. На данный момент метки располагаются в блоке span, поэтому ищем конец блока (закрывающий тег </span>), и после него вставляем наш блок, сгенерированный Яндексом (ссыка на генератор еще раз).
Если оставить его в таком виде, как он был сгенерирован, кнопки будут работать правильно на странице поста, но на главной старнице все кнопки будут ссылаться на главную страницу, а не на страницы соответствующих постов. Чтобы этого не происходило, нужно явным образом задать свойствам блока:
Я обернул блок дополнительным div c id sharethis, чтобы было легче настроить его поведение на странице.
В моем случае блок оказался слишком близко к предшествующему ему блоку с метками и при этом имел дополнительный отступ. Эту и подобные проблемы легко поправить с помощью CSS: идем в Template->Customize->Advanced->Add CSS (в самом низу списка) и добавляем стили для ранее добавленного блока (в моем случае он имеет id sharethis), например:
Для начала вставим блок в шаблон блога. Для этого надо: зайти в Blogger, выбрать свой блог и перейти в Template->Edit HTML. Найти конец блока head (для этого можно просто выполнить поиск по странице выражения </head>), и вставить перед стокой </head> фрагмент кода, подключающий необходимый javascript:
1 2 3 | <!-- 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'/> |
1 | <div class="ya-share2" data-services="vkontakte,facebook,gplus,twitter,linkedin"></div> |
- data-description
- data-image
- data-title
- data-url
- data:post.snippet
- data:post.thumbnailUrl
- data:post.title
- data:post.url
1 2 3 | <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> |
В моем случае блок оказался слишком близко к предшествующему ему блоку с метками и при этом имел дополнительный отступ. Эту и подобные проблемы легко поправить с помощью CSS: идем в Template->Customize->Advanced->Add CSS (в самом низу списка) и добавляем стили для ранее добавленного блока (в моем случае он имеет id sharethis), например:
1 2 3 4 | #sharethis { margin-left: -15px; margin-top: 10px;} |
Комментариев нет :
Отправить комментарий