Просто попробуйте бесплатно зайти через свою социальную сеть! Бесплатно!!!
Знакомьтесь, общайтесь, влюбляйтесь!!!!
Круглая кнопка для соц. сетей
Круглая кнопка SHARE при наведении на которую появляются кнопки сервисов популярных социальных сетей, таких как, например, twitter, google +1, vkontakte, facebook и любых других по вашему усмотрению. Кнопки выбранных сервисов будут расположены по кругу.
Разметка HTML
Основа представляет собой несколько DIV-ов:
<div id="buttons">
<div class="holder identity"> </div>
<div class="holder identity"> </div>
....
</div>
Заполнив ДИВы кнопками соц. сетей получим что-то похожее на это:
<div id="buttons">
<div class="text">+</div>
<div class="holder twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="pcvector" data-lang="ru">Твитнуть</a>
</div>
<div class="holder vk">
<div id="vk_like"></div>
</div>
<div class="holder mail">
<a class="mrc__share" href="http://connect.mail.ru/share">В Мой Мир</a>
</div>
<div class="holder gplus">
<div class="g-plusone" data-size="medium"></div>
</div>
<div class="holder addthis">
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter addthis_pill_style"></a>
</div>
</div>
<div class="holder facebook">
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="120" data-show-faces="true"></div>
</div>
</div>
CSS
#buttons {
position: relative;
border: 10px solid #ddd;
border-radius: 100px;
width: 80px;
margin: 30px;
box-shadow: 0px 0px 10px #ddd, 0px 10px 0px #aaa;
height: 80px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}
#buttons:hover {
border: 15px solid #ddd;
width: 160px;
height: 160px;
left: -40px;
opacity: 1;
top: -40px;
}
#buttons div {
position: absolute;
opacity: 0;
min-width: 100px;
top: 15px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}
#buttons:hover div {
opacity: 1;
}
#buttons .text {
color: #FF9000;
font-size: 101px;
font-weight: bold;
left: 11px;
opacity: 1;
text-shadow: 0 3px 0 #B5B5B5;
top: -19px;
z-index: 5000;
}
#buttons:hover .text {
top: 60px;
left: 35px;
opacity: 0;
}
#buttons:hover div:nth-of-type(2) {
left: -16px;
top: 0;
}
#buttons:hover div:nth-of-type(3) {
left: 102px;
top: 5px;
}
#buttons:hover div:nth-of-type(4) {
left: -52px;
top: 62px;
}
#buttons:hover div:nth-of-type(5) {
left: 144px;
top: 64px;
}
#buttons:hover div:nth-of-type(6) {
left: -20px;
top: 110px;
}
#buttons:hover div:nth-of-type(7) {
left: 110px;
top: 136px;
}
.fb_edge_widget_with_comment iframe {
width: 120px !important;
}
В свойствах div:nth-of-type(2), (3), (4), (5), (6), (7) определяем положение наших соц. кнопок на круге (всего 6 сервисов).
1-ый DIV у нас используется для надписи на самой кнопке +.
<div class="text">+</div>
Остальные 6 DIV-ов — заняты нашими социальными сервисами.
Их может быть и меньше и больше.
javascript
Для самой кнопки скрипты не используются, но для соц. сетей не забываем подключать их java-коды:
<script src="http://cdn.connect.mail.ru/js/share/2/share.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?47"></script>
<script type="text/javascript">
VK.init({apiId: 2289323, onlyWidgets: true});
</script>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button", height: 20});
</script>
<script type=»text/javascript» src=»http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f3985a80cce5801″></script>
<script type=»text/javascript»>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=»//platform.twitter.com/widgets.js»;fjs.parentNode.insertBefore(js,fjs);}}(document,»script»,»twitter-wjs»);
window.___gcfg = {lang: ‘ru’};
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = «//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=210547609026984»;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>
Источник — http://pcvector.net/scripts/buttons_and_icons/324-krgulaya-knopka-dlya-soc-setey.html