Скрипт кнопок социальных сетей Share42

By zagulyaevsv на 27.12.2011 

http://new-school-blogger.blogspot.com/2011/12/skript-knopok-socialnyh-setej-share42.html 

Привет всем! Share42.com - это бесплатный сервис, генерирующий скрипт, который позволяет посетителям вашего блога публиковать ссылки на ваши статьи в социальные медиа (закладки, социальные сети). Преимущества данного сервиса перед другими конкурентами ОЧЕВИДНЫ:• – Красивые иконки.Все иконки выполнены в едином стиле и выглядят очень красиво;
• – Маленький размер.Код скрипта максимально оптимизирован. К тому же он кэшируется браузером, что позволяет ускорить его повторную загрузку;
• – Простота установки.Скачали скрипт, загрузили на хостинг, подключили к блогу;
• – Никаких лишних ссылок.Все ссылки выводятся с помощью JavaScript, поэтому при установке скрипта количество внешних ссылок на вашем сайте не увеличится;
• – Никакого лишнего HTML-кода.И шаблон сайта добавляется всего одна строка кода, а весь HTML-код кнопок формируется с помощью JavaScript;
• – Без обращений к сторонним сайтам.Нередки ситуации, когда сайт открывается долго из-за того, что скрипт подключается с другого сайта. Установка скрипта на свой сайт позволит этого избежать;
• – Можно подключить почти к любому сайту.Скрипт универсален, будет работать на сайте любого типа, у которого есть FTP-доступ;
• – Используется всего одно изображение (спрайт).Это позволяет снизить количество обращений к серверу, на котором находится ваш сайт;
• – Вы сами выбираете иконки социальных сервисов, которые будут отображаться на вашем сайте.
Создание и установка кнопок социальных сетей Share42 
Заходим на сайт share42.com и видим большое разнообразие кнопок социальных сетей:

Сервис  Share42:  кнопок социальных сетей 

Здесь нам надо опредилиться с выбором кнопок и выбрать те сервисы, которые Вы хотите видеть в своём блоге.Отмечаете нужные кнопки: вконтакте, одноклассники, twitter,Blogger и так далее.Обратите внимание на то,что кнопки можно перетаскивать мышью, раставляя их в нужном Вам порядке.Дальше выбираем размер иконок для вашего блога,это могут быть: 16х16, 24х24 или 32х32 пикселя. Потом выбираем какая у Вас будет панель кнопок: горизонтальной (будет располагаться под каждым постом блога)  или вертикальной (будет фиксированно висеть сбоку страницы).Выбираем кодировку: UTF-8.Далее Вы можете или просмотреть, как будет выглядеть ваши кнопки в итоге нажав на "Посмотрите, как это будет выглядеть" или нажать скачайте готовый скрипт и тем самым загрузить на свой жёсткий диск архив с вашим скриптом.
 Распаковываете,внутри архива, два файла: скрипт и картинка с вашими кнопками.Переходим во вкладку Установка и дальше действуем по инструкции:

Переходим во вкладку Установка

Загрузите папку “share42” на ваш хостинг (при желании папку можно переименовать).Я лично для этого ипользую надёжный,бесплатный,с хорошей пропускной способностью  хостинг Dropbox.Об этом читайте здесь.
Далее в 4-ом пункте требуется выбрать для Blogger "статический сайт" и получим вот такие ссылки:

Где заменяем выделенным синим на URL адрес: путь к вашим загруженным на хостинг файлам.
Первая строчка: адрес  URL скрипта;
Вторая строчка: адрес  URL изображение кнопок.
Теперь переходим к установке социальных кнопок непосредственно в сам блог
Для вертикальных кнопок социальных сетей: перейти Дизайн--Добавить гаджет HTML/Javascript
и в его поле вставьте ваш готовый скрипт.Можно также другим способом.Вставить сам скрипт в тело шаблона. Найдите строчку  и перед ним вставьте свой скрипт.
Установка горизонтальных кнопок соц.сетей после каждого сообщения:
В шаблоне найдите такую строчку  и вставить после него следующий код:

Здесь ваш готовый скрипт

Далее для оформления панели Вы можете добавить стили css кнопок (это не обязательно):
Найти строчку ]]> и прямо перед ней вставляем код:

#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}

Всё сохраните шаблон.На этом можно закончить.Желаю удачи.
Смотрите также: Установка социальных кнопок с сервисом AddThis или Социальные плавающие кнопки для Blogger