The Simplest Social Sharing Links

Use the smallest amount of work to get the fastest results for social sharing

Answer First

No modification needed, include this in your HTML.




<a class='socialLink' title='Share on Reddit' id='redditshare' href='http://www.reddit.com/submit' onclick="document.getElementById('redditshare').href = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location);"> [Reddit] </a> 

<a class='socialLink' title='Share on Facebook' id='facebookShare' href='https://www.facebook.com/sharer/sharer.php' onclick="document.getElementById('facebookShare').href = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location);" > [FaceBook] </a> 

<a class='socialLink' title='Share on Google+' id='googleShare' href='https://plus.google.com/share' onclick="document.getElementById('googleShare').href = 'https://plus.google.com/share?url=' + encodeURIComponent(window.location);"> [Google+] </a> 

<a class='socialLink' title='Share on Twitter' id='twitterShare' href='http://twitter.com/share' onclick="document.getElementById('twitterShare').href = 'http://twitter.com/share?text=' +document.title +  '&url=' + encodeURIComponent(window.location);" > [Twitter] </a> 



What, How, Why

You don't need to load the external library for each link, or even use the link-generator websites. Here you can use simple static content to do the work for you, and it will work on any page. We also use a good fall back for people not using Javascript, and has filled in title tags filled in as we are good web Samaritans.

Looking at the link for Reddit:




<a class='socialLink' title='Share on Reddit' id='redditshare'

href='http://www.reddit.com/submit'

onclick="document.getElementById('redditshare').href=

'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); ">

[Reddit]</a> 



We can break this down into understandable parts. We start using the anchor, and give it a class so we can use css to style it if we want later. Then we set the title which will appear as a tooltip:




<a class='socialLink' 

title='Share on Reddit'



Then set the fall back link, this is also required so that it will look like a link, <a> tags are not styled the same if they don't have href set.




href='http://www.reddit.com/submit'



Finally we make the magic happen with giving the website we are sharing to the information about this page:




onclick="

document.getElementById('redditshare').href =

	'http://www.reddit.com/submit?url=' +

	encodeURIComponent(window.location);

"



We use the onclick handler to call some javascript. This in turn selects the element it is in, document.getElementById('redditshare'), and sets the href to a special version of the same link now including the URL of the page we want to share 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location). This extra bit is unique for each of the social websites, but they will all usually do similar things.

I've made up sharing links for Reddit, Facebook, Google+, and Twitter that all work in the same manner. You can use them just by copying the code below. The Twitter link even puts in the Title as the tweet body.




<a class='socialLink' title='Share on Reddit' id='redditshare' href='http://www.reddit.com/submit' onclick="document.getElementById('redditshare').href = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location);"> [Reddit] </a> 

<a class='socialLink' title='Share on Facebook' id='facebookShare' href='https://www.facebook.com/sharer/sharer.php' onclick="document.getElementById('facebookShare').href = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location);" > [FaceBook] </a> 

<a class='socialLink' title='Share on Google+' id='googleShare' href='https://plus.google.com/share' onclick="document.getElementById('googleShare').href = 'https://plus.google.com/share?url=' + encodeURIComponent(window.location);"> [Google+] </a> 

<a class='socialLink' title='Share on Twitter' id='twitterShare' href='http://twitter.com/share' onclick="document.getElementById('twitterShare').href = 'http://twitter.com/share?text=' +document.title +  '&url=' + encodeURIComponent(window.location);" > [Twitter] </a> 



Bonus: There is also one for Y Combinator adaped from a bookmarklet :




<a class='socialLink' title='Submit on Y Combinator' id='YCombinatorShare' href='http://news.ycombinator.com/submitlink' onclick="document.getElementById('YCombinatorShare').href = 'http://news.ycombinator.com/submitlink?u=' + encodeURIComponent(window.location) +  '&t=' + encodeURIComponent(document.title) ;" > [Y Combinator] </a> 



If you might use this, or just thought it was cool for your next minimalist blog template, you can share this page with friends using the links below.