Всем, доброго времени суток. Для продвижение блога в социальных сетях, необходимо позаботиться о двух вещах: позволить пользователям поделиться интересными материалом непосредственно с вашего сайта, а также дать им возможность при желании подписаться на вашу страницу. Продвижение в социальных сетях может дать около половины всего посещения, и поэтому упускать такой вариант нельзя.
Гаджет общего количества подписчиков в социальных сетях, который сегодня предложу, несколько отличается от остальных. Это не просто блок кнопок социальных сетей в блоге. В нём будет отображено сколько человек подписаны на ваши страницы. Кнопочки всё же тоже сделаем и отобразим число подписавшихся.
Количество подписчиков постоянно меняется. Кто - то делает подписку, кто - то отписывается. Сделаем немного интригующий вариант. Будет отображаться круглая цифра со знаком "+ ". В коде вы сможете сами прописать какую цифру с плюсом установить.
Код абсолютно простой, с лёгкими настройками. Устанавливается в гаджет HTML/JavaScript или в сообщение блога.
<div class="sidebarContainer" id="sidebarSubscribe">
<a target="_blank" href="http://feeds.feedburner.com/shpargalochkiru" class="subscribeSidebarBox" id="subscribeRSS">
<span class="icon"></span>
<span class="title">подписано уже</span>
<span class="count">500+
</span></a>
<a target="_blank" href="https://twitter.com/VikserV" class="subscribeSidebarBox" id="followTwitter">
<span class="icon"></span>
<span class="title">друзья в Twitter</span>
<span class="count">100+
</span></a>
<a target="_blank" href="https://www.facebook.com/viktoria.barad" class="subscribeSidebarBox" id="likeFacebook">
<span class="icon"></span>
<span class="title">подписчиков в facebook</span>
<span class="count">200+
</span></a> </div>
<style>
#sidebarSubscribe {
padding: 25px 30px 20px;
}
a.subscribeSidebarBox {
border: medium none;
cursor: pointer;
display: block;
height: 60px;
margin-bottom: 8px;
position: relative;
width: 265px;
}
#sidebarSubscribe span {
color: #6E6E6E;
display: block;
padding: 3px;
position: absolute;
text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .icon {
background: url("http://4.bp.blogspot.com/-nJyhKwJmZzk/VOiMC_4rKDI/AAAAAAAAG1w/u3P9aicP4LI/s1600/blogolect.png") no-repeat scroll 0 0 transparent;
height: 45px;
left: 10px;
top: 10px;
width: 55px;
}
#sidebarSubscribe .title {
font-size: 12px;
left: 70px;
top: 8px;
}
#sidebarSubscribe .count {
font: bold 18px/28px 'Myriad Pro',Tahoma,Arialm,sans-serif;
left: 70px;
top: 23px;
}
#subscribeRSS .icon {
background-position: 0 -50px;
}
#followTwitter .icon {
background-position: -100px -50px;
}
#likeFacebook .icon {
background-position: -200px -50px;
}
a.subscribeSidebarBox {
background-color: #FAFAFA;
border-radius: 10px 10px 10px 10px;
}
a.subscribeSidebarBox:hover {
background-color: #FDFDFD;
}
a, a:active {
text-decoration: none;
}
</style>
<a target="_blank" href="http://feeds.feedburner.com/shpargalochkiru" class="subscribeSidebarBox" id="subscribeRSS">
<span class="icon"></span>
<span class="title">подписано уже</span>
<span class="count">500+
</span></a>
<a target="_blank" href="https://twitter.com/VikserV" class="subscribeSidebarBox" id="followTwitter">
<span class="icon"></span>
<span class="title">друзья в Twitter</span>
<span class="count">100+
</span></a>
<a target="_blank" href="https://www.facebook.com/viktoria.barad" class="subscribeSidebarBox" id="likeFacebook">
<span class="icon"></span>
<span class="title">подписчиков в facebook</span>
<span class="count">200+
</span></a> </div>
<style>
#sidebarSubscribe {
padding: 25px 30px 20px;
}
a.subscribeSidebarBox {
border: medium none;
cursor: pointer;
display: block;
height: 60px;
margin-bottom: 8px;
position: relative;
width: 265px;
}
#sidebarSubscribe span {
color: #6E6E6E;
display: block;
padding: 3px;
position: absolute;
text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .icon {
background: url("http://4.bp.blogspot.com/-nJyhKwJmZzk/VOiMC_4rKDI/AAAAAAAAG1w/u3P9aicP4LI/s1600/blogolect.png") no-repeat scroll 0 0 transparent;
height: 45px;
left: 10px;
top: 10px;
width: 55px;
}
#sidebarSubscribe .title {
font-size: 12px;
left: 70px;
top: 8px;
}
#sidebarSubscribe .count {
font: bold 18px/28px 'Myriad Pro',Tahoma,Arialm,sans-serif;
left: 70px;
top: 23px;
}
#subscribeRSS .icon {
background-position: 0 -50px;
}
#followTwitter .icon {
background-position: -100px -50px;
}
#likeFacebook .icon {
background-position: -200px -50px;
}
a.subscribeSidebarBox {
background-color: #FAFAFA;
border-radius: 10px 10px 10px 10px;
}
a.subscribeSidebarBox:hover {
background-color: #FDFDFD;
}
a, a:active {
text-decoration: none;
}
</style>
В коде я дала ссылки на RSS-канал и свою страницы в Twitter и Facebook. В строках, отмеченных голубым цветом, вставьте адреса своих страниц в социальных сетях. Можно убрать не нужные вам. Или подобрать свои иконки и добавить ссылки на другие сети - канал You Tube, Pinterest, Инстаграмм, ВК и другие.
Для этого добавляйте в первом коде вот такой фрагмент
<a target="_blank" href="https://www.facebook.com/viktoria.barad" class="subscribeSidebarBox" id="likeFacebook">
<span class="icon"></span>
<span class="title">подписчиков в facebook</span>
<span class="count">200+
</span></a>
<span class="icon"></span>
<span class="title">подписчиков в facebook</span>
<span class="count">200+
</span></a>
Текст пишите свой и укажите ваше количество подписчиков. Со стилями можно тоже поиграться. Если возникнут вопросы пишите в комментариях к посту.
Не менее интересно выгладят выскальзывающие кнопки социальных сетей
Повсеместное распространение виджетов с возможностью лайкнуть какой-либо материал, не покидая сайт, связано не только со стремлением интегрироваться с социальными сетями. Вроде как формальная функция, но количество лайков учитывается поисковыми системами и влияет на ранжирование сайта. Не игнорируйте её.
Такой гаджет, с отображением общего числа подписчиков, не только выглядит интересно, но и привлечёт новых друзей и читателей на ваши страницы.
Удачи всем.
здесь можно оформить подписку на новые шпаргалки
Возможно пригодится - 
