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

Гаджет общего количества подписчиков в социальных сетях, который сегодня предложу, несколько отличается от остальных. Это не просто блок кнопок социальных сетей в блоге. В нём будет отображено сколько человек подписаны на ваши страницы. Кнопочки всё же тоже сделаем и отобразим число подписавшихся.
Количество подписчиков постоянно меняется. Кто - то делает подписку, кто - то отписывается. Сделаем немного интригующий вариант. Будет отображаться круглая цифра со знаком "+ ". В коде вы сможете сами прописать какую цифру с плюсом установить.
Код абсолютно простой, с лёгкими настройками. Устанавливается в гаджет 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>
Текст пишите свой и укажите ваше количество подписчиков. Со стилями можно тоже поиграться. Если возникнут вопросы пишите в комментариях к посту.
Не менее интересно выгладят выскальзывающие кнопки социальных сетей
Повсеместное распространение виджетов с возможностью лайкнуть какой-либо материал, не покидая сайт, связано не только со стремлением интегрироваться с социальными сетями. Вроде как формальная функция, но количество лайков учитывается поисковыми системами и влияет на ранжирование сайта. Не игнорируйте её.
Такой гаджет, с отображением общего числа подписчиков, не только выглядит интересно, но и привлечёт новых друзей и читателей на ваши страницы.
Удачи всем.
здесь можно оформить подписку на новые шпаргалки
Здравствуйте, Виктория! Я уже все кнопки социальных сетей убрала. У меня с 2015 года стояли, и ни один человек не записался из соцсетей, ни один комментарий не написал. Пишут и подписываются только блогеры.
ОтветитьУдалитьЗдравствуй, Ирина. Ну, к примеру, не все ведь твои подписчики подписаны на твои блоги в соц. сетях. А если им понравится твоя информация, они могут поделиться через кнопку ей у себя на странице. Их подписчики в соц. сетях увидят твою запись. В кратце последний абзац об этом. Ну и самой в сетях отмечаться нужно. Не просто ссылки кидать. У меня, к примеру в ФБ заходят и добавляются. Зря, кнопки нужны.
ОтветитьУдалитьОчень интересное предложение. Но я не работаю в других социальных сетях, только в blogspot.com.
ОтветитьУдалитьСемён, на сколько я знаю у Вас есть своя страница в ВКонтакте.
ОтветитьУдалитьВика доброе утречко.Акак в этот код и ВК добавить?
УдалитьПривет, Монетка. А я написала как вот после этой строки "Для этого добавляйте в первом коде вот такой фрагмент". Ну и соответственно в CSS коде рассчитать после #likeFacebook .icon {
ОтветитьУдалитьbackground-position: -200px -50px; Написать не -200, а -250.
} значение Написать не -200, а -250. Иконки можно свои подобрать.
А как добавить свой канал на дзене?
ОтветитьУдалитьLubov, этой информации много. Зайдите на официальный сайт и там по пунктам. Блоггер и Дзен разные вещи.
УдалитьLubov, что - то поторопилась. Вы хотите в этот гаджет добавить иконку дзен. Не знаю на сколько это возможно, н принцип тот же - подходящая иконка и адрес канала. Я на дзене не веду публикаций. Даже не заморачивалась по этому поводу.
ОтветитьУдалитьВы меня не поняли. Как в Блоггере дать ссылку на Дзен?
ОтветитьУдалитьВсе понятно, во втором ответе обьяснили. Просто я через Дзен продвигаю свой блог. Потихоньку идет, а тут Вы с гатжетами. Вот у меня и появилась такая мысль
ОтветитьУдалитьЯ с дзеном не очень. Сколько всего банят и блоги потом проседают. Сейчас пошёл слух, что собираются массово закрывать каналы не популярные. Но это дело личное. Где -то читала, что якобы можно кнопку установить. Полистайте там. Если есть код на неё помогу при необходимости
ОтветитьУдалить