Share42 — «плавающие» кнопки социальных сетей для сайта

Здравствуйте уважаемые читатели, посетители и просто друзья блога Spectr-rv.ru. Сегодня мы вернемся к теме внутренней оптимизации сайта.  Из данной статьи вы узнаете, как установить на свой сайт «плавающие» кнопки социальных сетей  Share42.

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

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

О сайте Share42.com

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

К достоинствам скрипта можно отнести простоту установки, маленький размер, красивый вид устанавливаемых иконок и возможность их выбора. Скрипт универсален, то есть он может работать на всех типах сайтов с FTP-доступом.

Сервис полностью русскоязычный, с подробным описанием каждого этапа установки. В данном случае, основным критерием выбора сервиса Share42.com явилось то, что он позволяет наиболее просто установить «плавающие» кнопки на блог. На первый взгляд, процесс установки может показаться довольно сложным для начинающих пользователей, однако, если строго следовать всем указаниям, установить кнопки сможет даже новичок.

Установка социальных кнопок

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

1. Выбираем  нужный размер иконок и определяемся с их перечнем.

Выберите подходящий вам размер иконок, нажав одну из трех кнопок с указанием возможных  размеров.

В таблице «Социальные сервисы:» выберите сервисы, иконки которые вы хотели бы видеть на своем сайте, щелкая по ним мышкой. Перетаскивая отобранные кнопки мышкой, установите их в нужном вам порядке.

Щелкните по надписи «Сохранить конфигурацию», придумайте название получившейся комбинации иконок и нажмите кнопку «Сохранить».

2. Выбираем нужные опции.

Установите настройки, отмеченные на рисунке.

3. Оцениваем свой выбор и скачиваем сгенерированный скрипт.

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

Скачайте созданный сервисом скрипт на свой компьютер, нажав кнопку «Скачайте готовый скрипт».

4. Устанавливаем скрипт на свой сайт.

Распакуйте сохраненный архив и загрузите папку со скриптом по FTP в корневой каталог своего сайта на хостинге (как правило, это папка public_html). Обратите внимание, что папка, после распаковки из архива, может получиться как бы двойной. На сервер нужно загружать только внутреннюю папку, в противном случае скрипт работать не будет.  Для загрузки папки со скриптом на сервер можно использовать FTP-клиент FileZilla.

Напоминаю. Перед любым редактированием сайта, обязательно сделайте его бэкап. Это поможет свести к минимуму возможные последствия ваших неправильных действий.

Укажите путь до установленной папки в предназначенном для этого окошке, а затем проверьте правильность записи, щелкнув по расположенной ниже ссылке. Если вы увидите малопонятный набор буковок и циферок (содержимое скрипта), следовательно, путь к папке указан правильно.

Укажите тип вашего сайта.

Скопируйте сгенерированный код и вставьте его в шаблон сайта  (в файл статей single.php, расположенный по адресу: public_html/wp-content/themes/название вашей темы/). Сделать это можно через FTP-соединение на сервере вашего хостинга или в админпанели блога.

Если вам удобнее использовать админпанель, откройте ее и перейдите на вкладку «Внешний вид» - «Редактор». В правой колонке страницы  «Редактировать темы» выберите файл «Одна запись (single.php)».

Код нужно вставить в начало файла, например, впереди или сразу после строчки похожей на следующую:  <?php if (have_posts()) : ?>. Посмотрите, куда я вставил  код на своем блоге.

Наиболее подходящее место для вставки кода определяется особенностями используемого вами шаблона и, возможно, вам придется его подобрать.

После вставки кода, нажмите кнопку «Обновить файл». Перейдите на сайт и убедитесь, что кнопки установились. Если панели социальных кнопок не видно, значит, вы где-то допустили ошибку.

5. Позиционируем панель социальных кнопок.

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

Рассмотрим более подробно код, установленный на сайт.

Используемые здесь параметры отвечают за следующие показатели:

data-top1 – расстояние между началом страницы и кнопочной панелью, (пх);

data-top2 – расстояние между верхней границей видимой области страницы и кнопочной панелью, (пх);

data-margin – смещение кнопочной панели по горизонтали («минус» - влево, «плюс» - вправо), (пх).

Изменяя значения данных параметров, вставленного в файл single.php кода, подберите оптимальное положение панели социальных кнопок относительно области контента. Редактировать файл можно как на сервере (описано здесь), так и в административной панели сайта.

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

Вот и все, что я хотел рассказать про «плавающие» кнопки социальных сетей  Share42. Спасибо за внимание. Удачи!

С уважением, Владимир (Spectr-rv.ru).