Плавающая панель с кнопками социальных сетей и закладок

Плавающая панель с кнопками социальных сетей и закладок

Почему именно скрипт от Share42.com?

Решил написать статью о бесплатном сервисе для создания скрипта, который мне очень понравился и, надеюсь, и вам тоже. Итак, начнем с причин, которые побудили меня поставить эту панель социальных кнопок. Не так давно я прикупил у Гудвина классный шаблон для своего нового сайта на автомобильную тему. Ко всему прочему в инструкциях я нашел ссылку на бесплатный интернет-ресурс, с которым я вас познакомлю чуть ниже и покажу, как установить. Я давно думал о том, как уменьшить число плагинов на блоге, а, попав на этот сайт, я понял, что у меня появилась возможность избавиться сразу от трех. Дело в том, что все функции, которые выполняли эти плагины, очень удобно вместились в данный скрипт. Давайте начнем по порядку.

- Первый плагин, от которого я избавился, был Social share buttons.

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

- Второй был Bookmarkz – это были кнопки социальных закладок.

Этот плагин я скорее держал для себя, чем для посетителей. В свое время закладки неплохо использовались для продвижения статей. Сейчас меньше – но после каждой написанной статьи я ее сам отправляю в закладки на всякий пожарный (лишняя ссылка перепадает).

- Третий плагин, который я снес, был Cudazi Scroll to Top.

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

Теперь перейдем непосредственно к самому сервису по созданию скрипта социальных кнопок и закладок. Сам сайт вы найдете по вот этой ссылке – Share42.

Сразу скажу, что все параметры можете менять сколько угодно, но только до установки на сайт. Первое что вам нужно сделать это выбрать размер кнопок который вам подходит. Есть 3 варианта 16х16, 24х24 и 32х32 пикселя. Это во многом зависит от того как и в каком виде вы хотите разместить эти кнопки, чуть ниже вы поймете что я имел в виду. Выберите кнопки социальных сетей и закладок, которые вас интересуют – для этого просто кликните на них. Вы так же можете добавить кнопку «RSS» (я не ставил, потому что у меня она встроена в шаблон, вверху), кнопку «Распечатать» (на случай если кто-то захочет распечатать вашу статью на принтере) и кнопку «Наверх»- то, что меня сильно заинтересовало. Последовательность тоже выбирается, просто перетаскивая кнопки и выставляя их в удобном для вас порядке.

Делаем по очереди следующее...

Надо определиться, какую панель вы хотите, горизонтальную или вертикальную.

Если поставить определенную галочку, то вы разделите панель на две части и более с прокруткой их вверх и вниз. В моем случае я выбрал 20 кнопок и, поставив цифру 10, вместо стандартной 7, получил две части. Нажимая на маленький треугольник под/над панелью, она прокручивается. Если же вышеуказанную галочку убрать вы просто поставите все кнопочки в столбик одна над другой. Этот вариант подходит, если у вас не много кнопок выбрано и они не большого размера (3 варианта упомянутых выше).

Эту галочку я убрал, она просто приводит на сайт скрипта – но это на ваше усмотрение.

Если вы включили и кнопку RSS — то вам сюда надо вставить адрес вашего фида(url). В моем случае я его взял на Feedburner в своем аккаунте.

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

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

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

Я закинул с помощью Filezilla в httpdocs. Потом надо прописать правильный путь к этой папке в определенной строке. Ниже появится ссылка, нажав которую, вы можете проверить правильность введенных данных. Если появится возможность скачать и просмотреть скрипт – все ок. Есть возможность выбрать тип движка (CMS) вашего сайта – у меня WordPress. После копируем код, который появится ниже, и вписываем его в код страницы, где хотите, чтобы появилась наша плавающая панель с социальными кнопками. В WordPress заходим во «Внешний вид — Редактор» и если хотите что бы панель появилась в каждой записи, то этот кусочек кода вставляем в конце single. php. Если надо, чтобы появлялось на всех страницах, то код вписываем в page. php.

После того как вы вставили код в нужное место, не спешите закрывать редактор. Есть еще значения, с которыми вам надо будет поработать для того, чтобы выровнять панель под ваш шаблон. В двух словах, это смещение вправо/влево и вверх/вниз. Для примера — у меня чтобы сдвинуть панель полностью вправо в data-margin= вместо »0» стоит «1170«. К этому моменту, у вас должна появится панель, примерно как у меня. Если вы хотите, чтобы она у вас была тусклая как в предпросмотре, а при наведении курсора светилась, то надо еще одну небольшую работу сделать.

Копируем на сайте кусочек кода и вставляем в stile. css. Все, други мои, на этом этапе у вас все должно плясать и вертеться.


Карта сайта


Информационный сайт Webavtocat.ru