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

Адаптивная, SEO подготовленная WordPress тема WordPress тема под вирусный контент и социальные сети

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

Блок социальных кнопок мы будем выводить на сайте с использованием 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 — ленту.

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

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

Мощный SEO плагин Clearfy
Понравилась статья? Поделиться с друзьями:
Комментариев: 14
  1. Евгения

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

    1. CMSONY

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

  2. Валерий

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

  3. Дмитрий

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

    1. Дмитрий

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

      1. CMSONY

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

  4. Kozlidze

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

    1. CMSONY

      Все написано в статье: http://goldserfer.ru/socialnyj-zamok-ot-onepress/

  5. Kozlidze

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

  6. Марина

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

    1. CMSONY

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

  7. Саша Энный

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

    1. CMSONY

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

  8. OlegZen

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

Добавить комментарий для Евгения Отменить ответ

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: