Практичные социальные кнопки от share42.com

Любителям размещать кнопки социальных сетей представляю ещё один сервис, который позволяет легко интегрировать довольно симпатичные и практичные кнопки к себе на страницу. Сервис share42 помогает сформировать свой личный набор кнопок из предложенного списка (в настоящий момент 40 социальных сетей и других проектов), а также добавить некоторые функциональные кнопки (добавить в закладки браузера, переместиться в начало страницы и так далее). Довольно интересной особенностью данного скрипта (share42 генерирует скрипт, который вы закачиваете себе на сайт и вставляете в код) является возможность сформировать не только статический горизонтальный блок на странице, но также и создать вертикальный блок, который будет перемещаться по странице по мере прокрутки вниз или вверх.

share41_spisok

Сервис share42 предлагает на выбор 3 размера кнопок 32х32 пикселей, 24х24 пикселей и 16х16 пикселей каждая. Помимо этого в этой менюшке есть ссылки для выделения всех значков одним кликом или инвертирования выделения (те, которые были выделены, станут не выделенными и наоборот).

share41_razmery

Определившись с размером мы должны создать список необходимых нам социальных сервисов + по желанию можем добавить кнопки из раздела «Прочие». Чтобы это сделать мы кликаем по нужным значкам, и они будут выделяться голубой рамкой. Но хочу заметить, что в конечном скрипте значки будут следовать в том порядке, в котором они находятся в этом поле. Поэтому разработчики продумали этот момент и создали возможность перетаскивать значки в нужном нам порядке.

share41_nabor

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

share41_nastroiky

Кодировку сайта ставим UTF-8 (стандартная для wordpress). Ежели у вас вдруг в последующем будут кракозябры, то попробуйте создать скрипт заново, указав кодировку windows. Этот момент может возникнуть, если вы меняли кодировку в настройках вордпреса или же вставляете соц. кнопки в одностраничник или статический сайт. В любом случае я рекомендую вам для всех своих страниц в интернете использовать utf-8, так как этот стандарт символов — универсальный.

Галочку у «добавить иконку сайта share42.com» убираем, если не хотим рекламировать этот сервис. Затем вставляем необходимые настройки для определённых кнопок (если потребуются). Я выбрал кнопку rss-ленты, поэтому меня просят ввести ссылку на мой rss. Что я и сделал.

Что касается вопроса про jQuery, то если вы не уверены, что он у вас на сайте используется, то не ставьте галочку (лучше скрипт закинуть к закрывающему </body>, чтобы конфликтов не вызывать). Если знаете, что он установлен — то смело ставим галочку. Кстати если скрипт после установки не работает, то с высокой долей вероятности можно сказать, что у вас не подключена к странице библиотека jQuery, и вы поставили галочку. Решение — создать скрипт заново.

После того, как я поставил галочку, что библиотека jQuery у меня подключена к странице (я её сам вставлял в код, так как пользуюсь её функционалом, и она автоматически вставлена на всех страницах у меня на блоге), стала доступной галочка «Показывать счетчики публикаций». Включив её, в последующем при наведении на некоторые кнопки скрипта соц. кнопок будут всплывать подсказки с числом, показывающим количество нажатий по кнопке.

После всех наших настроек мы можем нажать на одну из двух больших кнопок ниже.

share41_knopki

Если мы хотим посмотреть, как будет выглядеть наш скрипт после установки то жмём на первую. При этом откроется новое окно, где можно увидеть нашу работу в действии. Вдоволь насмотревшись и сделав все необходимые корректировки по предыдущим пунктам, мы с гордостью жмём кнопку «скачайте готовый скрипт». После нажатия на кнопку должен скачаться готовый скрипт к вам на компьютер. Называется он share42. В нем лежит одноименная папка, которую нужно будет загрузить на ваш хостинг.

share41_arhiv

Загружаем на хостинг не сам архив, а папку, которая в нем. Для этого нужно его разархивировать и затем уже папку закачивать на сервер.

После закачки папки на хостинг переходим к разделу 4, который отвечает за интеграцию кода скрипта в нашу страницу или наш блог.

share42_ustanovka

Первые 2 пункта мы уже успешно выполнили, поэтому можем приступить к пункту 3, который позволяет нам проверить, правильно ли мы загрузили папку на наш хостинг. Для этого указываем в поле для ссылки адрес вашего сайта (в моем случае https://mywpnote.ru/) и затем добавляем имя папки (если не переименовывали, то share42/). Для моего блога я получаю вот такую ссылку: https://mywpnote.ru/share42/

share42_ustanovka_proverka

После того, как я вставил в поле свою ссылку, снизу появилась красная надпись + ссылка, щёлкнув по которой, мы можем проверить, правильно ли мы заполнили это поле. Если после щелчка открылось новое окно с кучей непонятного кода, то вы все сделали правильно.

share42_ustanovka_proverka1

В пункте 4 выбираем тип сайта, куда будем вставлять код. Я вставляю к себе на вордпрес, поэтому выбираю соответствующий пункт.

Пункт 5 нам даёт код, который нужно интегрировать к себе на блог. Если хотите чтобы социальные кнопки отображались на всех страницах вашего блога, тогда вставьте этот код в footer.php (через редактор темы) перед закрывающим тегом </body>. Обратите внимание на параметры data-top1="150" и data-top2="20". Значения этих параметров вы можете прочитать, если нажмёте на ссылку «Параметры, которые вы можете указать», которая находится ниже поля с кодом. Если кратко, то они отвечают за первоначальное положение блока и его положение при прокрутке (все относительно верха видимой зоны сайта). Попробуйте поизменять эти числа и вы увидите, о чем я говорю. На остальные параметры можете не обращать внимания.

Что же касается пункта 6, то он не обязательный, однако для красивого отображения блока я рекомендую добавить этот код в конец файла темы style.css (опять же через редактор темы).

На этом установку социальных кнопок от share42.com можно считать законченной. Пример плавающего блока вы можете увидеть слева.

Если у вас возникнут вопросы при установке этого скрипта, то вы можете оставить их в комментариях к статье, и я постараюсь вам помочь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *