Social Buttons
Like links mit gefakter Counter Zahl
Der hier verwendete Code
<style>
#stickyBtn{
font: 9px Verdana, Geneva, sans-serif;
color:#FFF;
text-decoration:none;
text-align:center;
float:left;
margin-right:20px;
}
#stickyBtn span{
float:left;
padding:5px 3px;
border-color:#e2e2e2;
border-style: solid;
}
#stickyBtn .button{
width: 55px;
display:block;
border-width:1px 0 1px 1px;
opacity:.85;
}
#stickyBtn .button:hover{
opacity: 1;
}
#stickyBtn .button:active{
opacity: .95;
}
#stickyBtn .count{
width: auto;
display:block;
background-color:#fff;
color:#000;
border-width:1px 1px 1px 0;
position:relative;
min-width: 15px;
}
#stickyBtn .count:after{
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
border-color: transparent;
border-right-color: white;
border-width: 5px;
left: -8px;
top: 6px;
}
#stickyBtn.fbShare .button{
background-color:#6279a3;
}
#stickyBtn.tweet .button{
background-color:#71a2d3;
}
#stickyBtn.pinIt .button{
background-color:#d77980;
}
#stickyBtn.comment .button{
background-color:#999;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="stickySocial">
<div class="stickySocialSocial">
<a data-count="11" id="stickyBtn" class="fbShare ssPopup" target="_blank" href="https://www.facebook.com/sharer/sharer.php?s=100&p[title]=&p[url]=&p[images][0]=">
<span class="button">SHARE</span>
<span class="count">0</span>
</a>
<a data-count="22" id="stickyBtn" class="tweet" target="_blank" href="https://twitter.com/intent/tweet?text=+via+@unveiledwife&related=photografied&counturl=">
<span class="button">TWEET</span>
<span class="count">0</span>
</a>
<a data-count="33" id="stickyBtn" class="pinIt ssPopup" target="_blank" href="https://pinterest.com/pin/create/button/?url=&media=&description= by @unveiledwife">
<span class="button">PIN IT</span>
<span class="count">0</span>
</a>
<a data-count="44" id="stickyBtn" class="comment" href="#disqus_thread">
<span class="button">COMMENT</span>
<span class="count">0</span>
</a>
</div>
</div>
<script>
$('#stickySocial').find('#stickyBtn').each(function(){
var $el = $(this);
var ssCount = $el.data("count");
var ssClass = $el.attr("class").split(' ')[0];
$('.'+ssClass+' .count').html(ssCount);
});
$('#stickySocial').find('#stickyBtn').each(function(){
var $e = $(this),
shareCount = 0,
newShareCount = $e.data().count;
$({shareCount:shareCount}).animate({shareCount:newShareCount}, {
duration: 2500,
easing:'swing',
step: function() {
$('.count').text(Math.ceil(this.shareCount));
}
});
});
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing',
step: function() {
$('.tweet .count').text(Math.ceil(this.shareCount));
}
});
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing',
step: function() {
$('.pinIt .count').text(Math.ceil(this.shareCount));
}
});
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing',
step: function() {
$('.comment .count').text(Math.ceil(this.shareCount));
}
});
</script>