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

Здравствуйте, уважаемые читатели блога asbseo.ru!

В этой статье я хочу рассказать Вам про кнопки социальных сетей для сайта. Где взять кнопки социальных сетей, как установить и настроить? Ответы на эти вопросы Вы получите, прочитав этот пост!

Важность кнопок социальных сетей на сайтах сложно переоценить.

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

В той статье рассматривались два варианта установки кнопок.

1. При помощи сервиса http://api.yandex.ru/share

2. Установка кнопок вручную с добавлением собственного кода и возможностью менять изображения кнопок

Оба этих варианта я использовал ранее на своем блоге и у обоих были некоторые минусы, из-за которых я отказался от их использования.

В первом случае мне часто писали о том, что некоторые кнопки иногда не работают. Во втором случае количество кнопок ограничено (их всего 4).

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

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

Кнопки социальных сетей для любого сайта. Преимущества сервиса Share42

Перед тем, как приступать непосредственно к установке и настройке кнопок, хочу сказать пару слов о преимуществе использования сервиса Share.42:

— отличный внешний вид кнопок. Все они выполнены в однообразном стиле:

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

— возможность установки практически на любой сайт;

— все файлы хранятся на Вашем сервере, т.е. кнопки установлены на Вашем сайте и для загрузки не используют сторонних ресурсов;

— отсутствие исходящих ссылок;

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

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

Кроме, перечисленных выше преимуществ, о которых написано на сервисе, добавлю пару слов от себя.

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

Также, этот блок можно разместить за пределами контента, что сэкономит место на странице.

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

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

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

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

Для получения кода и самих кнопок, перейдите на сервис по этой ссылке.

В открывшемся окне Вам необходимо:

1. Выбрать размер кнопок (32×32, 24×24 или 16×16).

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

3. Затем Вам необходимо выбрать опции:

— горизонтальное или вертикальное расположение блока с кнопками. В вертикальном блоке имеется возможность настроить количество видимых кнопок. Пример Вы можете видеть слева от этой статьи. Остальные кнопки появятся при нажатии стрелки, расположенной внизу блока. Кстати, буду благодарен, если Вы нажмете на кнопочки!; 🙂

— кодировка сайта;

— язык, всплывающих при наведении курсора мыши, подсказок у иконок;

— отображение кнопки Share42.com (я галочку убрал);

— добавить ссылку на RSS ленту блога (только при использовании иконки RSS);

— подключение JQuery (я галочку не ставил).

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

5. Теперь Вам необходимо установить скрипт на своем сайте, для чего необходимо:

— распаковать папку с файлами из скачанного архива и закачать их на хостинг;

— после загрузки файлов на сервер, необходимо указать путь к Вашим файлам, например:

А также проверить доступность (правильность указания пути) файла shareshare42.js;

— затем выберите тип Вашего сайта, я выбрал «Любой сайт»;

— теперь необходимо вставить предложенный код кнопок в шаблон (на страницы) Вашего сайта.

Автор рекомендует вставлять код прямо перед или сразу после основного текста страницы.

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

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

— последним шагом Вы можете настроить (оформить) внешний вид блока.

Для этого Вам нужно разместить предложенный код в файл style.css. Выглядит он примерно так:

#share42 {
 position: fixed;
 z-index: 1000;
 margin-left: -70px; /* смещение панели влево от края контента */
 }

И еще один, необязательный, код:

#share42 {
 padding: 6px 6px 0;
 background: #FFF;
 border: 1px solid #E9E9E9;
 border-radius: 4px;
 }
 #share42:hover {
 background: #F6F6F6;
 border: 1px solid #D4D4D4;
 box-shadow: 0 0 5px #DDD;
 }
 #share42 a {opacity: 0.5}
 #share42:hover a {opacity: 0.7}
 #share42 a:hover {opacity: 1}

В зависимости от вида блока иконок (горизонтальный или вертикальный) коды будут отличатся!

Здесь Вы можете выполнить ряд настроек. Я изменил положение блока кнопок ( margin-left: -70px;), а также фон самого блока ( background: #FFF;). Больше я ничего не менял.

К вертикальному блоку коды в css я добавил полностью, а к горизонтальному не добавлял.

Если Вы хотите сделать два блока с кнопками (как у меня), то нужно использовать два разных кода. Только один из них необходимо переименовать. К горизонтальному блоку я создал отдельную папку «Share» и изменил все настройки в файлах (вместо «Share42» прописал «Share»).

На этом у меня все. Надеюсь, мой пост был полезен для Вас!

Рекомендую также прочитать:

— как установить аватар (gravatar);

— как создать блог;

— логотип сайта.

Чтобы не пропустить выход новых постов, рекомендую Вам подписаться на обновления моего блога!

С уважением, Александр Бобрин

Поделись с друзьями: