Виджет подписки русские социальные сети

Привет всем). Пост короткий, так как сегодня запланирован еще один)).

Мои читатели просили, а верней дали задание сделать виджет подписки соц. сетей с возможностью подписки в Вконтакте и Одноклассники. Выкладываю  код кому интересно

Давай дружить тут

• 
• 
• 
• 
• 

Сам код.

<style type="text/css">
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#btrix-searchbox {
    border-radius: 5px;
    background: URL() no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#btrix-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="flipboard_btrix">
<center>
<a style="font-size:25px;" >Давай дружить тут</a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.odnoklassniki.ru/profile/168592036320"><img src=" http://i1322.photobucket.com/albums/u580/shefer85/1365786108_odnoklassniki_zpsb743ea08.png " title="однокласники" /></a></li>
<li><a href="http://www.facebook.com/свой адрес"><img src=" http://i1322.photobucket.com/albums/u580/shefer85/1365786140_facebook_zps7909f22d.png " title="я в Facebook" /></a></li>
<li><a href="https://plus.google.com/свой Id"><img src=" http://i1322.photobucket.com/albums/u580/shefer85/1365786168_google_plus_zps43bad13e.png " title="Google +" /></a></li>
<li><a href="http://www.twitter/твит аккаунт"><img src=" http://i1322.photobucket.com/albums/u580/shefer85/1365786160_twitter_zpsd55f45a5.png" title="я в  Twitter" /></a></li>
<li><a href=" http://vk.com/id27082345 "><img src=" http://i1322.photobucket.com/albums/u580/shefer85/1365786151_vkontakte_zps7c61ad86.png " title="в контакте" /></a></li>
</ul></div>

Надеюсь работать будет корректно. Старалась не лезть в дебри кода.
Вставлять как обычно в Дизайн-HNML/JavaSkript
Все что красным заменяете на свой аккаунт. Все ПА-ПА.