Ставим на сайт кнопки «Поделиться статьёй в соц.сетях»

Социальные сети всё больше и больше входят в нашу повседневную жизнь. Среди читателей блогов много участников социальных сетей, поэтому будет полезным дать им возможность поделиться информацией со своими друзьями и знакомыми. Не будем забывать про то, что поисковые системы «реагируют» на социальные сигналы. Особенно заметный эффект наличие ссылок с социальных сетей играет при необходимости быстрой индексации новых страниц на сайте. Далее подробно рассмотрим как установить кнопки соц.сетей на блог.

А поможет нам в этом вопросе замечательный сервис share42.com. Он позволяет подобрать иконки для кнопок, выбрать необходимые соц.сети и автоматически сформировать скрипт на javascript.

Инструкция в картинках:

1) Выбираем необходимые соц.сети и сервисы:

2) Устанавливаем свойства отображения кнопок, вписываем ссылку на RSS поток и путь планируемого размещения скрипта кнопок и картинки с иконками.

3) Получаем PHP код, который нужно вставить в файл шаблона, отображающей статьи сайта. Также можно настроить эффекты отображения, вставив CSS код в файл style.css.

Я немного изменил PHP и CSS код, чтобы кнопки лучше подходили к дизайну блога.

PHP код:

<!-- #кнопги перепоста в соц.сети -->
<div class="share42block">
<h3>Поделитесь статьёй или подпишитесь на обновления:</h3>
<div class="share42init" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>"></div>
<script type="text/javascript" src="https://seorubl.ru/share42/share42.js"></script>
<script type="text/javascript">share42('https://seorubl.ru/share42/')</script>
</div>

CSS код:

/*кнопки перепоста в соц.сети*/

.share42block {
  text-transform: uppercase;
  margin:10px;
}
.share42init {
  text-align: center;
  display: block;
}
#share42 {
  display: inline-block;
  padding: 6px 0 0px 6px;
  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}

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