Scott Hanselman

Add Social Sharing Links to your Blog without widget JavaScript

August 5, '13 Comments [13] Posted in Blogging
Sponsored By

This sharing button thing is out of controlI'm always trying to tidy up my blog layout and remove 'noise' but every time I try to remove those social sharing buttons for Twitter and Facebook I get a barrage of email asking me to put them back. Personally, I use bookmarklets in my browser for tweeting links, rather than relying on AddThis or ShareThis or any of the other garish sharing JavaScripts.

This sharing button thing is out of control. Links work too, folks. It's the web. Let's not have our blogs turn into Vegas Billboards.*

Twitter, Facebook and Google+ all offer JavaScript that they'd LOVE for you to add to your site. Tracking is one of the reasons that they'd love you to add these. That may or may not be a strong reason not to add their JavaScript, but a concrete reason not to is speed.

When you add three services' JavaScript you're adding three DNS lookups, three (or 20) HTTP requests for their JavaScript and images, and on and on. That JavaScript has to execute as well, of course, but the value it provides isn't justified over the speed and hassle involved in my opinion.

I wanted to add social sharing links without adding JavaScript. Fortunately all these services support sharing via simply visiting a URL. Stated differently, you can share via an HTTP GET.

Below, I'm adding "YOURURLHERE" in the places you'll want the URL for your blog post. You should change these templates for your own blog engineer. WordPress, BlogSpot, DasBlog, etc all have different macro formats. Your mileage may vary.

NOTE: Make sure you check that you have the right number of quotes and ampersands when adding these to your blog template.

Twitter

Note that twitter's sharing format includes the URL, the Title and the "via" which is your twitter name.

<a href="https://twitter.com/intent/tweet?url=YOURURLHERE&text=YOURPOSTTITLEHERE&via=YOURTWITTERNAMEHERE">Twitter</a>

Facebook

<a href="https://facebook.com/sharer.php?u=YOURURLHERE">Facebook</a>

Google+

<a href="https://plus.google.com/share?url=YOURURLHERE">Google+</a>

You can share THIS post by clicking the links just below here on the same line as the Comments link.

Let me know about other social sites that support this kind of sharing in the comments, and I'll add your tips to this post.

* Yes, I know I have ads on this blog. It's taco money and it pays for the gadgets I review. It's hardly Vegas.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Monday, August 05, 2013 9:50:42 PM UTC
The Facebook URL can also take parameters like summary, title and image.

Also, those URLs should be HTTPS.
Monday, August 05, 2013 9:52:31 PM UTC
Hey Scott,

Great post, but it would have been even more effective if you showed how to fire a google analytics event when people clicked on those share links. One of the really nice things about using a social sharing widget from addthis or what not is that it manages much of the analytics gathering and reporting piece for you. Using your own links is great, but tying it into your tracking and reporting would make this advice really useful!
nate parsons
Monday, August 05, 2013 10:07:48 PM UTC
For simply allowing users to share through email, you can use a mailto: url.

href="mailto:?subject=EMAIL_SUBJECT&body=EMAIL_BODY
Tuesday, August 06, 2013 12:11:31 AM UTC
Looks like Feedburner transformed your sample URLs, so that when viewing this post in an RSS reader, they look like this:

http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://twitter.com/intent/tweet?url=YOURURLHERE&text=YOURPOSTTITLEHERE&via=YOURTWITTERNAMEHERE

http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://facebook.com/sharer.php?u=YOURURLHERE

http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://plus.google.com/share?url=YOURURLHERE

Thought I'd mention it since this might end up confusing some people into thinking they also have to add the Feedburner pieces ... :-)
Marcel Marchon
Tuesday, August 06, 2013 5:37:21 AM UTC
I was cleaning up my blog yesterday (from unused plugins) and decided that I will also need to look into an alternative to those sharing buttons which does so many requests. For now I have enabled them just on the single blog post view, but your solution provides a nice middle ground.
Tuesday, August 06, 2013 9:30:09 AM UTC
You could also add pinterest

Pinterest share URL
http://pinterest.com/pin/create/button/?url=url

Optional - description and/or image URL you can add to the end of the URL:
&description=This+page+is+really+cool
&media=URL of image to pin
Tuesday, August 06, 2013 7:52:33 PM UTC
Thanks, very useful! I used to have a few social widgets until I noticed how much of an impact they had on performance, but now I can add them back
Wednesday, August 07, 2013 5:06:32 AM UTC
I liked this so much I threw it in a WordPress plugin tonight. It decreased my page load time by at least a second. Thank you so much!

Want the plugin? Get it here: http://joshbroton.com/clean-social-share-widget-a-wordpress-plugin/

Thanks again, Scott, and keep up the amazing work.
Wednesday, August 07, 2013 12:30:55 PM UTC
Here are some additional social networks:

Linkedin: http://www.linkedin.com/shareArticle?mini=true&url=YOURURLHERE

Digg: http://digg.com/submit?url=YOURURLHERE

Reddit: http://reddit.com/submit?url=YOURURLHERE&title=YOURTITLE

Enjoy!
Wednesday, August 07, 2013 2:33:05 PM UTC
One problem I had with the Twitter share link comes to mind. If the page URL contained accented characters (such as the word 'Château') then even when properly URL encoded Twitter couldn't handle it properly. I had to use a non-SEO-friendly URL instead for certain links. It was very tempting to use Twitter's JS library.

This was a couple of years ago though, it might not be a problem now.
Wednesday, August 07, 2013 5:48:53 PM UTC
When using this method with Facebook, after you share the tab closes and you lose where you were. Google Plus forwards you to your profile which will allow you to get back using back button. Twitter will keep it on the share page and provide a link to get back to where you were.


Wouldn't it better to open up these share pages in a new tab? That way you still have the original page you were on still open.
Wednesday, September 04, 2013 9:54:19 AM UTC
Is there a way to add a Facebook preview image on the shared link? I tried this but with no success:

"https://www.facebook.com/sharer.php?s=100&p[url]=YOUR-URL-HERE[images][0]=IMAGE-URL-HERE&p[title]=YOUR-TITLE-HERE&p[summary]=YOUR-SUMMARY-HERE "&URLEncode("#")&"YOUR-HASHTAG-HERE"

Alex
Tuesday, September 10, 2013 5:15:21 AM UTC
Hello there! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form?
I'm using the same blog platform as yours and I'm having trouble finding one?
Thanks a lot!
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.