Авторизация:
Имя:

Пароль:

Поиск по сайту:

Помощник Blogger -а: Создание и настройка блога на платформе Blogger (Blogspot) и его продвижение. Подробные инструкции и описание работы с Блоггером

Последнее на сайте:

Подписка на новости

Введите Ваш email:


Разделы:

рейтинг статьи: 5/5; голосов: 4; комментариев: 1

Главная > Создание сайта > Share42 – онлайн конструктор кнопок соцсетей. Описание, настройка скрипта и добавление на сайт

22.01.2017

Share42 – онлайн конструктор кнопок соцсетей. Описание, настройка скрипта и добавление на сайт

Здравствуйте дорогие читатели сайта. Ранее мы рассматривали что такое кнопки социальных сетей и как добавить их на сайт. Это были кнопочки официальных соцсетей и поисковых систем. Сегодня же поговорим о сторонних сервисах, которые позволяют устанавливать подобные share buttons. Речь пойдет о сервисе Share42, позволяющий разместить на своем ресурсе красивые и функциональные социальные кнопки и закладки.

онлайн конструктор кнопок share42.com

Share42.com – это онлайн конструктор кнопок всех популярных социальных сетей и закладок. Он дает возможность добавлять панель кнопок двух видов: классическая горизонтальная панель, которую можно разместить как в футере сайта, в конце статьи или сайдбаре, и плавающая панель кнопок – размещается сбоку страницы и не навязчиво преследует пользователя. Плавающая панель обладает рядом достоинств по сравнению с классической панелью, о которых мы поговорим ниже.

 

В чем изюминка конструктора кнопок Share42

Основной особенностью этого сервиса является возможность установки на сайт не только классической горизонтальной панели, но и плавающей. Она, в отличие от классической панели, будет прокручиваться вместе со страницей. То есть, пользователь может в любое время, в любом месте текста видеть ее и пользоваться ей.

Представьте себе такой случай. Если у вас большая статья или полноценный обзор, и ваши кнопки соцсетей размещены в конце этой страницы или в начале, то какой шанс, что пользователь сможете ими воспользоваться? Согласитесь, ведь не всегда посетители дочитывают до конца большие статьи, а у вас кнопки расшаривания в конце. Или наоборот, посетитель дочитал до конца большой обзор и ему будет лень возвращаться в начала текста, чтобы воспользоваться социальными кнопками.

Вот в таких случаях на помощь приходит плавающая панель кнопок соцсетей, которую предлагает сервис Share42. Она всегда будет на видном месте, на глазах у посетителя вашего сайта и он в любое время сможет ей воспользоваться.

 

Достоинства и недостатки панели иконок

Достоинства

  1. Можно добавлять в панель иконки всех популярных (и не очень) социальных сетей и закладок. Выбирать размер иконок, на выбор предложено три варианта
  2. достоинства панели share42

  3. Как и в любом конструкторе, вы можете самостоятельно настраивать внешний вид. Удалять, добавлять иконки, менять их местами, то есть, выбирать какие, и  в какой последовательности кнопки будут отображаться на вашей панели
  4. Установив скрипт иконок, вы не добавляете на сайт лишние исходящие ссылки выбранных сетей. Так как все выводится при помощи одного Java скрипта
  5. Скрипт не замедлит скорость сайта. Так как не будет происходить дополнительных загрузок со сторонних ресурсов, все нужные файлы (сам скрипт и файл с иконками) будут размещены на вашем сервере
  6. Все иконки выполнены в виде одного спрайта. Что исключает дополнительные обращения клиента (браузера) к серверу при загрузке панели. В независимости от количества выбранных вами соцсетей в панели, ваш браузер обратиться только один раз к серверу при ее загрузке
  7. Универсальность. Можно установить на сайт с любой CMS, или с чистым HTML кодом
  8. типы сайтов поддерживаемых конструктором кнопок share42

  9. При всей своей навязчивости плавающей панели иконок она будет засвечена, чтобы меньше мусолить глаза посетителю. Только при наведении на нее она приобретет цвета

Недостатки

  1. Обладание начальными знаниями HTML. Но это не критический минус, прочитав этот обзор, вы сможете запросто установить у себя на сайте панель кнопок сервиса Share42.com
  2. Уметь разбираться в устройстве вашей CMS (если вы таковой пользуетесь)
  3. Плавающая панель не работает в старых браузерах (Opera 12.18)

 

Настройка и установка на сайт панели Share42

Как говорилось выше этот сервис настоящий конструктор кнопок соцсетей и закладок. Поэтому настройка панели должна быть простой. Рассмотрим этот процесс детально.

