28 января 2013

Кнопки соц сетей Share42 на Blogger/Blogspot


Для того, чтобы установить кнопки социальных сетей Share42 на Blogger/Blogspot, перейдем на сайт сервиса http://share42.com/ru и выберем необходимый размер кнопок, предоставляется выбор из трёх вариантов 32x32 24x24 16x16. Социальные кнопки Share42 имеют красивый вид, на выбор до 46 различных кнопок, скрипт социальных кнопок написан известным блоггером Dimox. На сервисе есть возможность выбрать, как вертикальное так и горизонтальное расположение кнопок, в этой статье я опишу способ горизонтального расположения соц кнопок Share42 на Blogger/Blogspot.

Выбор необходимых кнопок производится кликом, а с помощью drag and drop‎ можно выставить кнопки в нужной последовательности. Пункт "Выберите наиболее подходящий тип сайта:" оставляем по умолчанию "Любой сайт". Если не хотите, чтобы в наборе отображалась кнопка сервиса, снимите галочку с пункта "Добавить иконку сайта Share42.com".


Когда выбор сделан можно нажать "Просмотрите, как это будут выглядеть" и вы увидите, как всё получилось, после этого нажмите "скачайте готовый скрипт".



Следующий шаг, нужно закачать скрипт и картинку (которые вы видите в скачанном и распакованном архиве) на сервер. Платформа Blogger/Blogspot не предоставляет возможность закачивать файлы на свой сервер, поэтому воспользуемся сторонним сервером. Для того, чтобы закачать и использовать скрипт, нам лучше всего подойдут услуги бесплатного хостинга Google Code, а картинку зальём на Веб альбом Пикаса.

Примечание*
В скрипте кнопок Share42 для описания действия (например когда наводите стрелку на кнопку должно появиться: "Поделиться в Facebook", "Поделиться в Google+" и т.п.) используется кириллица. Поэтому если не редактировать кодировку скрипта, вместо русских букв, будут неясные знаки. Чтобы это исправить используйте программу Notepad++ или откройте файл скрипта в обычном блакное, найдите код:

title=

и замените все русские названия английскими буквами.

После того, как ссылки на скрипт и картинку получены, разместим код сервиса share42 в шаблон своего блога на Blogger/Blogspot, перед этим на случай ошибки сделайте его резервную копию.

Заходим в настройки шаблона , изменить HTML код, ставим галочку Расширить шаблоны виджета, сочетанием клавиш Ctrl+F выводим поиск и находим следующий код:

<div class='post-footer-line post-footer-line-3'/>

или эти в зависимости где вы хотите видеть соц кнопки :

<div class='post-footer-line post-footer-line-1'/>

и

<div class='post-footer-line post-footer-line-2'/>

Сразу после него ниже вставляем наш код, кнопки социальных сетей share42.
У меня он выгладит так ( можете этот готовый код использовать для своего блога):

<!-- share42 -->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<div class='share42init' data-path='http://lh5.googleusercontent.com/-S5_ecyBpsyk/UQZIEsfQZ2I/AAAAAAAACeI/_5fKhDrTpjM/s224/icons.png'/>
<script src='http://slivsol-pc-user.googlecode.com/files/share42.js' type='text/javascript'/>
<!-- remove --></b:if>
<!-- share42 End -->

Замените ссылки выделенные красным на свои. Первая ссылка на картинку, вторая на скрипт.

Если хотите, чтобы кнопки соц.сетей share42 отображались не только в конце каждой статьи, но и на главной странице, удалите из вышеприведённого кода две строчки:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
и
<!-- remove --></b:if>

Чтобы дать блоку с кнопками share42 к примеру такое название: "Поделиться статьёй", для этого впишите своё название выше, ниже или вместо строчки вертикального пробела:

<br/>

Также, для оформления панели вы можете добавить код стилей css.
Найдите строку:

]]></b:skin>

И над ней вставьте этот код:

#share42 {display: inline-block; padding: 6px 0 0 6px; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}
#share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

В этом коде вы можете изменить цвет и ширину бордюра.
После успешных действий сохраните шаблон Blogger/Blogspot с кодом кнопок соц сетей Share42.

1 комментарий:

  1. Спасибо...опубликуйте пожалуйста как установить для Blogspot вертикальные плавающие..от сервиса share42

    ОтветитьУдалить