If you just want to download the final code, see the Github repo or for more customization check out my free Simple Sharing Buttons tool. For detailed instructions, continue reading below where I will show you what code you need to use on your site.
All major social networks offer their own code for sharing your web content. Using the provided code has some major advantages, for example being able to show how many people shared your content, or even simply not having to deal so much with setting things up.
On the other hand, the buttons will fail to work if the user disabled javascript in their browser. It may also be difficult to get the buttons to work together and match the style of your page (Note: if this is your only issue, there is a plethora of third party solutions). There are also privacy/security issues, such as Facebook’s Like button tracking users who neither click the Like button nor even have a Facebook account.
Using buttons that share your content only through URLs gives you much more control over the way the buttons look on your page. The buttons are easy to implement and you know exactly how they work without having to look through the source code of the official implementation.
Let’s have a look at the code for each site.
Note: the URL of the website you want to share and other parameters, such as description, need to be encoded. For a simple URL encoding tool visit meyerweb.com/eric/tools/dencoder. Or you can use my Simple Sharing Buttons generator.
Facebook¶
Official documentation for Facebook’s share dialog is here. And here is the code:
<a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">Share on Facebook</a>Twitter¶
Twitter offers so called web intents which, in their own words, make it easy to bring interactivity to Tweets that you display on the web. Web intents are actually quite powerful as they offer options to tweet, reply, retweet, favorite, and follow simply with an URL. Here we are going to look at their Tweet Web Intent.
<a href="https://twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>You can set the text that shows in the tweet with the text parameter and even have the user mention you in the tweet using via.
Google+¶
Google’s own code for sharing on Google+ offers a javascript version with a fallback when javascript is disabled. As I am removing javascript completely, I rewrote the code into this:
<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>Tumblr¶
Looking at the official bookmarklet I got the following code:
<a href="http://www.tumblr.com/share?v=3&u=URL&t=TITLE&s=" target="_blank">Post to Tumblr</a>Pinterest¶
Pinterest lets you create a Pin It button using their Widget builder. Here is a code you will need for a simple button:
<a href="http://pinterest.com/pin/create/button/?url=URL&media=URLTOANIMAGE&description=DESCRIPTION" target="_blank">Pin it</a>The media parameter takes a URL of an image you want your visitor to share on Pinterest.
Pocket¶
I couldn’t find an official code that doesn’t rely on javascript, but this seems to work:
<a href="https://getpocket.com/save?url=%u&title=%t" target="_blank">Add to Pocket</a>The official documentation, if you’d like to see it, is here.
Reddit¶
Again, no official code, but exploring the code for the official bookmarklet gave me this:
<a href="http://www.reddit.com/submit?url=URL&title=TITLE" target="_blank">Submit to Reddit</a>LinkedIn¶
LinkedIn provides detailed instructions on sharing content by its URL.
Important points:
- If you’ve provided all the details (URL, title, summary, and source) your user will choose whether to share the article with a network or to particular connections
- If you omit some details, your user will be prompted for those details before continuing to select their distribution target. It’s always best to fully include each parameter so your user can go straight to sharing and not be slowed down by entering in data.
The code for your button:
<a href="http://www.linkedin.com/shareArticle?mini=true&url=URL&title=TITLE&summary=SUMMARY&source=SOURCEURL" target="_blank">Share on LinkedIn</a>WordPress¶
For posting links on WordPress you can use the Press This function. Note that this works only for blogs hosted on WordPress.com.
<a href="http://wordpress.com/press-this.php?u=URL&t=TITLE&s=DESCRIPTION&i=URLOFANIMAGE" target="_blank">Publish on WordPress</a>Pinboard¶
The code for Pinboard also comes from an official bookmarklet.
<a href="https://pinboard.in/popup_login/?url=URL&title=TITLE&description=DESCRIPTION" target="_blank">Save to Pinboard</a>Email¶
Let’s not forget the email 🙂
<a href="mailto:?subject=SHORTDESCRIPTION&body=MESSAGEWITHTHEURL" target="_blank">Email</a>Other¶
Here are some more share-to-social-media buttons that are not yet implemented in the Simple Sharing Buttons generator:
Hacker News¶
<a href="http://news.ycombinator.com/submitlink?u=URL&t=title" target="_blank">Hacker News</a>Digg¶
<a href="http://www.digg.com/submit?url=URL&title=TITLE" target="_blank">Digg</a>StumbleUpon¶
<a href="http://www.stumbleupon.com/submit?url=UTL&title=TITLE" target="_blank">StumbleUpon</a>Delicious¶
<a href="https://delicious.com/save?v=5&noui&jump=close&url=URL&title=TITLE" target="_blank">Delicious</a>VKontakte¶
<a href="http://vk.com/share.php?url=URL&title=TITLE" target="_blank">VKontakte</a>
