Social Sharing With “A HREF”

If you’re like me, you probably hate the way default social sharing buttons look and work like a festering bowl of dog vomit. They don’t match your page visually, and they probably refuse to line up together, like little anarchists. One solution is to use a plugin like Shareaholic, which makes you look like an idiot.

Wouldn’t it be easier if there was a link for sharing that you could just drop into an <a href=””> tag?

Well, there is, and I am going to show you how to do it.

1. Google+

Replace http://www.example.com/ with your own link. This will also +1 it.

<a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=http://www.example.com/" target="_blank" rel="nofollow">
Share on Google+
</a>

2. Twitter

This one is a little more complicated because there is more than just a url to send.

Replace http://www.example.com/ with your own link.

Replace  your%20text%20here (your text here) with your own text to be tweeted. Be sure to run it through a URL encoder first if you want your page to validate.

Replace YourTwitterHandle with your own Twitter username. No need to add the “@” sign before it.

<a href="http://twitter.com/share?url=http://www.example.com/&amp;text=your%20text%20here&amp;via=YourTwitterHandle" target="_blank" rel="nofollow">
Share on Twitter
</a>

3. Facebook

Replace http://www.example.com/ with your own link.

<a href="http://www.facebook.com/share.php?u=http://www.example.com/" target="_blank" rel="nofollow">
Share on Facebook
</a>

4. LinkedIn

Replace http://www.example.com/ with your own link.

<a href="https://www.linkedin.com/cws/share?url=http://www.example.com/" target="_blank" rel="nofollow">
Share on LinkedIn
</a>

5. Pinterest

Like the twitter link, this one requires a little more than a url.

Replace http://www.example.com/ with your own link.

Replace
http://www.example.com/x.jpg
with your own image url.

Replace  your%20text%20here (your text here) with your own text to be tweeted. Be sure to run it through a URL encoder first if you want your page to validate.

<a href="http://pinterest.com/pin/create/link/?url=http://www.example.com/&media=http://www.example.com/image.jpg&description=your%20text%20here" target="_blank" rel="nofollow">
Share on Pinterest
</a>

6. All together

All together it will look like this, feel free to click them and see what happens, just don’t actually “send” on the next page.

Share on Google+
Share on Twitter
Share on Facebook
Share on LinkedIn
Share on Pinterest

Here is all the code together:

<a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=http://www.example.com/" target="_blank" rel="nofollow">Share on Google+</a>

<a href="http://twitter.com/share?url=http://www.example.com/&amp;text=your%20text%20here&amp;via=YourTwitterHandle" target="_blank" rel="nofollow">Share on Twitter</a>

<a href="http://www.facebook.com/share.php?u=http://www.example.com/" target="_blank" rel="nofollow">Share on Facebook</a>

<a href="https://www.linkedin.com/cws/share?url=http://www.example.com/" target="_blank" rel="nofollow">Share on LinkedIn</a>

<a href="http://pinterest.com/pin/create/link/?url=http://www.example.com/&media=http://www.example.com/image.jpg&description=your%20text%20here" target="_blank" rel="nofollow">Share on Pinterest</a>

This is the same way I coded the social buttons on my site, only I added a little bit extra for Google Analytics (to track clicks) and WordPress (automatically puts in url) and well, a lot of CSS to make them look nice.