Add Floating Vertical Share Bar for Blogger Posts with ShareThis

Sharing is caring. People love to share interesting content they find on the web as and when they find them. As a publisher, you have a responsibility to provide sharing options for users to share your content and else even if you have interesting content, sharing may not happen. I mean, some people will share but still there are people looking for sharing options to share content to multiple social networks. Else it is really time consuming activity for them. So you should consider about offering sharing options for your blog readers if you're think about convenience of your readers and getting more content shared. But you may not like to have whatever sharing option as it should be comply with your blog design and flow of your blog. Did you find a sharing tool for your blog par with your blog design?

Do You Like to Have a Stylish Sharing Bar?

We have already discussed about adding share buttons  with ShareThis. But now I'm gonna introduce you a stylish widget of ShareThis - Floating Vertical Share Bar. If you can recall, we have discussed such a vertical vertical sharing bar offered by AddThis too. Typically, in blogs, we see individual share buttons beneath blog posts or somewhere near the post for readers to share it easily. But readers need to scroll down to see share buttons implemented on the blog. However here with this vertical share bar, it's no matter your readers scroll page or not, the share options are always visible for them. If you wanna change positions of the bar, this floating share bar can be aligned to left or right.

Features...

You won't find any different in functionality as it's provided by ShareThis and it's functionality is same as share buttons. But the only difference is it adds more stylish look to your blog and yeah, it's floating. As usually with ShareThis sharing options, it will generate sharing reports for shares happen on your blog. It includes most shared content, individual social networks with total shares happened and detailed statistics of shares. So you can find out what content matters to your readers most and predict about your user base. Also you can make use of these insights to create trending content in future. Get ready to add vertical share bar to your blog?

Before You Go:

You need to have a ShareThis account to continue with below process. If you don't have an account already, register for a new account.

Steps:

1. Navigate to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button underneath your blog preview.

5. Now find </head> in your template.

6. Add following scripts right before the </head> tag.

<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>

Color Indication Information:

   - Share Widget Style

Here you can enable Multi-Post (Oauth) style or Direct Post (Classic) style. Specify true to enable Multi-Post style and false to enable Direct Post style.

Multi Post Style - Let people share your content to multiple networks at once without leaving your blog.

Direct Post Style - People will redirected to particular site when clicking on button. For example, if an user clicks on Facebook button, he will be redirected to Facebook to complete sharing.

7. Now find </body> tag in your template and copy this code snippet right before </body> tag.

<b:if cond='data:blog.pageType == "item"'>
<script>
var options={ "publisher": "[Your Publisher Key]", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "pinterest", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
</b:if>

Color Indication Information:

   - Your Publisher Key

Add your ShareThis publisher key here. If you don't know your publisher key, you can find it at My Account page.

   - Share Bar Position

Here you can change the position of your share bar. By default, it is aligned to left. If you wanna align it to right, just specify right here.


8. Now preview your blog for changes and save template.


More Information:

* You can find the all statistics for shares happened on your blog via ShareThis Metrics Dashboard.

* If you wish to customize your buttons and its functionality further, you can refer ShareThis Customization Overview.

Enjoy :-)