basti1012.bplaced.net

Like links mit gefakter Counter Zahl

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>