Первым делом выбираем размер иконок, их последовательность в панели и какие кнопки соцсетей должны быть в ней. Выбор картинок происходит посредством выделения желаемых. А последовательность расположения в панели – перетягиванием нужной вам.

выбираем иконки, которые должны быть на панели кнопок share42.com

Вторым этапом в конструкторе Share42 является настройка внешнего вида

настройка блока кнопок онлайн конструктора share42

Здесь мы видим:

  1. Тип панели. Вы можете выбирать какой блок кнопок желаете горизонтальный (классический) или вертикальный (плавающий)
  2. Ограничить количество кнопок. Этот пункт будет активен в случае выбора вертикального типа отображения блока. Он ограничивает видимость кнопок на вашей панели. Если число картинок больше указанного вами, то остальные будут скрыты
  3. Кодировка. Выбираете в какой кодировке написан ваш сайт. Если не верно указать ее, то панель может не корректно отображаться
  4. В следующем пункте вы можете поставить галочку, если хотите видеть в вашем блоке картинку сайта Share42.com
  5. Ссылка на RSS. Здесь указываете адрес вашей рассылки. Она будет работать, если у вас в панели будет кнопка RSS рассылки
  6. Следующим пунктом подтверждается, что сайт подключен к jQuery. Это необходимо для публикации счетчиков расшариваний
  7. Далее, будут ли показываться счетчики. Это зависит от предыдущего пункта настройки

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

Теперь переходим к процессу установки панели Share42 на сайт. Рассмотрим установку на простой сайт с HTML.

Для начала скачиваем архив, сгенерированный конструктором. Распаковываем его и видим папку /share42/, а в ней 2 файла:

  1. icons.png – файл картинок
  2. share42.js – непосредственно скрипт блока иконок

Помещаем папку в корень вашего сайта на сервере. Далее заполняем поля формы установки панели картинок

установка панели кнопок share42 на сайт

В поле «Укажите путь до этой папки» указываем путь к распакованной папке /share42/ (как показано на скриншоте вверху). Указав путь, ниже появится ссылка на файл java, находящийся в папке, для проверки правильности указания URL.

Если проверка была успешной, тогда выбираем тип сайта, на который устанавливается блок кнопок. В моем случае выбрано «Любой сайт», так как я пишу на HTML без поддержки каких либо CMS. Если у вас не так, то указывайте свою оболочку сайта.

Ниже будет представлен сгенерированный сервисом код HTML, который нужно установить в том месте, где вы бы хотели видеть панель иконок соцсетей.

Если вы в конструкторе выбрали вертикальную (плавающую) панель, ваш сгенерированный код будет выглядеть вот так:

код вертикальной плавающей панели кнопок share42

Как видите, в коде появились новые параметры. Давайте их рассмотрим подробнее.

  1. data-top1 – это расстояние до верхнего края панели от начала страницы
  2. data-top2 – это расстояние от верхнего края экрана до панели
  3. data-margin – смещение панели по горизонтали. Если значение отрицательное, то смещение влево, если положительное, то вправо

Для наглядности вышеописанные параметры будут изображены на скриншоте ниже:

как настроить плавающую панель share42

 

как настроить плавающую панель share42

Дополнительные параметры можно указать и для классической горизонтальной панели. Они спрятаны в выпадающем окне «Параметры, которые вы можете указать»:

дополнительные параметры настройки блока кнопок share42

В этой таблице указаны дополнительные параметры настройки, их описание и как правильно их применять.

Как видите, онлайн конструктор кнопок Share42.com очень прост в использовании. Как настройка блока картинок, так и установка кода этого блока на сайт не должна у вас вызвать затруднений.

Автор этого скрипта поистине достоин оваций. У него (скрипта) нет заметных недостатков, он полностью интуитивно настраиваемый и до примитивности понятный. Если вы согласны, то можете отблагодарить автора, перейдя на вкладку «Поблагодарить автора» вверху страницы сервиса.

Всем удачи и до скорых встреч на страницах моего сайта!!!

 

Статьи по теме:

842

Оцените статью:

1 2 3 4 5
рейтинг: 5/5; голосов: 4

Зарегистрируйтесь или войдите под своим именем чтобы оставить комментарий
eun
2017-02-06 05:59 #1

Важное дополнение к статье: указав путь к папке share42, следует в этом окошке нажать ввод, чтобы появилась ссылка для проверки правильности URL. К недостаткам сервиса, также следует отнести неработоспособность кода через js сайта, на который он устанавливается. Предлагается также к выбору иконка сервиса, канувшего в лету - delicious.