Кнопки социальных сетей от Share42 на Blogger (Blogspot)

Продолжая раскрывать все еще актуальную тему о том как разместить в Blogger кнопки социальных сетей и какой сервис выбрать, хочу поделиться отличным решением в этом направлении. И как вы уже догадались из заглавной картинки этого поста, речь пойдет о скрипте кнопок социальных сетей от Share42.com и конечно же о том как просто и быстро установить его в свой Blogger блог.
  Сразу скажу, что на данный момент, в этом блоге установлен скрип кнопок именно от Share42. Когда-то давно здесь, в блоге, были установлены обычные HTML кнопки, но от них я благополучно избавился в пользу JavaScript варианта. Объясню почему: самое главное - это довольно громоздкий код этих самых HTML-кнопок в шаблоне, плюс еще и к каждой такой кнопке должно прилагаться отдельное изображение, а это все "вес" шаблона, количество запросов к серверу и соответственно скорость загрузки блога, по-этому - фТопку!
 Почему социальные кнопки именно этого сервиса? То что мне в первую очередь понравилось, что вы получаете архив с исходником скрипта и спрайт-изображением выбранных кнопок, которое очень легко заменить на любое другое. То есть вы не зависите от стороннего сервиса и их серверов, а также свободно можете изменить внешний вид кнопок.
 Ну а теперь, собственно, о том как добавить скрипт кнопок от Share42 на Blogger.
 Первым делом идете на официальный сайт выбираете нужные кнопки - их там аж 41 социальная + 5 прочих (RSS, "Наверх", "Печать", eMail, и "В закладки браузера"), при выборе опций определяетесь с расположением, указываете кодировку UTF8, если подключен jQuery устанавливаете галочку и вперед - жмете на "скачайте готовый скрипт". Готово, теперь открываем архив и видим два файла: первый - скрипт, второй - спрайт-изображение.

Чтобы избежать некорректного отображения текста в всплывающих подсказках у кнопок, необходимо заранее, до загрузки скрипта на свой хостинг, открыть файл через текстовый редактор NotePad++ или любой другой где можно изменить кодировку документа, и точно указать кодировку UTF-8(без BOM)

  У новичков возникает резонный вопрос: "Куда заливать скрипт социальных кнопок для Blogger?". Вполне спокойно, для получения прямой ссылки можно использовать Google Drive.
 На сайте есть два варианта кода для разного расположения:
1. Горизонтальное

<div class="share42init"></div>
<script type="text/javascript" src=".../share42.js"></script>

2. Вертикальное

<div class="share42init" data-top1="150" data-top2="20" data-margin="0"></div>
<script type="text/javascript" src=".../share42.js"></script>

 Ну тут понятно - там где ".../share42.js" вставляете свою ссылку на скрипт share42.js, которую получили или с Google code или с Google Сайты.
 Но что же делать с изображением, куда загружать его и как его добавить? На сайте есть рекомендации по этому поводу:
Для опытных пользователей
При необходимости вы можете указать произвольный путь к папке с файлом иконок (icons.png). Для этого к тегу div.share42init добавьте параметр data-path, например: data-path="http://site.name/folder/".
 А что мы делаем в Blogger? Конечно воспользуемся данным советом!
 Для начала зальем изображение к себе в "Черновик" или в свой веб-альбом Picasa и получим ссылку типа:

http://3.bp.blogspot.com/длинная абракадабра из цифр и букв/s1600/icons.png

 Берем ссылку и удаляем от туда icons.png, совсем. И остается у нас купированный вариант:

http://3.bp.blogspot.com/длинная абракадабра из цифр и букв/s1600/

 В итоге получаем следующую конструкцию:

<div class='share42init' data-path='http://3.bp.blogspot.com/длинная абракадабра из цифр и букв/s1600/' />
<script src='.../share42.js' type='text/javascript'/>

 Думаю суть ясна. Теперь о том куда все это всунуть в шаблоне. Находим одну из ниже приведенных строчек, предварительно поставив галочку на "Расширить шаблоны виджета" и ниже одной из них устанавливаем свою готовую конструкцию кода.

<div class='post-footer-line post-footer-line-1'> <!--тут сразу всего много -->


<div class='post-footer-line post-footer-line-2'> <!-- тут поменьше но тоже есть -->


<div class='post-footer-line post-footer-line-3'> <!--а вот сюда будет в самый раз -->

Если в шаблоне запись, под которую вы поместили блок скрипта кнопок имеет вид:

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

То её нужно расширить (раскрыть):

<div class='post-footer-line post-footer-line-2'>
<!--тут размещаете блок-->
</div>

Вот и все, наслаждаемся отличными кнопками и нормальным кодом шаблона. Удачи.