Установка кнопок социальных сетей для сайта.

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

Сегодня я решил написать пост о том, как вставить кнопки социальных сетей на сайт. Вы спросите почему? Знаете, я тоже думал, что уже все люди, которые имеют свои сайты, блоги или другие интернет ресурсы, знают как вставить кнопки социальных сетей в сайт или блог. Однако я ошибался.

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

Итак, как вы помните я не сторонник плагинов, и поэтому вставлять кнопки социальных сетей для сайта мы будем без них. Я не буду вас мучить долгим рассказом, что и почему, а просто приведу пример готовых кнопок социальных сетей для сайта, которые установлены, в шапке блога над поиском.

Единственное что вам нужно будет сделать, это заменить мои ссылки в кнопках на свои и вставить скрипт в то место где вы хотите их вывести.

Я на своем блоге использую всего 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. По просьбам трудящихся, добавил скрипт для «Одноклассников».

Удачи вам и процветания в социальных сетях!

Данный материал подготовлен для Вас администратором сайта Studio.VisionMAX.ru