Adding Responsive Social Sharing Buttons

One of the major things in SEO is now making sure that posts are shared, retweeted and liked. Having a post retweeted not only helps get your post seen and read socially but does have an effect on its search ranking position. So making sure that posts are as easy as possible to share is important. In this post I’ll show you an easy way using AddThis to make sure that all your posts now have all the social media icons and show you how much they have been shared. Most of the default sharing options on all platforms don’t show you how much they have been shared. With this small tweak it makes it much more appealing to your readers and you don’t need that much coding skills in order to add these social sharing buttons, you just need to know how to copy and paste. Make sure that you check out my previous Tecky Tuesday posts for more blogging help.

Blogger

Step 1 – Login to your blog.
Step 2 – Go to Layout
Step 3 – Press Add Gadget at the bottom of the page
Step 4 – Then Select Html/JavaScript
Step 5 – Paste :

[html]<span id="st_finder"></span><script src="http://w.sharethis.com/widget/stblogger2.js"></script><script>// <![CDATA[
var switchTo5x= true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",{"facebook":["hcount","Facebook",""],"googleplus":["hcount","Google ",""],"twitter":["hcount","Tweet",""],"tumblr":["hcount","Tumblr",""],"pinterest":["hcount","Pinterest",""]});var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch(err) {}}
// ]]></script>[/html]

Step 6 – Go to layout, and press edit on Blog Posts
Step 7 – Unselect Show Share Buttons, this turns off the old style buttons.
Step 8 – Press Save! and give your self a high five

WordPress.Org

Step 1 – Login to admin Section
Step 2 – Go to Plugins – > Add New
Step 3 – Search for ShareThis and Install
Step 4 – Done

Tumblr

Step 1 – Login to Tumblr via your blog
Step 2 – Click on theme at the top
Step 3 – Click on “Use Custom HTML”
Step 4 – Press Ctrl+F (CMD+F mac) and look for </head>
Step 5 – Just before paste.

[html]<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:’tm-2218e14d-88e-b9ee-8dc3-7aa56d1bb7df’});</script>[/html]

Step 6 – Press Ctrl+F (CMD+F mac) and look for {block:Posts}
Just before paste

[html]<span st_url='{Permalink}’ st_title='{Title}’ class=’st_facebook_hcount’ displayText=’Facebook’></span><span st_url='{Permalink}’ st_title='{Title}’ class=’st_twitter_hcount’ displayText=’Tweet’></span><span st_url='{Permalink}’ st_title='{Title}’ class=’st_googleplus_hcount’ displayText=’Google ‘></span><span st_url='{Permalink}’ st_title='{Title}’ class=’st_linkedin_hcount’ displayText=’LinkedIn’></span><span st_url='{Permalink}’ st_title='{Title}’ class=’st_pinterest_hcount’ displayText=’Pinterest’></span>[/html]

Step 6 – All done.

Let me know if you find this post about adding social sharing buttons of any use and if so make sure you share, so that you can see the plugin working ^.^

21 Comments

Mikaylaa
2014/04/29 / 16:07

This is so incredibly helpful! Especially for newer bloggers, Thank you so much!!

Jennifer P.
2014/04/29 / 16:10

So helpfull (as per usual), you should do this more often during the week!

http://prettyassummer.blogspot.co.uk/

Lauren Walsh
2014/04/29 / 16:19

This is awesome! Thank you!! xx

Jane Willis
2014/04/29 / 16:44

Thanks for this, I’ve been wondering how to do it for ages

Lazy Days Beauty
2014/04/29 / 16:45

You are a complete genius! Just updated mine. Thank you so much!

Jaq @ http://www.lazydaysbeauty.com

anita
2014/04/29 / 17:42

Great topic because in te beginning in Can be a little hard

Xoxo http://fashionistaorbreakfast.blogspot.com

gina
2014/04/29 / 17:53

excellent – done thank you! http://thewanderlusthasgotme.blogspot.co.uk/

New Girl In Toon
2014/04/29 / 18:38

I absolutely LOVE these posts that you do … you are a superstar! Thank you so much x

Eliza
2014/04/29 / 19:34

This was so helpful, thank you!

Tara-Jane Bloomfield-Gerdes
2014/04/29 / 19:49

You, my dear, are a little gem! Thank you! x

Sammi Sunshine
2014/04/29 / 19:52

You know, the 2nd buttons do look much better! I’m going to do this, thank you!

letsstrikeapose
Author
2014/04/29 / 20:12

Just noticed I forgot to add how to turn off the old style buttons on blogger, just updated the main post. Anyone wanting to disable the old style buttons do the following.

Step 6 – Go to layout, and press edit on Blog Posts
Step 7 – Unselect Show Share Buttons, this turns off the old style buttons.
Step 8 – Press Save! and give your self a high five

Mary
x

Mars
2014/04/29 / 20:59

I love your help posts! Will have a go at this tomorrow, thank you!

Mars
Curling Stones for Lego People

Amy Johnson
2014/04/30 / 14:14

Wow! That really worked and it was so easy! Thanks!

Dani Martin
2014/04/30 / 16:46

Really easy to do, many thanks :-)
http://crystalsparklydreams.blogspot.co.uk/

Mikey
2014/04/30 / 17:09

Thanks! That was really easy and looks soo much better! Tbh html and javascript scare me slightly haha
http://mikeyshappyplace.blogspot.co.uk/

Paola Bernal
2014/04/30 / 19:34

Thank you! This was very helpful!

The Kitchenmaid
2014/05/01 / 01:24

I have been wondering how to do this for AGES! Thanks so much, so handy!

Crystal Joy
2014/05/01 / 08:49

Thanks for that!

Nagareboshi
2014/05/01 / 13:22

Thanks for the tips as always! ^__^

http://nagareboshi9.blogspot.ch/

Grace
2014/05/21 / 19:47

I’ve been looking for this tutorial ever since I started blogging, and I’ve finally found it! Thanks a million! :)

http://everydayingrace.blogspot.ca/

21 Comments

Leave a Reply Cancel reply

SUBSCRIBE BY EMAIL

LET’S CONNECT

Links