Simple Sharing Buttons
Posted 5 years ago in Tutorial
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.
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.
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 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.
<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>
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 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.
<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.
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 provides detailed instructions on sharing content by its URL.
- 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>
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>
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>
Let’s not forget the email 🙂
<a href="mailto:?subject=SHORTDESCRIPTION&body=MESSAGEWITHTHEURL" target="_blank">Email</a>
Here are some more share-to-social-media buttons that are not yet implemented in the Simple Sharing Buttons generator:
<a href="http://news.ycombinator.com/submitlink?u=URL&t=title" target="_blank">Hacker News</a>
<a href="http://www.digg.com/submit?url=URL&title=TITLE" target="_blank">Digg</a>
<a href="http://www.stumbleupon.com/submit?url=UTL&title=TITLE" target="_blank">StumbleUpon</a>
<a href="https://delicious.com/save?v=5&noui&jump=close&url=URL&title=TITLE" target="_blank">Delicious</a>
<a href="http://vk.com/share.php?url=URL&title=TITLE" target="_blank">VKontakte</a>