Skip to content

Instantly share code, notes, and snippets.

@phette23
Created July 26, 2012 01:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phette23/3179694 to your computer and use it in GitHub Desktop.
Save phette23/3179694 to your computer and use it in GitHub Desktop.
Social media icons w/ links to sharing services
<!-- not entirely necessary, rewriting this in raw JS would be trivial -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#shareThis a {
display: inline-block;
text-decoration: none;
width: 16px; height: 16px;
/* you can grab & reuse this sprite if you like or use your own */
background: url(http://dl.dropbox.com/u/50206550/sharing-sprite.png) 0 -16px no-repeat;
}
#shareThis a.xztwitter {
background-position: -16px -16px;
}
#shareThis a.xzgplus {
background-position: -32px -16px;
}
#shareThis a.xzemail {
background-position: -48px -16px;
}
#shareThis a:hover,
#shareThis a:focus {
background-position: 0 0;
text-decoration: none;
}
#shareThis a.xztwitter:hover,
#shareThis a.xztwitter:focus {
background-position: -16px 0;
}
#shareThis a.xzgplus:hover,
#shareThis a.xzgplus:focus {
background-position: -32px 0px;
}
#shareThis a.xzemail:hover,
#shareThis a.xzemail:focus {
background-position: -48px 0px;
}
</style>
<p id='shareThis'>
<!-- info.chesapeake.edu/lrc/ is our fallback URL
but the JS below fills in the specific page that this code is on
if JS is turned on -->
<a href="//www.facebook.com/sharer.php?u=info.chesapeake.edu/lrc/" title="Share this page on Facebook">&nbsp;</a>
&nbsp;
<a href="//twitter.com/share?url=info.chesapeake.edu/lrc/&via=askLRC&lang=en" title="Share this page on Twitter" class="xztwitter">&nbsp;</a>
&nbsp;
<a href="//plus.google.com/share?url=info.chesapeake.edu/lrc/" title="Share this page on Google+" class="xzgplus">&nbsp;</a>
&nbsp;
<a href="mailto:?body=info.chesapeake.edu/lrc/" title="Email this page" class="xzemail">&nbsp;</a>
</p>
<script>
(function( $ ) {
var hrefs = [];
$( '#shareThis a' ).each( function(i, el) {
hrefs[i] = this.href;
});
var len = hrefs.length;
for ( var i = 0; i < len; i++ ) {
// twitter gets a couple extra parameters
if ( hrefs[i].match('twitter.com') ) {
hrefs[i] = hrefs[i].split( '=' )[0] + '=' + encodeURIComponent(window.location.href) + '&via' + hrefs[i].split( '&via' )[1];
}
else {
hrefs[i] = hrefs[i].split( '=' )[0] + '=' + encodeURIComponent(window.location.href);
}
}
$( '#shareThis a' ).each( function(i, el) {
this.href = hrefs[i];
});
} ( jQuery ))
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment