Created
September 20, 2012 01:43
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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=&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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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)); | |
| } | |
| }); | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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