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

Социальные кнопки от Share42 на BloggerПродолжая раскрывать все еще актуальную тему о том как разместить в 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>
Вот и все, наслаждаемся отличными кнопками и нормальным кодом шаблона. Удачи.

10 комментариев:

  1. Анонимный11.12.2012, 23:10

    Попробовал,да все так кнопки стоят, вот одна деталь у кнопок при наведении абракадабра выползает,нельзя ли, как нить ее заменить на фразы рекомендовать туда то, и как нить под фон затемнить ото пестрые они, а так все работает перенаправляет на комент, что очень приятно спасиб

    ОтветитьУдалить
    Ответы
    1. Чтобы не было аброкадабры, нужно файл самого скрипта открыть в текстовом редакторе NotePad++ - любом где можно изменить кодировку документа, и точно указать кодировку UTF-8 (без BOM) - у меня тоже такое было, просто упустил как-то при написании, там же и поменяете надписи, которые появляются. Если нет редактора можете качнуть здесь
      http://www.magentawave.com/2012/03/notepad-598-portable.html
      Чтобы поменять иконки переделайте картинку спрайта на те, которые вам нравятся. Все в ваших руках.

      Удалить
    2. Анонимный15.12.2012, 22:58

      Перевел в NotePad++, но там над обратно в формат вернуть ото его не принимают обратно измененного опять. А так все правильно в это проге наглядно видно, как меняется кодировка помучился малость но всеж, у остальных не такой набор иконок, щас по русски написано что куда спасиб за подсказку) еще думаю как их бы вот затенить а светились чтоб по наведению,слышал где то было там отдельный кусок скрипта,было б здоровски щас эту тему делаю)
      Еще раз Спасибо) все вышло)

      Удалить
    3. Я когда себе делал, то ничего не возвращал, но мало ли... Главное что у вас все получилось. А затемнение и осветление при наведении можно сделать при помощи свойства box-shadow указав в параметрах тени что она должна быть внутри - inset, ну и подобрать нужные размеры размытия. Плюс вы можете сделать любой цвет, не только серый.

      Удалить
    4. Спасибо большое. У Вас замечательный сайт))) все с первого раза получилось абракодабры исчезли))) кодировку файла я тоже назад не меняла только имя изменила и залила опять на серв гугл.

      Удалить
  2. Большое спасибо. Со сменой хостинга долго думал по этому поводу - ничего не получалось. Про Picasa почему-то и в голову не приходило!

    ОтветитьУдалить
    Ответы
    1. Я уж и сам не помню как допер :) Это был тот самый популярный метод - метод научного тыка.

      Удалить
    2. Отлично! Теперь все работает как часы. Здесь же с иконками тоже реально перекат при наведении реально реализовать?

      Удалить
    3. Думаю да, но я не пробовал.

      Удалить
  3. а если еще вот так сделать то шара отдельных постов будет доступна непосредственно с главной
    http://f5.s.qip.ru/aN0HtOf1.png

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

Следующее Предыдущее

BestProject