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

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

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

Так как добавление иконок происходит с помощью JavaScript-файла, то на сайте не появляются лишние исходящие ссылки.

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

Итак, переходим по ссылке выше. Вначале нужно выбрать размер иконок, соответствующий дизайну вашего сайта. У меня стоят 32X32. Затем простым кликаньем выбираете иконки тех сервисов, которые желаете видеть на своем сайте. На момент написания статьи доступно 37 сервисов. Порядок отображения иконок можно менять простым перетаскиванием мышью.

Далее переходим ко второму пункту, выбираем нужные опции. Тип панели с иконками: горизонтальную или вертикальную. У меня, как видете, горизонтальная. Затем выбираем кодировку вашего сайта. У меня на этом сайте кодировка Windows-1251, т.е. кирилическая. Если ваш сайт на движке Joomla или WordPress — выбирайте UTF-8. Язык подсказок — русский. Ну и я убрал галочку в строке Добавить иконку сайта Share42.com.

Дальше мы видим кнопку, нажав на которую мы сможем примерно увидеть как эти иконки будут выглядеть на нашем сайте. Если нас что-то не устраивает - переделываем. Если все устраивает, жмем на кнопку "Скачать готовый скрипт" и скачиваем сгенерированный скрипт себе на компьютер.

Теперь скачанный скрипт нам нужно установить на наш сайт. На сайте Share42.com переходим во вкладку "Установка", где описано, что нам нужно сделать, чтобы кнопки социальных сетей появились на нашем сайте.

Первое: распакуем архив. После распаковки мы увидим, что в папке лежат всего два файла: JavaScript-файл и картинка выбранными нами иконками. Затем по FTP закачиваем распакованный архив, папку share42, на наш сайт. Я закачал в корень сайта. Далее указываем путь к только что закаченной папке. Не забываем в конце адреса закаченной папки ставить слеш.

В четвертом пункте выбираем наиболее подходящий тип сайта. Я выбрал статистический сайт без поддержки PHP. Хотя на этом сайте и поддерживается PHP, но другого нам не предлагают. Если ваш сайт на Joomla или WordPress, вы выбираете соответствующий пункт.

Далее нам предлагают вставить в шаблон нашего сайта приведенный ниже код. Копирум код и вставляем в то место, где мы хотим видеть наши иконки. Если ваш сайт на чистом HTML, вам нужно будет всавить код на все страницы или на те, на которых вы желаете их видеть. Если ваш сайт из блоков — вставте в соответствующий блок.

Для сайта на движке Joomla код нужно вставить в вашем текущем шаблоне по умолчанию >> папка html >> com_content >> article >> в файл default.php.

Для сайта на WordPress код вставляется в текущую тему в файл single.php.

Двигаемся дальше. Теперь нужно красиво оформить наши кнопочки. В шестом пункте нам предлагают стили, но написал свои. Вы можете сделать так же, подогнав кнопки к дизайну вашего сайта. Если вы пока не знакомы с CSS, самое время изучить Cascading Style Sheets — Каскадные Таблицы Стилей.

Я заключил код скрипта в контейнер DIV и придал ему класс BUTTONS:

А затем в таблицу стилей (файл style.css моего сайта) добавил следующие стили:

Так же в контейнер DIV можно добавить какой-либо текст, как это сделано у меня.

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

Удачи!