Skip to content

Instantly share code, notes, and snippets.

@michaelminter
Created September 20, 2012 01:43
Show Gist options
  • Select an option

  • Save michaelminter/3753498 to your computer and use it in GitHub Desktop.

Select an option

Save michaelminter/3753498 to your computer and use it in GitHub Desktop.
These buttons do not use the social apis so they are much lighter on page load times. I have a custom script (needs to be optimized) that gets count number and starts at 0 and animats to total. See example in use at http://unveiledwife.com
<!-- data-count is where the count will be stored from server -->
<div id="stickySocial">
<div class="stickySocialSocial">
<a data-count="11" id="stickyBtn" class="fbShare ssPopup" target="_blank" href="http://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="http://pinterest.com/pin/create/button/?url=&amp;media=&amp;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>
// needs to be asynchronous
// would like some other easing options
// need to get count from data-count
$('#stickySocial').find('#stickyBtn').each(function(){
var $e = $(this),
shareCount = 0,
newShareCount = $e.data().count;
$({shareCount:shareCount}).animate({shareCount:newShareCount}, {
duration: 2500,
easing:'swing', // can be anything
step: function() {
$('.count').text(Math.ceil(this.shareCount));
}
});
});
/*
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('.tweet .count').text(Math.ceil(this.shareCount));
}
});
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('.pinIt .count').text(Math.ceil(this.shareCount));
}
});
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('.comment .count').text(Math.ceil(this.shareCount));
}
});
*/
#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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment