Sharethis is similar to addthis but it allows you to use buttons without sign-up. If you want analyics of your shares then sign-up is required. Sharethis buttons are also used by many user like shareholic. It provides top bar buttons, bottom bar buttons, sidebar floating buttons, horizontal bar and egg sharing buttons(a gadget looking like an egg display share buttons on mouse hover). I am sharing some buttons below. To add these buttons in your blog follow below steps:
Style 1:
- Go to blogger dashboard and click on template.
- Click on Edit Html and click anywhere in the Html code.
- Search for <head> by using Ctrl+F on your keyboard and paste below code just below it:
<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: "ur-8755e0fd-d7f8-2314-12cc-bd1435d08fe8", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
- Now copy the below code and paste it where you want your buttons to show up.
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>
<span class='st_sharethis_large' displayText='ShareThis'></span>
To add buttons in sidebar:
(1). Go to blogger Dashboard.
(2). Go to layout, click on add a gadget, scroll down to Html/javascript, paste the code of desired sharing buttons and click on save.
To add buttons below posts:
(1). Go to blogger dashboard.
(2). Select template and click on Edit Html.
(3). Click anywhere in the Html code and search for below code by using combination of Ctrl+F on your keyboard:
<data:post.body/>
(4). Just below it paste the code of buttons which you want to add in your blog.
(5). Finally, click on save template and you are done!
Note: some times in blogger templates/custom templates buttons fails to appear when you try to add them below post, in that case add buttons in side bar of your blog. Buttons will automatically take position under every post.
Style 2:
How to add these buttons in blogger blog:
- Go to your blog, click on template and select Edit Html.
- Search for <head> and copy below code.
<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: "ur-da93e0a4-1e76-8359-7c36-7675bf5795f", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> - Paste the copied code below <head>.
- Now copy below code and paste it where you want the buttons to appear.
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
<span class='st_googleplus_vcount' displayText='Google +'></span>
<span class='st_reddit_vcount' displayText='Reddit'></span>
<span class='st_linkedin_vcount' displayText='LinkedIn'></span>
<span class='st_pinterest_vcount' displayText='Pinterest'></span>
<span class='st_sharethis_vcount' displayText='ShareThis'></span>
Follow above steps which I have mentioned for style 1 buttons to add these buttons either in sidebar or below posts.
Style 3(buttons with counters):
To add buttons with counters in your blog follow same steps which are used for style 2 buttons except step 4. When you reach to step 4 add below code instead of that which is mentioned in step 4.
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
<span class='st_linkedin_vcount' displayText='LinkedIn'></span>
<span class='st_reddit_vcount' displayText='Reddit'></span>
<span class='st_pinterest_vcount' displayText='Pinterest'></span><span class='st_sharethis_vcount' displayText='ShareThis'></span>
Follow above steps which I have mentioned for style 1 buttons to add these buttons either in sidebar or below posts.
Style 4(floating buttons):
Similar to other platforms Sharethis also provides floating buttons. It has its own style floating buttons. You can change their position from left to right only i.e sharethis buttons floats only on left side or right side of blog. To add sharethis floating buttons to your blog follow below steps:
- Go to blogger dashboard.
- Select template and click on Edit Html.
- In the Html page click anywhere in the Html and search for <head>.
- After <head> paste the below code:
<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" src="http://s.sharethis.com/loader.js"></script>
- Click on save template and go to layout.
- In the layout page click on add a gadget and scroll down to Html/javascript.
- Copy below code and paste it into Html/javascript tab.
<script type="text/javascript">stLight.options({publisher: "ur-d7865298-f710-6b78-455b-a2713e8896d3", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "ur-d7865298-f710-6b78-455b-a2713e8896d3", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "pinterest", "googleplus", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
- Click on save and you are done, this gadget automatically takes its position on all blogs.
Customization:
As I told you above that you can change position of floating buttons from left to right on your blog so here I am going to tell you how can you do that, its very easy all you have to do is to make a little change in the code shown in second last step. If you want floating buttons on left side then don't make any changes just follow above steps but if you want the buttons to float on right side of your blog then just replace "left" with "right" in the code above and you are done. You can also control delay of your buttons, if you want buttons to appear late then in the above code increase number 5 in the orange highlighted piece of code but if you want buttons to load fast decrease 5 to 2 or 3. It may stop working when you try to make changes in open delay so if it happens then undo all changes.
Egg sharing buttons by Sharethis:
This is a unique gadget. It is an Egg which appears where you add the code of this gadget like on sidebar and show buttons when hovered by mouse. It is a good way to attract visitors to share your posts. I am not showing its code and method of use here as previously I have created a detailed post about it. You can read that at http://101helper.blogspot.com/2014/09/how-to-add-responsive-egg-sharing.html. In this post I have shared codes of this gadget and step by step tutorial to use this gadget.
Floating buttons with counters:
Floating buttons are mostly used buttons in blogs and sites. Floating buttons are of different styles, some simple styles are discussed above. Like other buttons some floating buttons also have counters which helps you know how many people have shared your post. These buttons also lets you show off number of shares to visitors. Therefore I am sharing floating buttons with counters. These buttons have a impressive and responsive design too. You can see a demo on my blog on your left side. These buttons take their positions automatically you don't need to position them. For example if you choose left style these buttons will show up on left side of your blog and will adjust automatically no matter what your blog's width is. To add floating buttons with counter on your blog follow below steps:- Go to blogger dashboard.
- Select layout and click on add a gadget.
- A small pop-up window will be opened, scroll it down and find Html/javascript.
- Click on Html/javascript and choose a style below:
Style 1(Floating buttons on left side):
<script async src="https://lessbuttons.com/script.js?facebook=1&twitter=1&googleplus=1&linkedin=1&pinterest=1&reddit=1&vkontakte=auto&odnoklassniki=auto"></script>
Style 2(Floating buttons at the bottom of blog):
<script async src="https://lessbuttons.com/script.js?facebook=1&twitter=1&googleplus=1&linkedin=1&pinterest=1&reddit=1&vkontakte=auto&odnoklassniki=auto&position=bottom"></script>
Style 3(Floating buttons on right side):
<script async src="https://lessbuttons.com/script.js?facebook=1&twitter=1&googleplus=1&linkedin=1&pinterest=1&reddit=1&vkontakte=auto&odnoklassniki=auto&position=right"></script>
- Copy code of the style which you like and paste it in Html/javascript window.
- Click on save and you are done.
Style 4(round floating buttons):
<script>document.write('<script src="//sharebutton.net/plugin/sharebutton.php?type=vertical&u=' + encodeURIComponent(document.location.href) + '"></scr' + 'ipt>');</script>
Style 5( horizontal floating buttons):
<script>document.write('<script src="//sharebutton.net/plugin/sharebutton.php?type=horizontal&u=' + encodeURIComponent(document.location.href) + '"></scr' + 'ipt>');</script>
Style 6(Horizontal floating social media bar):
Horizontal floating social media bar floats over each post, it lies below every post title and when the page scrolls down it floats at the top of each post. You can read a detailed post about this gadget here.
Wordpress style responsive follow buttons:
<style>@import url(http://weloveiconfonts.com/api/?family=zocial);/* zocial */[class*="zocial-"]:before { font-family: 'zocial', sans-serif;}.wrapper{ width: 430px; height: 50px; position: absolute;top: 91%; left: 74%; margin-left: -162px; margin-top: -25px;}
.icon{ display: inline-block; position: relative; color: #bdbdbd; width: 50px; height: 50px; text-align: center; font-size: 1.47em; line-height: 2em; background-color: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 0px 3px 0px #bdbdbd, 0px 3px 10px #bababa; -webkit-transition:background-color 250ms ease 0s; transition:background-color 250ms ease 0s;}
.zocial-facebook{margin-left: -8px;margin-left: -2px; position: relative; top: 6px;}
.icon.facebook:hover{background-color: #4986c7;}.twitter:hover{background-color: #4cb6e8;}.linkedin:hover{background-color: #29a0cc;}.youtube:hover{background-color: #a32929;}.e-mail:hover{background-color: #40C041;}.google:hover{background-color: #C75345;}.reddit:hover{background-color: #eaeaea;}.instagram:hover{background-color: #4E91F0;}
a{ text-decoration: none;}a:hover{text-decoration: none;}.icon:hover{ color: #fff; box-shadow: 0px 3px 0px #686868, 0px 3px 10px #7e7e7e;}
.icon:active{ box-shadow: inset 0px 1px 4px #3d3d3d, 0px 0px 0px #bdbdbd; top: 3px;}span.zocial-instagram,span.zocial-linkedin,span.zocial-email,span.zocial-reddit,span.zocial-youtube,span.zocial-twitter,span.zocial-google { position: relative; top: 5px;}</style><div class="wrapper"> <a class="icon facebook" href="#"><span class="zocial-facebook"></span></a> <a class="icon twitter" href="#"><span class="zocial-twitter"></span></a><a class="icon google" href="#"><span class="zocial-google"></span></a> <a class="icon linkedin" href="#"><span class="zocial-linkedin"></span></a><a class="icon youtube" href="#"><span class="zocial-youtube"></span></a><a class="icon e-mail" href="#"><span class="zocial-email"></span></a><a class="icon reddit" href="#"><span class="zocial-reddit"></span></a><a class="icon instagram" href="#"><span class="zocial-instagram"></span></a> </div>Pulso Social Sharing buttons:
Pulso sharing buttons are very responsive and easy to use. Though it is a Russian company but you can translate their site. They have many types of buttons but I have brought you a simple and with counters buttons.
(1). Simple pulso single line horizontal sharing buttons.
<script type="text/javascript">(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();</script>
<div class="pluso" data-background="#ebebeb" data-options="medium,square,line,horizontal,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print"></div>
(2). Simple pulso double line horizontal sharing buttons.<script type="text/javascript">(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();</script>
<div class="pluso" data-background="#ebebeb" data-options="medium,square,multiline,horizontal,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,digg,twitter,blogger,delicious,google,moimir,email,pinterest,print"></div>
(3). Pulso vertical double line social sharing buttons.<script type="text/javascript">(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();</script>
<div class="pluso" data-background="#ebebeb" data-options="medium,square,multiline,vertical,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,digg,twitter,blogger,delicious,google,moimir,email,pinterest,print"></div>
(4). Pulso vertical single line social sharing buttons.<script type="text/javascript">(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();</script>
<div class="pluso" data-background="#ebebeb" data-options="medium,square,line,vertical,counter,theme=04" data-services="facebook,twitter,blogger,delicious,google,pinterest"></div>
(5). Pulso social sharing buttons with counters.
<script type="text/javascript">(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();</script>
<div class="pluso" data-background="none;" data-options="medium,square,line,horizontal,counter,sepcounter=1,theme=14" data-services="facebook,twitter,blogger,delicious,google,pinterest"></div>
You can generate your own Pulso buttons
here.
Final words:
Similar to above mentioned platforms some other platforms are also available but they require registration and need purchase to use their buttons. All the above buttons are free to use, I hope you like this post and all buttons are working on your blog if you have any problem ask me in comments or contact me. Follow and subscribe to get latest news about blogger gadgets, tutorials, tips, tricks and seo. If you like this post then take a second to share it with others.
Search Tags: social buttons, sharing buttons, All in one sharing buttons for blogger, sharing buttons for blogger, share buttons for blog, how to add share buttons in blogger, floating buttons, horizontal sharing buttons, how to add share buttons below posts, 101Helper sharing buttons for blogger blog, Responsive buttons for blog, stylish sharing buttons for blogger blog.
