Социальные кнопки поделиться с счетчиком – SocialShare

Социальные кнопки поделиться с счетчиком – SocialShare

Социальные кнопки поделиться с счетчиком — SocialShare

Социальные кнопки поделиться с счетчиком – SocialShare – небольшой JQuery плагин кнопок социальных медиа. Поддерживает очень много социалок (смотрите на демо).

Скачать   |   Демо


Как использовать:

Импорт JQuery Javascript библиотеки и плагин JQuery socialshare в HTML документ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="SocialShare.js"></script>

Создайте Twitter кнопку tweet

<div class="like-block">
<div class="like-counter counter c_twitter"></div>
<button class="like-button share s_twitter">twitter</button>
</div>

Образец CSS для кнопок и счетчика

.like-block {
width: 100px;
height: 90px;
display: inline-block;
margin-right: 5px;
padding: 9px;
border: 1px solid #3e9cbf;
border-radius: 5px;
}
.like-button {
height: 30px;
width: 100%;
text-align: center;
vertical-align: middle;
border-radius: 5px;
background: #3e9cbf;
padding: 8px 14px 10px;
border: 1px solid #3e9cbf;
cursor: pointer;
font-size: 0.8em;
font-family: Oswald, sans-serif;
letter-spacing: .1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
color: #fff;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
}
.like-button:hover {
color: #dfe7ea;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}
.like-counter {
height: 30px;
border: 2px solid #205c73;
text-align: center;
margin-bottom: 10px;
border-radius: 5px;
font-size: 1em;
font-family: Oswald, sans-serif;
letter-spacing: .1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
color: #fff;
background: #3e9cbf;
padding-top: 10px;
}

JavaScript вызова плагина

<script type="text/javascript">
$(document).ready(function(){
$('.share').ShareLink({
title: 'jQuery Script',
text: 'Free jQuery Plugins',
image: 'http://www.jqueryscript.net/images/logo.png',
url: 'http://www.jqueryscript.net',
class_prefix: 's_'
})
$('.counter').ShareCounter({
url: 'http://www.jqueryscript.net'
})
 
});
</script>
Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *