Кнопки, кнопочки, кнопульки…

Здрасте всем!

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

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

Называется этот плагин — Social Share Buttons, удобная штука, скажу я вам.

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

Из минусов плагина надо отметить, что он очень сильно грузит блог. Но тут уж каждый выбирает для себя: или скорость или удобство.

Скачать плагин можно тут.

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

Попадалось вам такое?

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

Оказалось, все просто. Известный вебмастер dimox, коды и скрипты которого гуляют по всему Рунету, создал замечательный скрипт кнопок социальных сетей, за что ему огромное спасибо, который и позволяет делать такие вот вертикальные полоски с кнопками.

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

С помощью этого скрипта можно сделать:

• кнопки социальных сетей — это раз;
• вывести RSS-подписку — это два;
• и… сделать КНОПКУ ВВЕРХ, ну или Наверх, кому как нравиться – это три.

Удобно, правда?

Настройка кнопочков…

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

Нам потребуется сервис под названием Share42. Проходим по ссылке и начинаем шаманить…

Маленькое отступление. Как и в каждой своей статье, где рассказывается о манипуляциях с кодом, я напоминаю: Не забывайте делать бэкап перед любыми изменениями в файлах.

Еще одно маленькое отступление. Обратите внимание, что при установке кодов нужно очень аккуратно и четко копировать сам код. Потеряете какую-нибудь скобочку или буковку и весь блог будет перекосоё. Потом будете на меня обижаться, что я написал как-то не так. Так что, внимательнее и аккуратнее, аккуратнее и внимательнее.

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

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

Во-о-от, а теперь начинается самое интересное.

Кому не интересно могут почитать, например, мой маленький сравнительный обзор облачных сервисов.

А остальные внимательно смотрят в раздел по номером два:

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

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

И обязательно вводим ссылку на RSS-ленту вашего сайта.

Практически все. Рекомендую провести проверку того, как будут выглядеть кнопки, хотя бы для того, что бы проверить работу кнопки RSS.

Остальные пункты оставляем как есть, по крайней мере я оставил, потом всегда можно поменять.

Скачиваем готовый скрипт.

Скачали? Отлично… Распаковываем архив и получаем папку с двумя файлами – файлом скрипта и файлом изображения кнопок.

Копируем папку со скриптом в корневую папку блога

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

Если все нормально то у вас должно быть примерно такое:

И если увидели такой набор буковок, скобочков и других разных значков, значит скрипт работает верно.

Осталось только установить код в нужное место на блоге и навести красивости.

Поехали…

Установка кнопочков…

Смотрим на скрин и выбираем WordPress, если у вас блог на этом движке, и копируем (Ctrl+C) код, чтобы вставить его в нужное нам место.

Код нужно вставлять на тех страницах, где вы хотите что бы были видны кнопки.

Если хотите что бы кнопки были видны только на главной, то вставляйте код только в файл index.php.

Если требуется отображение кнопок на всех страницах сайта, то вставить код нужно, соответственно во все страницы сайта, у меня их пять. У вас их может быть как больше, так и меньше.

Вот основные файлы:

• archive.php
• index.php
• search.php
• single.php

Остался только вопрос: куда именно вставлять? Сам автор скрипта рекомендует вставлять или до текста или после.

Методом научного тыка, я определил для себя, что у моего блога такое место начинается сразу ПОСЛЕ строчки <?php get_footer(); ?>, как  будет у вас, честно говорю не знаю. Пробуйте, у вас все должно получиться.

Метод научного тыка, он такой, не сразу срабатывает.

Уф-ф-ф, потерпите, еще не много, осталось только навести красивости, хотя если вам нравиться то, что получилось можете оставить как есть.

Эти кнопки и без наворотов очень и очень не плохо выглядят, но на моем блоге с темным фоном они смотрелись слишком ярким пятном, поэтому пришлось навести немножко красоты. Да и висели они как то криво…

Наводим красивости…

Первое, что нужно сделать для красивостей – это выровнять наши кнопочки, что бы они не висели как зря, а висели со смыслом, то есть в нужном нам месте.

Для выравнивания нам потребуются:

Код самих кнопок, который мы вставляли в файлы и три тега:

data-top1=»200″  — расстояние от начала блога до кнопок, в пикселях

data-top2=»20″  — расстояние от края браузера до кнопок, в пикселях

Немного сложно словами объяснить, что меняет этот параметр, попробуйте по экспериментировать и сами поймете…

data-margin=»5″ – отступ от левого края экрана, в пикселях.

Друзья, если вам необходимо, что бы кнопки висели с правой стороны, то задайте этот параметр в значении, примерно так 600-700 пикселей. В общем, опять включаем метод научного тыка.

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

Отвечу почему, потому что при изменении размера экрана панелька с кнопками будет наползать на текст, что не есть гуд.

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

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

Так что можно и нужно сделать панельку полупрозрачной, для чего потребуется CSS-код, который приведен в шестом пункте четвертого раздела.

Копируем его и вставляем в самый низ файла style.css. Нажимаем кнопку Обновить и… ВУАЛЯ у нас красивые такие кнопочки с прозрачностью и рамочкой.

Можно еще подкорректировать прозрачность путем изменения цифирек в селекторе {opacity: 0.5}. Чем больше цифра (но не больше 1), тем меньше прозрачность и наоборот.

Ну, как-то так. Вроде бы и все, что хотел рассказать…

Дерзайте, фантазируйте, что не понятно спрашивайте. У вас все получится, я уверен!

А на десерт сегодня будет… кот-коммандос

Огромное всем спасибо, что дочитали получившуюся “диссертацию” до конца.

С уважением, ваш Абрамович Артем.