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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!