Кнопки социальных сетей для сайта
Установка кнопок социальных сетей для сайта.
Кнопки социальных сетей для сайта довольно популярный инструмент для продвижения вашего сайта или блога. Кнопки социальных сетей помогают генерировать трафик на ваш сайт, а значит привлекать новых читателей и последователей.
Сегодня я решил написать пост о том, как вставить кнопки социальных сетей на сайт. Вы спросите почему? Знаете, я тоже думал, что уже все люди, которые имеют свои сайты, блоги или другие интернет ресурсы, знают как вставить кнопки социальных сетей в сайт или блог. Однако я ошибался.
Практически каждый второй человек, который обращался ко мне по той или иной причине, просил меня наряду с решением его проблемы по блогу или сайту, поставить ему кнопки социальных сетей для сайта. А последнее обращение моего читателя прямо в комментарии заставило меня взяться за написание этой статьи.
Итак, как вы помните я не сторонник плагинов, и поэтому вставлять кнопки социальных сетей для сайта мы будем без них. Я не буду вас мучить долгим рассказом, что и почему, а просто приведу пример готовых кнопок социальных сетей для сайта, которые установлены, в шапке блога над поиском.
Единственное что вам нужно будет сделать, это заменить мои ссылки в кнопках на свои и вставить скрипт в то место где вы хотите их вывести.
Я на своем блоге использую всего 5 кнопок социальных сетей, не путайте с кнопками «ПОДЕЛИТЬСЯ СТАТЬЕЙ», и думаю что больше и не надо. Кнопку социальной сети «Одноклассники», я специально не использую, потому что считаю, что эта социальная сеть заточена под конкретную аудиторию, т. е. для ваших одноклассников, но если вы все-таки захотите поставить и ее, то сможете сделать это по аналогии с тем, что я вам покажу.
Перед установкой, рекомендую вам сначала закачать на свой сервер картинки социальных кнопок, которые вам нравятся, чтоб потом использовать ваши ссылки на картинки в скрипте.
Кнопка социальной сети Twitter:
<noindex><a href="http://twitter.com/vipstar2a" mce_href="http://twitter.com/vipstar2a" rel="nofollow" target="_blank"><img src="images/stories/soc_booton/twitter-32.png" mce_src="images/stories/soc_booton/twitter-32.png" title="Присоединиться в Твиттере" width="32" height="32"></a></noindex>
Кнопка социальной сети Вконтакте:
<noindex><a href="http://vkontakte.ru/id15116231" mce_href="http://vkontakte.ru/id80770238" rel="nofollow" target="_blank"><img src="images/stories/soc_booton/vkontakte-32.png" mce_src="images/stories/soc_booton/vkontakte-32.png" title="Присоединиться ВКонтакте" width="32" height="32"></a></noindex>
Кнопка социальной сети Facebook:
<noindex><a href="http://www.facebook.com/mantulin" mce_href="http://www.facebook.com/mantulin" rel="nofollow" target="_blank"><img src="images/stories/soc_booton/facebook-32.png" mce_src="images/stories/soc_booton/facebook-32.png" title="Присоединиться в Facebook" width="32" height="32"></a></noindex>
Кнопка социальной сети Google+:
<noindex><a href="https://plus.google.com/112054265739820188962/posts" mce_href="https://plus.google.com/112054265739820188962/posts" rel="nofollow" target="_blank"><img src="images/stories/g-plus-32.png" mce_src="images/stories/g-plus-32.png" title="Присоединиться в Google+" width="32" height="32"></a></noindex>
Кнопка социальной сети Youtube:
<noindex><a target="_blank" rel="nofollow" href="http://www.youtube.com/user/vipstars2a" mce_href="http://www.youtube.com/user/vipstars2a"><img title="Присоединиться в Youtube" src="/images/stories/soc_booton/youtube-32.png" mce_src="images/stories/soc_booton/youtube-32.png" width="32" height="32"></a></noindex>
Кнопка социальной сети Одноклассники:
<noindex><a href="http://www.odnoklassniki.ru/casham" mce_href="http://www.odnoklassniki.ru/casham" rel="nofollow" target="_blank"><img src="images/stories/soc_booton/odnoklas-32.png" mce_src="images/stories/soc_booton/odnoklas-32.png" title="Присоединиться в Одноклассниках" width="32" height="32"></a></noindex>
Вот и все, НЕ ЗАБУДЬТЕ поменять ссылки на свои! После этого вы можете разместить получившийся скрипт кнопок социальных сетей для сайта, в том месте, где вам необходимо.
Для оформления кнопок вы можете добавить для кода ваших кнопок класс
<div id=»socbooton»> коды кнопок </div>
и добавить в файл стилей вашего сайта (style.css) например следующий код(или свой):
#socbooton {
display: inline-block;
padding: 6px 0 0 6px;
background: #FFF;
border: 1px solid #E9E9E9;
border-radius: 4px;
}
#socbooton:hover {
background: #F6F6F6;
border: 1px solid #D4D4D4;
box-shadow: 0 0 5px #DDD;
}
#socbooton a {opacity: 0.5;}
#socbooton:hover a {opacity: 0.7}
#socbooton a:hover {opacity: 1}
P. S. По просьбам трудящихся, добавил скрипт для «Одноклассников».
Удачи вам и процветания в социальных сетях!
- Установка WordPress на хостинг - 11.05.2017
- Хостинг для WordPress - 26.04.2017
- 7 советов как ускорить WordPress - 18.01.2017
- WordPress плагины вывода популярных постов - 25.07.2016
- Готовим ваш сайт для мобильных устройств? - 29.06.2016
|
Как преодолеть технические сложности
|
Javascript + jQuery
|
Профессиональный сайт за один день.
|
Здравствуйте а как быть с кнопкой одноклассников вы ее не предложили??????? вы сможете добавить что б картина была полной?
Виталий, по вашей просьбе добавил скрипт для Одноклассников.
Спасибо Александр!
Огромное спасибо теперь картина полная просто заглядение .
Александр, скажите пожалуйста =) как вы настроили такой потрясающий попап на подписку на рассылки?
Для Романа: Это окно установлено с помощью плагина PopUp Domination
Да уж апетит приходит во время еды .А как бы вас попрасить о социальных кнопочках(поделись статьей) в наше время это так не обходимо.Ведь пользователю интересней посмотреть на на ссылку а на то о чем она.Спасибо заранее если поможете или не поможете.С такими мастерами как вы нам легче идти вперед не спотыкаясь о наши ошибки.Вроде я много саказал что б уговорить что б вы помогли с кнопочками (поделись статьей)
Виталий, эти кнопки установлены с помощью сайта share42.com, там все подробно написано, если не получится, могу выполнить эту работу для вас. Оформление я делал сам, с помощью CSS.
Спасибо Александр за помощь в работе с кнопочками
Хороший пост. Вот только сильно он «оптимизирован» — фразы «соц кнопки на сайт» и без того слишком часто встречаются, а Вы их еще и выделили — в глазах рябит. С первых двух абзацев хочется закрыть страничку.
Сейчас уже не рулит такое. Пишите чтоб читателям было удобно, поисковики это оценят.
Веб психопат, спасибо за совет…. 🙂
Почему так мало кнопок, социалок и закладок полно в интернете. Все равно спасибо.
Emin, просто здесь идет речь о конкретном способе вставки кнопок социальных сетей… 🙂
Видно, что вы практик, но не учитель. Ваша полезная информация расчитана на тех, кто хорошо знаком с интернетом. Начинающим на вашем сайте делать нечего, разве что просто поглазеть. Разжуйте подробней ваши тексты и посетителей у вас прибавится. Я отношусь к категории начинающего, многое хотела бы применить из вашего сайта. Но буквально в каждой статье у меня возникают вопросы,а ответов я не вижу. Простите, но и кнопки я не смогла поставить. Работать с кодами надо осторожно, значит и объяснять надо поподробней, если что то надо заменить ваше на наше, вы должны хотя бы подчеркнуть заменяемую строчку. Много непонятного.
Катерина, я и не говорил, что я учитель и обучаю здесь делать сайты. Если вы новичок и хотите научиться их создавать, вам лучше пойти на курсы для начинающих или купите курс у Попова про создание блога. У вас на сайте висит его банер. А если хотите что-то внедрить на сайте, лучше обратитесь к профессионалу пока вы новичок.
У меня блог на wordpress и я поначалу тоже заморачивался с кодами, а потом просто установил плагин и все. Думаю у кого вордпресовские движки, то с плагином намного проще.
Владимир, если во всех случаях устанавливать плагины, то через какое-то время блог будет тормозить по-страшному. Все это делается для того, чтоб снизить нагрузку на движок wordpress.
Да, я с этим полностью согласен, поэтому конечно же, особо стараюсь не перебарщивать.
У меня сейчас стоит всего 4 плагина, в принципе блог работает отлично.
Думаю если пользоваться в меру, то нечего страшного.
Согласен, если вы обходитесь всего четырьмя плагинами — это отлично!