Кнопки социальных сетей для сайта Share42. Как разместить их на сайт

Здравствуйте уважаемые читатели блога. Сегодня речь пойдёт опять о социальных сетях, а точнее о кнопках социальных сетей. В этой статье я рассказывал о том, как разместить кнопки соц-сетей при помощи плагина.

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

Update: сейчас на сервисе Share42 скрипт видоизменился. А на блог я установил кнопки от другого сервиса. 

Кнопки социальных сетей для сайта

Перейду сразу к делу без лишней воды. Сразу хочу предупредить о том, что эту процедуру установки скрипта кнопок, будет удобнее всего провести при помощи FTP клиента FileZilla и очень удобного и не менее полезного блокнота Notepad++   Поэтому, кто не установил их себе для работы и не научился ими пользоваться, прочитайте эти статьи и сделайте это.

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

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

1. выбрать кнопки, кликая по ним.
2. выбрать опции.
3. посмотреть как они будут выглядеть на вашем сайте.
4. указать путь до папки со скриптом (адрес вашего сайта).
5. указать тип движка сайта.
6. скачать архив сгенерированного скрипта на свой компьютер.
7. распаковать архив и загрузить папку на хостинг.
8. вставить сгенерированный код в файл single.php.
9. вставить специальный код в файл style.css.

А теперь разберём всё по порядку:

1) Нужно сначала определиться с размером кнопок. Я выбрал 32х32. И потом нажимая на кнопки (при нажатии-выделяется, при повторном нажатии выделение снимается), выбрать те, которые вы собираетесь поставить на свой сайт.

Кнопки можно перетаскивать. Почему их нужно правильно скомпоновать? Потому что, в каком порядке вы их составите слева-направо, в такой последовательности они и будут у вас отображаться на сайте. Я выбрал вертикальную панель, поэтому сверху у меня топовые и знакомые мне социальные сети — ВКонтакте, Фейсбук, Мой Мир, Твиттер, Однокласники и Гугл+, а при нажатии на маленький треугольник внизу панельки, — выплывают остальные 7 кнопок…

Вообще всего на этом сервисе 45 кнопок, из которых есть 5 Прочих:

Я выбрал 14 кнопок, в которых есть и соц-закладки и кнопка подписки по RSS. А ещё добавил кнопку Вверх, тем самым немного разгрузив свой блог, отключив плагин Scroll To Top

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

•  Выберите Тип панели. Сразу предупреждаю, что горизонтальную будет проще установить, но мне понравилась плавающая.
• Ограничить видимое кол-во кнопок. Если бы я не поставил тут галочку и не выбрал бы количество, то у меня панелька была бы очень длинной и естественно не эстетичной. Ну зачем делать такой паровоз? Вы можете ограничить до 4-5 кнопок, а остальные будут выплывать при нажатии на стрелочку.
• Кодировка в  WordPress — UTF-8.
• Язык подсказок естественно русский.
• Я не добавлял иконку Шаре.
• Если вы выбрали в панель кнопку RSS, то тут вам нужно вставить адрес вашей RSS ленты. Как узнать адрес вашей ленты — читайте тут.
• Я не знаю что такое Кверри, поэтому галку не ставил.

3) Смотрим как блок кнопок будет выглядеть у нас на сайте и ничего пока не скачиваем.

Если вам всё понравилось, идём в следующий пункт.

4 и 5)  — Укажите путь до папки со скриптом. Т.е. пропишите адрес главной страницы вашего сайта и добавьте в конце /share42/

-Укажите тип движка.

6) Вот теперь скачиваем сгенерированный скрипт к себе на комп.

7) Распаковываем скачанный архив программой Win Rar и закачиваем эту папку со скриптом себе на хостинг в дирректорию public_html. Ещё раз повторю, что это делать удобнее всего через  FTP клиент FileZilla , либо другой файловый менеджер.

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

Внимание!!! Перед этим действием — сделайте копию вашего файла single.php, дабы обезопасить свой сайт от неприятностей. Если что-то сделаете ни так и сайт сломается, то загрузите этот файл обратно и всё опять будет чики-пуки…

8 ) Блокнотом Notepad++ открываем на редактирование файл single.php, который находится по адресу /public_html/wp-content/themes/ название вашей темы/single.php/  и вставляем 3 строчки этого скрипта  в верхнюю часть (у нас вертикальная плавающая панель) файла single.php

Я подчеркнул зелёным цифры 150 и 20, потому что от этого зависит в каком месте появится блок кнопок. У меня подошло значение 400,20. Т.е вставляете код в файл и исправляете значение 150 на подходящее вашему сайту. Поэкспериментируйте с этим значением.

И ещё, Важно!!! У каждого сайта разные шаблоны и по разному написан html код файлов, поэтому не удивляйтесь что у вас не получится с первого раза-как было и у меня. У меня всё заработало, когда я код вставил вот в это место, за тегом get_header(); ?>

Поэтому не бойтесь, вставляйте код, смотрите что получилось на сайте, если надо переставляйте его в другое место. И не забывайте сохранять изменения в файле. Не пугайтесь, что панелька не правильно стоит относительно Влево-Вправо, — это мы будем поправлять в следующем пункте.

9) Настроим стиль панели. Блокнотом Notepad++ открываем на редактирование файл style.css  Он находится по адресу /public_html/wp-content/themes/название вашей темы/style.css. И в самый низ этого файла вставляем 2 кода стилей.

 Со значением смещения панели влево margin-left придётся «поиграть». Я например настроил со значением  75. А вы экспериментируйте. 🙂

И ниже вставляем второй код стиля.

Тут просто вставляем, сохраняем изменения и Любуемся нашими нововведениями на сайте!!!

Друзья, если вы боитесь работать с кодами, я могу всё сделать за вас. А именно, — установить код кнопок share42 в ваши файлы.

Кстати, если вы выберите горизонтальную панель кнопок, то там будет попроще и вставлять код в файл single.php нужно будет в конец статьи.

На этом всё!!!

P.S. Буду благодарен за лайки в соцсетях)))

И не забудьте подписаться на обновление, чтобы не пропустить всё самое интересное по сайтостроению, раскрутке и безопасности блога!!!

С уважением, Ваш покорный слуга —   Алекс Fomik…

Понравилась статья - поделись с друзьями!