RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Апр
6

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

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

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

социальные кнопки

Для использования JQuery скриптов на сайте вы должны подключить к сайту библиотеку JQuery скриптов. Подключается библиотека, как правило в шапке сайта, для этого в WordPress нужно перейти в админ панель сайта/внешний вид / редактор и выбрать в правой колонке файл header.php.

В этом файле в самом верху после строки:

<head profile="http://gmpg.org/xfn/11">

вставить следующий html код:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

Этой строкой мы подключили библиотеку скриптов JQuery. Если, у вас уже подключена библиотека скриптов JQuery, то повторно ее подключать нет  необходимости.

Теперь можно подключить скрипт вывода социальных кнопок на сайте, его мы пропишем перед открывающимся тегом  <body> . Вот сам скрипт:

<script type="text/javascript"
src="http://Ваш_сайт/soc.knopki/social.js">
</script>

Вместо слов Ваш сайт, вставmте свой URl сайта.

Не забудьте нажать кнопку обновить файл.

Итак, библиотеку и скрипт подключили, теперь осталось только скачайть JQuery скрипт и psd исходники картинок: Soc.knopki 

Разархивируйте папку со скриптом и картинками на хостинг в корень сайта. Для тех кто не знает, что такое корень сайта — корень сайта это главная папка в которой находится CMS (как правило называется именем сайта то есть, если сайт goldserfer.ru, то главная папка или по другому корень сайта — goldserfer).

Теперь, нужно добавить функцию, которая будет выводить панель кнопок соц. сетей.

<div id="social" style="top: 20px;">
<script type="text/javascript">social(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))
</script>
</div>

Чтобы блок выводился на всем сайте, необходимо этот код добавить в следующие файлы: single.php — для вывода в записях, page.php — для вывода на страницах. Код добавляем, что в single, что в page, сразу после вывода шапки на сайте, то есть после следующей строки:

<?php get_header(); ?>

Для отображения блока социальные кнопки на сайте в самом конце файла стилей style.css добавьте код:

/* Кнопки соц. сетей -----------------------------------*/

#social {
position: fixed;
z-index: 1000;
margin-left: -77px;
padding: 6px 6px 0;
border: 1px solid transparent;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: transparent;
}
* html #social {display: none}
#social:hover {
background: transparent;
border: 1px solid transparent;
-moz-box-shadow: 0 0 5px transparent;
-webkit-box-shadow: 0 0 5px #DDD;
box-shadow: 0 0 5px transparent;
}
#social a {
display: block;
width: 50px;
height: 50px;
margin: 0 0 6px;
background-color: transparent;
#social img {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}

Ах, да чуть не забыл в файле скрипта который вы скачали: social.js вы можете отредактировать расстояние от начала страницы до плавающей панели, и расстояние от верха видимой области страницы до плавающей панели. Так же в этом файле нужно прописать rel=»nofollow» и адрес своего фида в строке отвечающей за RSS — ленту:

<a rel="nofollow" href="http://feeds.feedburner.com/">
<img src="' + f + 'rss.png" alt="" /></a>' +'');

ссылку на свой Feed, если у вас нет Feed-a вот подробная инструкция: Как создать RSS — ленту.

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

На этом все, спасибо за внимание.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (14) на “Популярные социальные кнопки. Кнопки социальных сетей для сайта”

  • Евгения (3 коммент.) 15 Апрель 2013 в 20:59

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

    • CMSONY
      CMSONY (172 коммент.) 15 Апрель 2013 в 22:56

      Через менеджер файлов ( рекомендую пользоваться FileZilla заходите на хостинг: //site.ru/site/ и сюда загружаете скачанную папку Soc.knopki

  • Валерий (1 коммент.) 18 Май 2013 в 1:04

    Очень доступно, спасибо. Добавляю в избранное.

  • Дмитрий (9 коммент.) 19 Октябрь 2014 в 17:49

    Хром видит, все гуд! А вот опера, фаерфокс и експлоурер не показывает! Можете подсказать где искать проблему?

    • Дмитрий (9 коммент.) 19 Октябрь 2014 в 17:55

      оооо….. заработало само)))) спасибо!

    • CMSONY
      CMSONY (172 коммент.) 19 Октябрь 2014 в 17:56

      У меня во всех перечисленных браузерах все работает и отображается. У вас скорее всего старые версии браузеров.

  • Kozlidze (2 коммент.) 13 Ноябрь 2014 в 17:14

    А как сделать анимацию социальных кнопок, как у Вас.

  • Kozlidze (2 коммент.) 13 Ноябрь 2014 в 17:49

    Да, но там бесплатная версия только для WP. a jQuery только на платной основе ;(

  • Марина (4 коммент.) 17 Февраль 2015 в 11:27

    Спасибо. Написано все четко и понятно. Кнопки установила, все работает. Жалко, что нет кнопки Одноклассников.

    • CMSONY
      CMSONY (172 коммент.) 17 Февраль 2015 в 12:34

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

  • Саша Энный (1 коммент.) 10 Апрель 2015 в 4:14

    Приветствую! Ничего не понимаю, не работают кнопки, всё проверил.. что может повлиять на работоспособность данного метода? Использую хостинг Блог.

    • CMSONY
      CMSONY (172 коммент.) 10 Апрель 2015 в 13:18

      Скорее всего вы допустили где-то ошибку при установке. Если нужна помощь, могу помочь…

  • OlegZen (1 коммент.) 7 Июнь 2016 в 19:44

    Спасибо Александр за личную подсказку по настройке, люблю такие украшения на сайте:)

Оставить комментарий


вверх