Делаем плавающий блок социальных кнопок на сайте

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

Подключаем скрипты

Facebook - вставляем этот код:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

После тега <body> вашей текущей темы.

Google Plus – код:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>

Также поставить после тега <body>.

Вконтакте

Переходим на страницу http://vk.com/dev и нажимаем «Авторизация и виджеты для сайта»

Авторизация и виджеты для сайта

Далее выбираем «Мне нравится»

Мне нравится

Добавляем свой сайт, выбираем «Миниатюрная кнопка, счётчик сверху»

Миниатюрная кнопка, счётчик сверху

Копируем только часть получившегося кода:

Копируем ТОЛЬКО часть кода

И вставляем его перед тегом </head>.

Интеграция самих кнопок

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

<div class="share1"><!--noindex-->
<div class="share-item"><a href="http://twitter.com/share" class="twitter-share-button" data-text="" data-count="vertical" data-via="ВАШ_ЛОГИН" data-lang="en_US">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div class="share-item">
<div id="vk_like" style="margin: 0 auto;"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "vertical", height: 24});
</script></div>
<div class="share-item" style="margin: 0 auto;"><div class="fb-like" data-send="false" data-layout="box_count" data-width="45" data-show-faces="false"></div></div>
<div class="share-item" style="margin-left: 9px;"><a rel="nofollow" target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'nt' : '1', 'cm' : '1', 'ck' : '1', 'sz' : '20', 'st' : '2', 'tp' : 'ok', 'vt' : '1'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script></div>
<div class="share-item"><div class="g-plusone" data-size="tall"></div>
</div>
<!--/noindex--></div>

Обращаю ваше внимание, в коде твиттера (2 строка) нужно заменить ВАШ_ЛОГИН на свой.

После, в файл CSS вашей активной темы вставляем:

.share1 {
    background: #fff;
    border:1px solid #CFDEEF;
    border-radius:3px;
    box-shadow: 0 0 10px #909090;
    padding: 6px 6px 0px 6px;
    position: fixed;
    top: 100px;
    margin-left: -90px;
    margin-bottom:10px;
    z-index:100;
    width:63px;
}
.share1 .share-item {
    clear:both;
    overflow:hidden;
    margin: 3px 0px 3px 0px;
    z-index:1000;
    text-align:center;
    padding: 0px 0px 5px 0px;
}
 
.share1 .share-item:hover{
    overflow:visible !important;
}
 
.share1:hover {
    background: #fff;
    border: 1px solid #D4D4D4;
    box-shadow: 0 0 5px #DDD;
}

Если вы все сделали правильно, то плавающие кнопки уже будут работать. В качестве альтернативы можно использовать сервис share42.

Перелинковка ↓
  • http://seoonly.ru/ seoonly.ru

    Выгодно делать блок с плавающим контекстом)) Тем же яндекс директом

  • Илья

    Спасибо. Скажи пожалуйста а не напишешь как сделать вот такой блок плавающей рекламы, как на сайте http://socialwoman.ru/love/dzhinsovaya-svadba/ там справа когда скролишь вниз после блока вконтакте появляется реклама по сайдбару и ползет до низа пока скролишь. Наверняка % заработка увеличивается т.к пользователь видит ее постоянно, а не пропускает в первом экране.

    • http://www.lucky-seo.com/ Кирилл Лакиманов

      Думаю, плагин Q2W3 Fixed Widget или аналоги отлично справятся с этой задачей. (если мы говорим о wp)

  • ваш Гарри

    Ели палки зачем столько времени тратить на такие пустяки, когда есть плюсо? http://share.pluso.ru/?new_a
    Ссылок в кода там нет, если вы озабочены показателями тиц. Кнопки весьма удобные. Так почему бы их не использовать, спрашивается?

    • http://www.lucky-seo.com/ Кирилл Лакиманов

      Разница в том, что Pluso — это поделиться записью, а то, что предлагаю я — это просто лайк/мне нравится/+1