Новое в блоге
Loading...
27 дек. 2011 г.

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

Привет всем! 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 "статический сайт" и получим вот такие ссылки:
<script type="text/javascript" src="http://site.ru/share42/share42.js"></script>
<script type="text/javascript">share42('http://site.ru/share42/')</script>

Где заменяем выделенным синим на URL адрес: путь к вашим загруженным на хостинг файлам.
Первая строчка: адрес  URL скрипта;
Вторая строчка: адрес  URL изображение кнопок.

Теперь переходим к установке социальных кнопок непосредственно в сам блог
Для вертикальных кнопок социальных сетей: перейти Дизайн --Добавить гаджет HTML/Javascript и в его поле вставьте ваш готовый скрипт. Можно также другим способом. Вставить сам скрипт в тело шаблона. Найдите строчку </body> и перед ним вставьте свой скрипт.

Установка горизонтальных кнопок соц.сетей после каждого сообщения:
В шаблоне найдите такую строчку <data:post.body/> и вставить после него следующий код:
<b:if cond='data:blog.pageType == "item"'>
Здесь ваш готовый скрипт
</b:if>

Далее для оформления панели Вы можете добавить стили 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}

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

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

29 коммент. :

  1. Прошу помощи! Все сделала по Вашей инструкции, файл иконок и скрипт залила на Яндекс Народ, скрипт вставила, НО ничего на блоге не видно.
    Скажите, что не так???
    Спасибо!

    ОтветитьУдалить
  2. Яндекс народ для этого не годится.Самый лучший для этого хостинг 
    http://new-school-blogger.blogspot.com/2011/11/hosting-dlja-fajlov-i.html
    Очень удобный.Спрашивайте если будет что то не понятно,буду рад помочь.

    ОтветитьУдалить
  3. Прочитала весь сайт, но программа на английском, а я в нем ...:))), у меня просто не получится с ней работать. Я начинающая :) Bloggersha:))) и поэтому, может что подскажете на русском языке.
    Спасибо!

    ОтветитьУдалить
  4. На русском я пока не могу подсказать.А может Вас устроит другие кнопки например 
    http://new-school-blogger.blogspot.com/2011/12/ustanovka-socialnyh-knopok-s-servisom.html или 
    http://new-school-blogger.blogspot.com/2011/12/knopki-socialnyh-setej-ot-servisa.html хотя мне больше по душе Share42 я здесь буду менять кнопки.Если Вы подождёте я опишу всё в картинках,дополнение к статье.А пока может здесь разберётесь 
    http://new-school-blogger.blogspot.com/2012/01/google-code-hosting-dlja-fajlov.html

    ОтветитьУдалить
  5. На русском я пока не могу подсказать.А может Вас устроит другие кнопки например 
    http://new-school-blogger.blogspot.com/2011/12/ustanovka-socialnyh-knopok-s-servisom.html или 
    http://new-school-blogger.blogspot.com/2011/12/knopki-socialnyh-setej-ot-servisa.html хотя мне больше по душе Share42 я здесь буду менять кнопки.Если Вы подождёте я опишу всё в картинках,дополнение к статье.А пока может здесь разберётесь 
    http://new-school-blogger.blogspot.com/2012/01/google-code-hosting-dlja-fajlov.html

    ОтветитьУдалить
  6. Спасибо большое Сергей! Буду изучать:)
    Но еще один вопрос. http://new-school-blogger.blog.
    - это бесплатно ? Много читала там про создание персональных страниц, но так и не поняла бесплатное создание или нужно плаить за содержание этих персстраниц.
    Спасибо!

    ОтветитьУдалить
  7. Я Вас не понял.Вы какие имеете ввиду пер.страницы?

    ОтветитьУдалить
  8. Подскажите пожалуйста, вот не могу разобраться, как сделать похожую надпись над кнопками как у вас
    "Ух ты! Кнопочки! Понравилась статья? Поделитесь с друзьями:" 
    ??

    ОтветитьУдалить
  9. все сделал как написано - кнопок нет, подождал пол часа ... все равно нет.
    Что не так ?

    ОтветитьУдалить
  10. извиняюсь, все получилось , то я в шаблоне у себя напартачил ...
    все исправил работает чудесно

    ОтветитьУдалить
  11. Рад за Вас,что получилось.

    ОтветитьУдалить
  12. У меня в шаблоне нет . Подскажите что делать.

    ОтветитьУдалить
  13. Вы попробуйте поставить галочку  "Расширить шаблоны виджета" должна быть такая строчка.

    ОтветитьУдалить
  14. а как прописать ,если сайт не на готовом шаблоне 

    ОтветитьУдалить
  15. Что-то никак у меня не пойдет... вроде бы ж ничего сложного, но... думал может конфликтует с jQuery... так нет вставил Ваш код (с Вашего DropBox-а) - все круто, все показывает. Вставляю свой - фиг. Вы папку Public в DropBox-е никак там не настраивали, ничего с ней не делали?

    ОтветитьУдалить
  16. Нет не настраивал.А чего именно не показывает?

    ОтветитьУдалить
  17. Вообще ничего, я вставил так как и у Вас перед этим текст (типа "Ух ты! Кноп...") - текст есть, а кнопочек нету.
    Вот код который я вставил:


    Сподобалась стаття? Поділіться з друзями:
           

    ОтветитьУдалить
  18. Только что посмотрел на Ваш код и на тот код который оно мне сгенерило - вот объявление функции в Вашем варианте: function share42(f,u,t), а вот в новом: function share42(f), причем в моем варианте переменные u и t тоже используются, хотя и не объявляются :)

    ОтветитьУдалить
  19. Всё таки Вы молодец.Добились своего.Я раньше иногда тоже с чем нибудь мучился,но добивался результата.

    ОтветитьУдалить
  20. увидел у вас кнопочки снизу каждого поста а вы откуда их взяли?) а то мне те не нра вообще

    ОтветитьУдалить
  21. О_О а почему например в твиттер изображение другое? у меня не такие кнопки

    ОтветитьУдалить
  22. и еще простите, а можно ли эти кнопки как нибудь залить на blogger ? спасибо))

    ОтветитьУдалить
  23. Дайте посмотреть.Ссылку на блог.

    ОтветитьУдалить
  24. Конечно.Ведь у меня блог на блоггер.

    ОтветитьУдалить
  25. Ну вроде бы все просто, делаю как сказано и ничего не добавляется. Подскажите что делать

    ОтветитьУдалить
  26. ЧИТАТЬ,ДЕЛАТЬ ВНИМАТЕЛЬНО И ДОЛЖНО ПОЛУЧИТЬСЯ.

    ОтветитьУдалить
  27. Не как не выходит (((. 
    Вот код, что не так делаю?
    share42('https://www.dropbox.com/s/kzbvsg3ap0qteh1/icons.png')

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

 
Footer