
Вообще информации о том, как разместить социальные кнопки на сайт - "море Лаптевых"!
Но предлагаются обычно готовые заготовки, не оставляя возможности для выбора внешнего вида самих кнопок.
Вот и получается, что на всех сайтах социальные кнопки, как клонированные. Хотя в сети картинок этих кнопок, воз и маленькая тележка!
Для тех кто желает более простой вариант создания кнопок, вот ссылка на онлайн конструктор: http://share.pluso.ru/
Я же предлагаю конструкцию, в которую вы по желанию можете поставить, любое понравившееся вам изображение.

Как это работает вы можете убедится, наведя курсор на эти кнопки, которые находятся на сайтбаре этого блога. А вот и сама конструкция:
<tr>
<td>
<a href="http://feeds.feedburner.com/Flophouse" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="47"title="Иногда пишу, что то умное. Подпишись на RSS ленту!" src="http://2.bp.blogspot.com/-TaKaR8ITeYM/UAch8knFRWI/AAAAAAAABcg/_NkvF2aczJ8/s1600/Иногда пишу, что то умное. Подпишись на RSS ленту!.png" width="47" /></a>
</td>
<td>
<a href="https://twitter.com/@arhimedron" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58"title="Иногда пишу, что то умное. Стань читателем Твиттера!" src="http://3.bp.blogspot.com/-N8nZfoGxd3g/UAciHzyyVAI/AAAAAAAABco/mjiD3_a0DJk/s1600/Иногда пишу, что то умное. Стань читателем Твиттера!.png" width="58" /></a>
</td>
</tr>
</table></center></center></noindex>
Желтая часть кода это трансформация CSS (transition), то есть кнопки при наведении курсора крутятся. А еще кнопки бледнеют. Бледность можно менять, изменяя маркированный красным параметр - #social a:hover {background-color: transparent;opacity:0.7;}
<a href="http://feeds.feedburner.com/Flophouse" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="47"title="Иногда пишу, что то умное. Подпишись на RSS ленту!" src="http://2.bp.blogspot.com/-TaKaR8ITeYM/UAch8knFRWI/AAAAAAAABcg/_NkvF2aczJ8/s1600/Иногда пишу, что то умное. Подпишись на RSS ленту!.png" width="47" /></a>
</td>
.
<a href="ССЫЛКА НА СОЦИАЛЬНЫЙ СЕРВИС, RSS, Твиттер, Гугл+, Фейсбук или др" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
Здесь вы можете сослаться на ваш аккаунт в RSS, Твиттере, Гугл+, Фейсбук или др.
Здесь вы можете сослаться на ваш аккаунт в RSS, Твиттере, Гугл+, Фейсбук или др.
<img border="0" height="47"title="ТИТЛ НА ВАШЕ УСМОТРЕНИЕ, БУДЕТ ПОЯВЛЯТЬСЯ ПРИ НАВЕДЕНИИ КУРСОРА" src="УРЛ. ВАШЕЙ КАРТИНКИ" width="47" />
Это непосредственно сама картинка кнопки. Размеры можете регулировать height="47" width="47"
Вы можете добавлять контейнер <td> в конструкцию ровно столько, сколько вам потребуется. А то как это будет выглядеть, лучше тестировать на ОНЛАЙН ГЕНЕРАТОРЕ по этому адресу: http://www.timsfreestuff.com/HTMLEditor/
Вот так, вы можете создать индивидуальные кнопки, придав вашему блогу колорит уникальности!